diff --git a/src/components/Views/SearchView.tsx b/src/components/Views/SearchView.tsx index 8a32a767..8382412f 100644 --- a/src/components/Views/SearchView.tsx +++ b/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) => {
- - {(article) => ( -
- -
- )} -
+
diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss index 91ea986c..147aefa0 100644 --- a/src/styles/_grid.scss +++ b/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}-end { 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; } + .#{$prefix}justify-content#{$infix}-start { + justify-content: flex-start !important; + } + + .#{$prefix}justify-content#{$infix}-end { + 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 { @@ -189,9 +245,4 @@ $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; +} \ No newline at end of file