From 34a1b24fc22aaf8dc1046c6a06e81f993883ac53 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Tue, 26 Aug 2025 23:13:58 +0900 Subject: [PATCH 1/4] fix filterHide --- components/Layout/FiltersFrame.js | 40 +---------------------------- components/NftsComponent.js | 2 +- pages/account/[id]/transactions.js | 2 +- pages/admin/pro/history.js | 2 +- pages/amms.js | 2 +- pages/distribution.js | 2 +- pages/nft-distribution/[[...id]].js | 2 +- pages/nft-sales.js | 2 +- pages/nft-volumes/index.js | 2 +- pages/tokens.js | 2 +- styles/components/filters.scss | 10 ++++---- 11 files changed, 15 insertions(+), 53 deletions(-) diff --git a/components/Layout/FiltersFrame.js b/components/Layout/FiltersFrame.js index 0fd97358c..4ac2d0683 100644 --- a/components/Layout/FiltersFrame.js +++ b/components/Layout/FiltersFrame.js @@ -8,43 +8,9 @@ import ViewTogggle from '../UI/ViewToggle' import { TbArrowsSort } from 'react-icons/tb' import { IoMdClose } from 'react-icons/io' -import { FaFilter } from 'react-icons/fa' import { setTabParams, useWidth } from '../../utils' import CurrencySelect from '../UI/CurrencySelect' import { TablePagination } from '@mui/material' -import { capitalize, shortHash } from '../../utils/format' - -// Filter Indicator Component -function FilterIndicator({ filters }) { - // Check if any filters are active - const activeFilters = Object.entries(filters).filter( - ([, value]) => value && value !== '' && value !== null && value !== undefined - ) - - if (activeFilters.length === 0) { - return null - } - - const renderFilterValue = (key, value) => { - return capitalize(key) + ' = ' + shortHash(value) - } - - return ( -
- - - Filter applied:{' '} - {activeFilters.map(([key, value], index) => ( - - {index > 0 && index === activeFilters.length - 1 ? ' and ' : ''} - {index > 0 && index < activeFilters.length - 1 ? ', ' : ''} - {renderFilterValue(key, value)} - - ))} - -
- ) -} export default function FiltersFrame({ children, @@ -67,8 +33,7 @@ export default function FiltersFrame({ setPage, rowsPerPage, setRowsPerPage, - onlyCsv, - filters + onlyCsv }) { const { t } = useTranslation() const router = useRouter() @@ -225,10 +190,7 @@ export default function FiltersFrame({ > {children[0]} -
- {/* Filter Indicator */} - {filters && (width > 1300 ? filtersHide : !filtersHide) && } {children[1]}
diff --git a/components/NftsComponent.js b/components/NftsComponent.js index 339d1a47c..a7a8201d1 100644 --- a/components/NftsComponent.js +++ b/components/NftsComponent.js @@ -98,7 +98,7 @@ export default function NftsComponent({ const [order, setOrder] = useState(orderQuery) const [issuerTaxonUrlPart, setIssuerTaxonUrlPart] = useState('?view=' + activeView) const [collectionUrlPart, setCollectionUrlPart] = useState(collectionQuery ? '&collection=' + collectionQuery : '') - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [selectedToken, setSelectedToken] = useState({ currency: saleCurrency, issuer: saleCurrencyIssuer diff --git a/pages/account/[id]/transactions.js b/pages/account/[id]/transactions.js index 8c536fa6e..e4105f362 100644 --- a/pages/account/[id]/transactions.js +++ b/pages/account/[id]/transactions.js @@ -115,7 +115,7 @@ export default function AccountTransactions({ const [loading, setLoading] = useState(false) const [errorMessage, setErrorMessage] = useState(initialErrorMessage || '') const [order, setOrder] = useState('newest') // newest | oldest - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [txType, setTxType] = useState('tx') // tx = all types const [initiated, setInitiated] = useState('0') // 0 = both, 1 = outgoing, 2 = incoming const [excludeFailures, setExcludeFailures] = useState('0') // 0 = include, 1 = exclude diff --git a/pages/admin/pro/history.js b/pages/admin/pro/history.js index 51833ab7c..85a5ceb23 100644 --- a/pages/admin/pro/history.js +++ b/pages/admin/pro/history.js @@ -216,7 +216,7 @@ export default function History({ const [addressesToCheck, setAddressesToCheck] = useState(queryAddress ? [queryAddress] : []) const [period, setPeriod] = useState('all') const [order, setOrder] = useState('desc') - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [page, setPage] = useState(0) const [rowsPerPage, setRowsPerPage] = useState(10) const [currentList, setCurrentList] = useState([]) diff --git a/pages/amms.js b/pages/amms.js index 5cca2bc3d..8aa7deb7e 100644 --- a/pages/amms.js +++ b/pages/amms.js @@ -123,7 +123,7 @@ export default function Amms({ const [loading, setLoading] = useState(false) const [errorMessage, setErrorMessage] = useState(initialErrorMessage || '') const [marker, setMarker] = useState(initialData?.marker) - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [token, setToken] = useState({ currency: stripText(currencyQuery), issuer: stripText(currencyIssuerQuery) diff --git a/pages/distribution.js b/pages/distribution.js index ce2b41121..9da48e121 100644 --- a/pages/distribution.js +++ b/pages/distribution.js @@ -35,7 +35,7 @@ export default function Distribution({ selectedCurrency, fiatRate }) { const [loading, setLoading] = useState(false) const [errorMessage, setErrorMessage] = useState('') const [escrowMode, setEscrowMode] = useState('none') // 'none', 'short', 'locked' - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const controller = new AbortController() diff --git a/pages/nft-distribution/[[...id]].js b/pages/nft-distribution/[[...id]].js index 9a0886a8d..312308a31 100644 --- a/pages/nft-distribution/[[...id]].js +++ b/pages/nft-distribution/[[...id]].js @@ -68,7 +68,7 @@ export default function NftDistribution({ const [taxonInput, setTaxonInput] = useState(taxonQuery) const [order, setOrder] = useState(orderQuery) const [hasMore, setHasMore] = useState('first') - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const checkApi = async () => { /* diff --git a/pages/nft-sales.js b/pages/nft-sales.js index 1c4d3146a..858bfd9c6 100644 --- a/pages/nft-sales.js +++ b/pages/nft-sales.js @@ -136,7 +136,7 @@ export default function NftSales({ ]) const [issuerTaxonUrlPart, setIssuerTaxonUrlPart] = useState('?view=' + activeView) const [collectionUrlPart, setCollectionUrlPart] = useState(collectionQuery ? '&collection=' + collectionQuery : '') - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [selectedToken, setSelectedToken] = useState({ currency: currency, issuer: currencyIssuer diff --git a/pages/nft-volumes/index.js b/pages/nft-volumes/index.js index 7b381f109..cab7ba378 100644 --- a/pages/nft-volumes/index.js +++ b/pages/nft-volumes/index.js @@ -81,7 +81,7 @@ export default function NftVolumes({ const [chartIssuers, setChartIssuers] = useState([]) const [chartVolumes, setChartVolumes] = useState([]) const [loadingChart, setLoadingChart] = useState(false) - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [hasMore, setHasMore] = useState('first') const [csvHeaders, setCsvHeaders] = useState([]) const [selectedToken, setSelectedToken] = useState({ diff --git a/pages/tokens.js b/pages/tokens.js index 82e2ff748..8d73b0fca 100644 --- a/pages/tokens.js +++ b/pages/tokens.js @@ -198,7 +198,7 @@ export default function Tokens({ const [loading, setLoading] = useState(false) const [errorMessage, setErrorMessage] = useState(initialErrorMessage || '') const [order, setOrder] = useState(orderQuery || 'rating') - const [filtersHide, setFiltersHide] = useState(false) + const [filtersHide, setFiltersHide] = useState(true) const [issuer, setIssuer] = useState(issuerQuery) const [currency, setCurrency] = useState(currencyQuery) const [rendered, setRendered] = useState(false) diff --git a/styles/components/filters.scss b/styles/components/filters.scss index 5f4acbae9..5bb398513 100644 --- a/styles/components/filters.scss +++ b/styles/components/filters.scss @@ -193,10 +193,11 @@ $width: 340px; } } - @media (min-width: 1300px) { - .content-cols.is-filters-hide & { - display: none; - } + .content-cols.is-filters-hide & { + display: none; + } + .content-cols & { + display: block; } @media (max-width: 1300px) { @@ -205,7 +206,6 @@ $width: 340px; background: #fff; padding: 20px 30px 90px; overflow-y: scroll; - transform: translateY(100%); pointer-events: all; transition: transform 0.3s ease-in-out; From f9bef9168d27a886afb821167a61e558f518b43b Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Wed, 27 Aug 2025 00:21:34 +0900 Subject: [PATCH 2/4] fix filtersHide --- components/Layout/FiltersFrame.js | 42 +++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/components/Layout/FiltersFrame.js b/components/Layout/FiltersFrame.js index 4ac2d0683..cda636fab 100644 --- a/components/Layout/FiltersFrame.js +++ b/components/Layout/FiltersFrame.js @@ -8,9 +8,43 @@ import ViewTogggle from '../UI/ViewToggle' import { TbArrowsSort } from 'react-icons/tb' import { IoMdClose } from 'react-icons/io' +import { FaFilter } from 'react-icons/fa' import { setTabParams, useWidth } from '../../utils' import CurrencySelect from '../UI/CurrencySelect' import { TablePagination } from '@mui/material' +import { capitalize, shortHash } from '../../utils/format' + +// Filter Indicator Component +function FilterIndicator({ filters }) { + // Check if any filters are active + const activeFilters = Object.entries(filters).filter( + ([, value]) => value && value !== '' && value !== null && value !== undefined + ) + + if (activeFilters.length === 0) { + return null + } + + const renderFilterValue = (key, value) => { + return capitalize(key) + ' = ' + shortHash(value) + } + + return ( +
+ + + Filter applied:{' '} + {activeFilters.map(([key, value], index) => ( + + {index > 0 && index === activeFilters.length - 1 ? ' and ' : ''} + {index > 0 && index < activeFilters.length - 1 ? ', ' : ''} + {renderFilterValue(key, value)} + + ))} + +
+ ) +} export default function FiltersFrame({ children, @@ -33,7 +67,8 @@ export default function FiltersFrame({ setPage, rowsPerPage, setRowsPerPage, - onlyCsv + onlyCsv, + filters }) { const { t } = useTranslation() const router = useRouter() @@ -190,9 +225,12 @@ export default function FiltersFrame({ > {children[0]} +
+ {/* Filter Indicator */} + {filters && (width > 1300 ? filtersHide : !filtersHide) && } {children[1]}
) -} +} \ No newline at end of file From 558651c2d66f210c5894acbc491df4a9785f3ebb Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Wed, 27 Aug 2025 02:53:13 +0900 Subject: [PATCH 3/4] pretty --- components/Layout/FiltersFrame.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Layout/FiltersFrame.js b/components/Layout/FiltersFrame.js index cda636fab..0fd97358c 100644 --- a/components/Layout/FiltersFrame.js +++ b/components/Layout/FiltersFrame.js @@ -233,4 +233,4 @@ export default function FiltersFrame({ ) -} \ No newline at end of file +} From 694050664c1e65b72c69adcd132ac57a97119487 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Wed, 27 Aug 2025 03:26:42 +0900 Subject: [PATCH 4/4] fix filters scss --- styles/components/filters.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles/components/filters.scss b/styles/components/filters.scss index 5bb398513..63703f69b 100644 --- a/styles/components/filters.scss +++ b/styles/components/filters.scss @@ -193,11 +193,10 @@ $width: 340px; } } - .content-cols.is-filters-hide & { - display: none; - } - .content-cols & { - display: block; + @media (min-width: 1300px) { + .content-cols.is-filters-hide & { + display: none; + } } @media (max-width: 1300px) { @@ -206,6 +205,7 @@ $width: 340px; background: #fff; padding: 20px 30px 90px; overflow-y: scroll; + transform: translateY(0%); pointer-events: all; transition: transform 0.3s ease-in-out; @@ -214,7 +214,7 @@ $width: 340px; } .content-cols.is-filters-hide & { - transform: translateY(0); + transform: translateY(100%); } } }