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,13 +99,19 @@ export const SearchView = (props: Props) => {
 
         <div class="floor">
           <div class="row">
-            <For each={sortedFeed()}>
+            <LoadMoreWrapper
-              {(article) => (
+              pageSize={LOAD_MORE_PAGE_SIZE}
-                <div class="col-md-6">
+              hidden={!isLoadMoreButtonVisible()}
-                  <ArticleCard article={article} desktopCoverSize="L" />
+              loadFunction={loadMore}
-                </div>
+            >
-              )}
+              <For each={sortedFeed()}>
-            </For>
+                {(article) => (
+                  <div class="col-md-6">
+                    <ArticleCard article={article} desktopCoverSize="L" />
+                  </div>
+                )}
+              </For>
+            </LoadMoreWrapper>
 
             <Show when={isLoadMoreButtonVisible()}>
               <div class="col-md-6">

src/styles/_grid.scss

@@ -104,12 +104,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: calc($size / $columns);
 
-  margin-left: if($num == 0, 0, calc(100% * #{$num}));
+  margin-left: if($num ==0, 0, calc(100% * #{$num}));
 }
 
 // Миксин row-cols
 @mixin row-cols($count) {
-  > * {
+  >* {
     flex: 0 0 auto;
     width: 100% / $count;
   }
@@ -118,7 +118,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 // Миксин make-grid-columns
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
+    $infix: if($breakpoint =='xs', '', "-#{$breakpoint}");
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Добавляем класс col-auto
@@ -143,14 +143,31 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-justify-content($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $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;
+      }
     }
   }
 }
@@ -159,10 +176,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-display-classes($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
       @each $value in $displays {
-        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+        .#{$prefix}d#{$infix}-#{$value} {
+          display: $value !important;
+        }
       }
     }
   }
@@ -172,11 +191,48 @@ $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,
 .container-fluid {
@@ -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;