mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix search filters being hidden (#1205)

Browse Source 
* Fix search filters being hidden (#1165)

Previously, `max-width` was used to hide the sidebar on mobile, which
meant that at exactly 1024 pixels wide, the sidebar would be hidden.
However, this breakpoint is also as a
`min-width` other media queries, notably the ones used to enable viewing
filters on mobile sizes. This has caused issue #1024.

To fix this, I have swapped the logic of the rule that hides the filters
on mobile: it is now hidden by default and a `min-width` query is used
to show it on wider viewports. This is more consistent with similar media
queries in the same file.

Looking to the future, these issues should become less common if we
switch to range-based media queries:
https://caniuse.com/css-media-range-syntax

* Delete package-lock.json

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
MMK21Hub
2023-06-20 22:37:39 +01:00
committed by GitHub
parent 14b0e8875d
commit 247be0c11f
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/search/[searchProjectType].vue
View File

@@ -848,13 +848,15 @@ export default defineNuxtComponent({
.normal-page__sidebar {
grid-row: 3;
// Hide on mobile unless open
@media screen and (max-width: 1024px) {
display: none;
// Always show on desktop
@media screen and (min-width: 1024px) {
display: block;
}
&.open {
display: block;
}
// Hide on mobile unless open
display: none;
&.open {
display: block;
}
}