This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
SearchGridFilter wrapper component selected based on reactive media query #445
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
obulat
added
🕹 aspect: interface
krysal
approved these changes
Nov 25, 2021
| @@ -35,16 +31,31 @@ import { | |||
| import { SET_FILTER_IS_VISIBLE } from '~/constants/mutation-types' | |||
| import { queryStringToSearchType } from '~/utils/search-query-transform' | |||
| import local from '~/utils/local' | |||
| import { screenWidth } from '~/utils/get-browser-info' | |||
There was a problem hiding this comment.
It looks like we can delete this file, it is not used anywhere else.
There was a problem hiding this comment.
Great catch! Thank you for keeping the codebase clean and not leaving remains of the previous implementations in the repository :)
Comment on lines
+4
to
+10
| <Component | ||
| :is="searchFilter.as" | ||
| v-if="isFilterVisible" | ||
| :class="searchFilter.classes" | ||
| @close="onToggleSearchGridFilter" | ||
| ><SearchGridFilter | ||
| /></Component> |
There was a problem hiding this comment.
What a perfect use for a dynamic component, nice!
|
I am going to merge this PR because it's a PR of a PR :) The main code review should go in #439 |
7 tasks
krysal
added a commit
that referenced
this pull request
Nov 29, 2021
* SearchGridFilter wrapper component selected based on reactive media query (#445) * Make media query responsive * Improve comments and remove event listener on unmount * Remove unused file * Update search page unit tests * Address code style comments Co-authored-by: Olga Bulat <obulat@gmail.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Related to #439 by @krysal
Description
This PR attempts to make the media query that determines which wrapper is used for SearchGridFilter reactive, and leave a single SearchGridFilter with unique ids.
It uses the code from
VueUselibrary for a reactive media query composeable, and the code for correct disposal needs to be added. I wanted to use Vueuse directly, but it imports something from vue-demi, which doesn't work correctly with Nuxt composition API.Testing Instructions
Checkout the branch, open the filters and narrow the screen. The filter should change from an aside into a modal at around 738px screen width.
Checklist
Update index.md).main) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin