appscssbig

src/components/Views/SearchView.tsx

@@ -3,11 +3,12 @@ import { For, Show, createSignal, onMount } from 'solid-js'
 import { useSearchParams } from '@solidjs/router'
 import { useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
-import type { SearchResult } from '~/graphql/schema/core.gen'
+import type { SearchResult, Shout } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { ArticleCard } from '../Feed/ArticleCard'
 
 import '~/styles/views/Search.module.scss'
+import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 
 type Props = {
   query: string
@@ -31,19 +32,22 @@ export const SearchView = (props: Props) => {
 
   const loadMore = async () => {
     saveScrollPosition()
+    let results: Shout[] = []
     if (query()) {
       console.log(query())
-      const { hasMore } = await loadShoutsSearch({
+      const { hasMore, newShouts } = await loadShoutsSearch({
         text: query(),
         offset: offset(),
         limit: LOAD_MORE_PAGE_SIZE
       })
       setIsLoadMoreButtonVisible(hasMore)
       setOffset(offset() + LOAD_MORE_PAGE_SIZE)
+      results = newShouts
     } else {
       console.warn('[SaerchView] no query found')
     }
     restoreScrollPosition()
+    return results as LoadMoreItems
   }
 
   onMount(() => {
@@ -95,6 +99,11 @@ export const SearchView = (props: Props) => {
 
         <div class="floor">
           <div class="row">
+            <LoadMoreWrapper
+              pageSize={LOAD_MORE_PAGE_SIZE}
+              hidden={!isLoadMoreButtonVisible()}
+              loadFunction={loadMore}
+            >
               <For each={sortedFeed()}>
                 {(article) => (
                   <div class="col-md-6">
@@ -102,6 +111,7 @@ export const SearchView = (props: Props) => {
                   </div>
                 )}
               </For>
+            </LoadMoreWrapper>
 
             <Show when={isLoadMoreButtonVisible()}>
               <div class="col-md-6">

src/styles/_grid.scss

@@ -145,12 +145,29 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
-      .#{$prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
+      .#{$prefix}justify-content#{$infix}-start {
-      .#{$prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
+        justify-content: flex-start !important;
-      .#{$prefix}justify-content#{$infix}-center  { justify-content: center !important; }
+      }
-      .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
+
-      .#{$prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
+      .#{$prefix}justify-content#{$infix}-end {
-      .#{$prefix}justify-content#{$infix}-evenly  { justify-content: space-evenly !important; }
+        justify-content: flex-end !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-center {
+        justify-content: center !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-between {
+        justify-content: space-between !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-around {
+        justify-content: space-around !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-evenly {
+        justify-content: space-evenly !important;
+      }
     }
   }
 }
@@ -162,7 +179,9 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
       $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
       @each $value in $displays {
-        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+        .#{$prefix}d#{$infix}-#{$value} {
+          display: $value !important;
+        }
       }
     }
   }
@@ -172,10 +191,47 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-print-display-classes() {
   @media print {
     @each $value in $displays {
-      .#{$prefix}d-print-#{$value} { display: $value !important; }
+      .#{$prefix}d-print-#{$value} {
+        display: $value !important;
       }
     }
   }
+}
+
+// Добавляем новый миксин для генерации классов порядка
+@mixin make-order-classes($breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+
+      .order#{$infix}-first {
+        order: -1 !important;
+      }
+
+      .order#{$infix}-last {
+        order: 9999 !important;
+      }
+
+      .order#{$infix}-0 {
+        order: 0 !important;
+      }
+
+      @for $i from 1 through 5 {
+        .order#{$infix}-#{$i} {
+          order: $i !important;
+        }
+      }
+    }
+  }
+}
+
+// Добавляем вызов нового миксина в конец файла
+@include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes;
+@include make-print-display-classes;
+@include make-justify-content;
+@include make-order-classes;
+
 
 // Генерация классов контейнера и ряда
 .container,
@@ -190,8 +246,3 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
     @include make-col-ready;
   }
 }
-
-@include make-grid-columns($grid-columns, $grid-breakpoints);
-@include make-display-classes;
-@include make-print-display-classes;
-@include make-justify-content;