-
Notifications
You must be signed in to change notification settings - Fork 216
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add additional search view pages to the Nuxt app #3140
Add additional search view pages to the Nuxt app #3140
Conversation
Size Change: +58.4 kB (+6%) 🔍 Total Size: 1.07 MB
ℹ️ View Unchanged
|
3db4968
to
37f6245
Compare
351b8c8
to
eddeee5
Compare
033cc95
to
e7a091e
Compare
96d3a42
to
e6dd537
Compare
b8d488e
to
085c94d
Compare
5728670
to
2e7540c
Compare
085c94d
to
8af4d49
Compare
2e7540c
to
b48b865
Compare
a5db8b1
to
cb01698
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed one odd spacing in VCollectionHeader
that can look better with the following two changes:
- Audio results of source, tag, and author in all breakpoints, margin-bottom looks better with
8px
. I refer to this area. - Image results of source, tag, and author in all breakpoints, margin-bottom looks better with
16px
. I refer to this area.
Pardon the picky territory my suggestions belong to, but QA is the perfect stage for adjustments.
cb01698
to
f1c64be
Compare
Thank you for re-reviewing! I've updated the paddings. I also noticed that the collection pages really didn't render on the server at all, not just because of some local problems. Thank you for flagging that, @fcoveram. I fixed the logic of the collection page parameter validation, and now they do render on the server. |
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
e23b090
to
f1c6cac
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks great ✨🚀
This PR is based on #3136, and will be undrafted after that PR is merged.Fixes
Fixes #2858 by @obulat
Fixes #2774 by @obulat
Description
With this PR, you can view the tag/source/creator collections in the Nuxt app.
To show the collections, we add
_tag.vue
and_source.vue
pages to bothimage
andaudio
, with dynamic routes. These pages check the path to make sure that the path has the necessary parameters: tag name for the tag page; an existing source for source/creator pages;/creator/
path part and the creator name for the creator pages.In the first iteration, I used a single page with a fully-dynamic path (
/_mediaType/_collection/_.vue
) that would then validate themediaType
,collection
and the collection parameters. However, because_mediaType
can accept any string path, it would also match the locale routes such as/ar/non_existent_page
), so I split this single page into 4.The collection pages have the collection headers (using
VCollectionHeader
from #3365) and either aVAudioCollection
orVImageGrid
, as well as the "Load more" button. When you navigate from the collection page to a single result page, you also get the "Back to results" link at the top that goes back to the collection page.This PR adds a
strategy
andcollectionParams
props to thesearch
store. Whenever we set thesearchTerm
(which is only available for search, not collection), we reset thestrategy
todefault
and nullify thecollectionParams
.The API service had to be updated to accept a
slug
for paths like/tag/tag_name
,/source/source_name
,/source/source_name/creator/creator_name
, which are added to the/<mediaType>
path.The media store was updated to use the necessary slug from the search store
collectionParams
.Testing Instructions
Run the app using
just frontend/run dev
. Go to/preferences
page and turn on theadditional_search_views
feature flag.The easiest way to land on a collection page is from the single result page. Click on the source, creator or tag buttons - and you will be taken to the corresponding page.
Check that in non-English locales, the links have the correct locale path, and when navigating, the locale is kept.
Check that if you go from a collection page to a single result page, you can go back to the collection page using "Back to results" page.
Check that if you go back to homepage from the collection page, you can search for something.
Checklist
Update index.md
).main
) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin