Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

External sources on no results page #2077

Merged
merged 9 commits into from
Jan 31, 2023
Merged

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Dec 30, 2022

Fixes

Fixes #1999 by @obulat

Description

This PR refactors the No results page to use rows/column of buttons.

@panchovm, there are no updated mockups for this in Figma, so I'll need your input on paddings and sizes.

Testing Instructions

Run the app, and try searching for something that doesn't have any results, something like "lskdjflskdjflsk". This should open a "No results" page. Here, on desktop, the external sources should be in a row of buttons, and on mobile, in a column.

Checklist

  • My pull request has a descriptive title (not a vague title like
    Update index.md).
  • My pull request targets the default branch of the repository (main) or
    a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible
    errors.

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@obulat obulat requested a review from a team as a code owner December 30, 2022 12:47
@openverse-bot openverse-bot added this to Needs review in Openverse PRs Dec 30, 2022
@github-actions
Copy link

github-actions bot commented Dec 30, 2022

Storybook and Tailwind configuration previews: Ready

Storybook: https://wordpress.github.io/openverse-frontend/_preview/2077
Tailwind: https://wordpress.github.io/openverse-frontend/_preview/2077/tailwind

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

@openverse-bot openverse-bot added ✨ goal: improvement Improvement to an existing user-facing feature 🕹 aspect: interface Concerns end-users' experience with the software 🟨 priority: medium Not blocking but should be addressed soon labels Dec 30, 2022
@github-actions
Copy link

github-actions bot commented Dec 30, 2022

Size Change: -11.1 kB (-1%)

Total Size: 899 kB

Filename Size Change
./.nuxt/dist/client/236.js 0 B -272 B (removed) 🏆
./.nuxt/dist/client/236.modern.js 0 B -277 B (removed) 🏆
./.nuxt/dist/client/237.js 0 B -1.85 kB (removed) 🏆
./.nuxt/dist/client/app.js 148 kB -806 B (-1%)
./.nuxt/dist/client/app.modern.js 123 kB -852 B (-1%)
./.nuxt/dist/client/components/v-external-search-form.js 1.72 kB -1.37 kB (-44%) 🎉
./.nuxt/dist/client/components/v-external-search-form.modern.js 1.72 kB -1.34 kB (-44%) 🎉
./.nuxt/dist/client/components/v-external-source-list.js 1.15 kB -1.4 kB (-55%) 🏆
./.nuxt/dist/client/components/v-external-source-list.modern.js 1.14 kB -1.38 kB (-55%) 🏆
./.nuxt/dist/client/components/v-no-results.js 751 B -2 kB (-73%) 🏆
./.nuxt/dist/client/components/v-no-results.modern.js 751 B -1.97 kB (-72%) 🏆
./.nuxt/dist/client/components/v-search-grid.js 5.54 kB +112 B (+2%)
./.nuxt/dist/client/components/v-search-grid.modern.js 5.5 kB +111 B (+2%)
./.nuxt/dist/client/components/v-search-results-title.js 595 B -61 B (-9%)
./.nuxt/dist/client/components/v-search-results-title.modern.js 598 B -57 B (-9%)
./.nuxt/dist/client/runtime.js 2.7 kB -34 B (-1%)
./.nuxt/dist/client/runtime.modern.js 2.7 kB -34 B (-1%)
./.nuxt/dist/client/229.js 272 B +272 B (new file) 🆕
./.nuxt/dist/client/229.modern.js 277 B +277 B (new file) 🆕
./.nuxt/dist/client/230.js 1.85 kB +1.85 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
./.nuxt/dist/client/commons/app.js 86.7 kB +2 B (0%)
./.nuxt/dist/client/commons/app.modern.js 77.4 kB +1 B (0%)
./.nuxt/dist/client/components/loading-icon.js 746 B -1 B (0%)
./.nuxt/dist/client/components/loading-icon.modern.js 751 B 0 B
./.nuxt/dist/client/components/table-sort-icon.js 508 B 0 B
./.nuxt/dist/client/components/table-sort-icon.modern.js 513 B 0 B
./.nuxt/dist/client/components/v-all-results-grid.js 7.49 kB -1 B (0%)
./.nuxt/dist/client/components/v-all-results-grid.modern.js 5.01 kB -6 B (0%)
./.nuxt/dist/client/components/v-audio-cell.js 357 B 0 B
./.nuxt/dist/client/components/v-audio-cell.modern.js 361 B 0 B
./.nuxt/dist/client/components/v-audio-details.js 2.54 kB +1 B (0%)
./.nuxt/dist/client/components/v-audio-details.modern.js 1.78 kB 0 B
./.nuxt/dist/client/components/v-audio-track-skeleton.js 1.01 kB +1 B (0%)
./.nuxt/dist/client/components/v-audio-track-skeleton.modern.js 1.02 kB 0 B
./.nuxt/dist/client/components/v-audio-track.js 5.21 kB -3 B (0%)
./.nuxt/dist/client/components/v-audio-track.modern.js 5.16 kB -6 B (0%)
./.nuxt/dist/client/components/v-back-to-search-results-link.js 538 B 0 B
./.nuxt/dist/client/components/v-back-to-search-results-link.modern.js 543 B 0 B
./.nuxt/dist/client/components/v-bone.js 684 B 0 B
./.nuxt/dist/client/components/v-bone.modern.js 688 B 0 B
./.nuxt/dist/client/components/v-box-layout.js 1.23 kB -1 B (0%)
./.nuxt/dist/client/components/v-box-layout.modern.js 1.23 kB +1 B (0%)
./.nuxt/dist/client/components/v-content-link.js 1.11 kB +1 B (0%)
./.nuxt/dist/client/components/v-content-link.modern.js 1.09 kB +1 B (0%)
./.nuxt/dist/client/components/v-content-page.js 467 B 0 B
./.nuxt/dist/client/components/v-content-page.modern.js 471 B 0 B
./.nuxt/dist/client/components/v-content-report-button.js 776 B 0 B
./.nuxt/dist/client/components/v-content-report-button.modern.js 781 B 0 B
./.nuxt/dist/client/components/v-content-report-form.js 6.09 kB -1 B (0%)
./.nuxt/dist/client/components/v-content-report-form.modern.js 3.58 kB -2 B (0%)
./.nuxt/dist/client/components/v-content-report-popover.js 1.23 kB 0 B
./.nuxt/dist/client/components/v-content-report-popover.modern.js 4.23 kB -3 B (0%)
./.nuxt/dist/client/components/v-copy-button.js 3.99 kB -1 B (0%)
./.nuxt/dist/client/components/v-copy-button.modern.js 3.99 kB -1 B (0%)
./.nuxt/dist/client/components/v-copy-license.js 1 kB 0 B
./.nuxt/dist/client/components/v-copy-license.modern.js 1 kB -1 B (0%)
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/d219393b.js 9.88 kB 0 B
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/d219393b.modern.js 9.86 kB 0 B
./.nuxt/dist/client/components/v-dmca-notice.js 749 B 0 B
./.nuxt/dist/client/components/v-dmca-notice.modern.js 752 B -1 B (0%)
./.nuxt/dist/client/components/v-error-image.js 1.69 kB -2 B (0%)
./.nuxt/dist/client/components/v-error-image.modern.js 1.68 kB -1 B (0%)
./.nuxt/dist/client/components/v-error-section.js 372 B 0 B
./.nuxt/dist/client/components/v-error-section.modern.js 376 B +1 B (0%)
./.nuxt/dist/client/components/v-full-layout.js 1.59 kB -1 B (0%)
./.nuxt/dist/client/components/v-full-layout.modern.js 1.59 kB 0 B
./.nuxt/dist/client/components/v-grid-skeleton.js 1.62 kB 0 B
./.nuxt/dist/client/components/v-grid-skeleton.modern.js 1.62 kB -3 B (0%)
./.nuxt/dist/client/components/v-home-gallery.js 4.79 kB -2 B (0%)
./.nuxt/dist/client/components/v-home-gallery.modern.js 4.79 kB +4 B (0%)
./.nuxt/dist/client/components/v-homepage-content.js 1.73 kB -1 B (0%)
./.nuxt/dist/client/components/v-homepage-content.modern.js 1.69 kB 0 B
./.nuxt/dist/client/components/v-image-carousel.js 4.76 kB -3 B (0%)
./.nuxt/dist/client/components/v-image-carousel.modern.js 4.74 kB +3 B (0%)
./.nuxt/dist/client/components/v-image-cell-square.js 993 B 0 B
./.nuxt/dist/client/components/v-image-cell-square.modern.js 996 B -1 B (0%)
./.nuxt/dist/client/components/v-image-cell.js 1.43 kB 0 B
./.nuxt/dist/client/components/v-image-cell.modern.js 1.42 kB 0 B
./.nuxt/dist/client/components/v-image-details.js 2.15 kB -1 B (0%)
./.nuxt/dist/client/components/v-image-details.modern.js 1.42 kB -2 B (0%)
./.nuxt/dist/client/components/v-image-grid.js 4.88 kB -1 B (0%)
./.nuxt/dist/client/components/v-image-grid.modern.js 2.42 kB -1 B (0%)
./.nuxt/dist/client/components/v-license-tab-panel.js 521 B 0 B
./.nuxt/dist/client/components/v-license-tab-panel.modern.js 525 B 0 B
./.nuxt/dist/client/components/v-load-more.js 3.16 kB 0 B
./.nuxt/dist/client/components/v-load-more.modern.js 683 B 0 B
./.nuxt/dist/client/components/v-media-license.js 819 B 0 B
./.nuxt/dist/client/components/v-media-license.modern.js 828 B 0 B
./.nuxt/dist/client/components/v-media-reuse.js 1.62 kB -2 B (0%)
./.nuxt/dist/client/components/v-media-reuse.modern.js 1.61 kB 0 B
./.nuxt/dist/client/components/v-media-tag.js 428 B 0 B
./.nuxt/dist/client/components/v-media-tag.modern.js 434 B 0 B
./.nuxt/dist/client/components/v-old-homepage-content.js 1.87 kB -3 B (0%)
./.nuxt/dist/client/components/v-old-homepage-content.modern.js 1.85 kB +1 B (0%)
./.nuxt/dist/client/components/v-radio.js 1.51 kB 0 B
./.nuxt/dist/client/components/v-radio.modern.js 1.47 kB -1 B (0%)
./.nuxt/dist/client/components/v-related-audio.js 1.25 kB -1 B (0%)
./.nuxt/dist/client/components/v-related-audio.modern.js 1.25 kB 0 B
./.nuxt/dist/client/components/v-related-images.js 1.05 kB 0 B
./.nuxt/dist/client/components/v-related-images.modern.js 2.98 kB -1 B (0%)
./.nuxt/dist/client/components/v-report-desc-form.js 965 B 0 B
./.nuxt/dist/client/components/v-report-desc-form.modern.js 969 B 0 B
./.nuxt/dist/client/components/v-row-layout.js 1.7 kB +1 B (0%)
./.nuxt/dist/client/components/v-row-layout.modern.js 1.71 kB 0 B
./.nuxt/dist/client/components/v-scroll-button.js 813 B 0 B
./.nuxt/dist/client/components/v-scroll-button.modern.js 819 B 0 B
./.nuxt/dist/client/components/v-search-type-radio.js 791 B -1 B (0%)
./.nuxt/dist/client/components/v-search-type-radio.modern.js 769 B +1 B (0%)
./.nuxt/dist/client/components/v-server-timeout.js 299 B 0 B
./.nuxt/dist/client/components/v-server-timeout.modern.js 303 B 0 B
./.nuxt/dist/client/components/v-sketch-fab-viewer.js 3.37 kB -1 B (0%)
./.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js 895 B 0 B
./.nuxt/dist/client/components/v-skip-to-content-container.js 888 B 0 B
./.nuxt/dist/client/components/v-skip-to-content-container.modern.js 894 B 0 B
./.nuxt/dist/client/components/v-snackbar.js 1.18 kB -1 B (0%)
./.nuxt/dist/client/components/v-snackbar.modern.js 1.19 kB -1 B (0%)
./.nuxt/dist/client/components/v-sources-table.js 16.6 kB +7 B (0%)
./.nuxt/dist/client/components/v-sources-table.modern.js 16.6 kB +7 B (0%)
./.nuxt/dist/client/components/v-warning-suppressor.js 299 B 0 B
./.nuxt/dist/client/components/v-warning-suppressor.modern.js 303 B +1 B (0%)
./.nuxt/dist/client/pages/about.js 1.51 kB 0 B
./.nuxt/dist/client/pages/about.modern.js 1.51 kB -1 B (0%)
./.nuxt/dist/client/pages/audio/_id/index.js 7.96 kB -7 B (0%)
./.nuxt/dist/client/pages/audio/_id/index.modern.js 4.8 kB -1 B (0%)
./.nuxt/dist/client/pages/external-sources.js 1.53 kB -2 B (0%)
./.nuxt/dist/client/pages/external-sources.modern.js 1.53 kB +1 B (0%)
./.nuxt/dist/client/pages/feedback.js 1.31 kB -1 B (0%)
./.nuxt/dist/client/pages/feedback.modern.js 1.31 kB -1 B (0%)
./.nuxt/dist/client/pages/image/_id/index.js 9.26 kB +4 B (0%)
./.nuxt/dist/client/pages/image/_id/index.modern.js 7.33 kB -9 B (0%)
./.nuxt/dist/client/pages/image/_id/report.js 3.6 kB +1 B (0%)
./.nuxt/dist/client/pages/image/_id/report.modern.js 4.2 kB -2 B (0%)
./.nuxt/dist/client/pages/index.js 8.63 kB -2 B (0%)
./.nuxt/dist/client/pages/index.modern.js 8.52 kB -3 B (0%)
./.nuxt/dist/client/pages/preferences.js 1.22 kB 0 B
./.nuxt/dist/client/pages/preferences.modern.js 1.21 kB +2 B (0%)
./.nuxt/dist/client/pages/privacy.js 983 B 0 B
./.nuxt/dist/client/pages/privacy.modern.js 983 B 0 B
./.nuxt/dist/client/pages/search-help.js 1.61 kB 0 B
./.nuxt/dist/client/pages/search-help.modern.js 1.61 kB -2 B (0%)
./.nuxt/dist/client/pages/search.js 5.1 kB 0 B
./.nuxt/dist/client/pages/search.modern.js 2.6 kB -1 B (0%)
./.nuxt/dist/client/pages/search/audio.js 6.14 kB -1 B (0%)
./.nuxt/dist/client/pages/search/audio.modern.js 3.65 kB -3 B (0%)
./.nuxt/dist/client/pages/search/image.js 659 B -1 B (0%)
./.nuxt/dist/client/pages/search/image.modern.js 2.73 kB -3 B (0%)
./.nuxt/dist/client/pages/search/index.js 542 B -1 B (0%)
./.nuxt/dist/client/pages/search/index.modern.js 547 B -1 B (0%)
./.nuxt/dist/client/pages/search/model-3d.js 243 B 0 B
./.nuxt/dist/client/pages/search/model-3d.modern.js 246 B 0 B
./.nuxt/dist/client/pages/search/search-page.types.js 266 B 0 B
./.nuxt/dist/client/pages/search/search-page.types.modern.js 270 B -1 B (0%)
./.nuxt/dist/client/pages/search/video.js 240 B 0 B
./.nuxt/dist/client/pages/search/video.modern.js 244 B 0 B
./.nuxt/dist/client/pages/sources.js 1.55 kB 0 B
./.nuxt/dist/client/pages/sources.modern.js 1.54 kB 0 B
./.nuxt/dist/client/vendors/app.js 63.7 kB -1 B (0%)
./.nuxt/dist/client/vendors/app.modern.js 63.1 kB 0 B

compressed-size-action

Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add some visual regression tests of the component stories (if any) and the page?

@obulat obulat requested a review from fcoveram January 3, 2023 15:34
Copy link

@fcoveram fcoveram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change looks great, and since there is no mockup, I suggest applying two changes:

  • Text style: Apply the "Label bold" style as defined in the Design Library.
  • Spacing: Set a 8px gap between label and icon.

Sorry for replying late as I was reviewing the buttons created in the Design Library and in storybook to select the correct one. However, there are multiple inconsistencies between both sources that do not block this PR. Applying the changes described above is sufficient.

In parallel, I started exploring a layout improvement for this and Timeout pages that will share in a separate design ticket.

@obulat obulat force-pushed the external_sources_on_no_results_page branch from 37c2d8c to 7d127fa Compare January 6, 2023 05:34
Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes look good to me!

I have some issues with the look of full-width buttons at the tablet breakpoint but that's a design issue and not something to block the PR over. @panchovm maybe more than one column or just the individual buttons as seen on the desktop would be better.

@fcoveram
Copy link

fcoveram commented Jan 6, 2023

Thanks for the suggestion @dhruvkb I am currently working on a proposal for updating this and Timeout pages' layouts. For this PR scope, the buttons look correct.

I plan to share the layout proposal soon.

@WordPress WordPress deleted a comment from github-actions bot Jan 8, 2023
@WordPress WordPress deleted a comment from github-actions bot Jan 8, 2023
Copy link
Member

@zackkrida zackkrida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. The spacing between the text and the buttons on mobile feels too tight to me, but we can refine the design in a subsequent PR.

CleanShot 2023-01-12 at 08 53 02

Copy link

@fcoveram fcoveram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggested two spacing tweaks in the layout that have nothing to do with the button's style.

For @zackkrida's point. Yes, the button style is something we need to tackle in the future to address the spacing consistency across the site.

src/components/VErrorSection/VNoResults.vue Outdated Show resolved Hide resolved
src/components/VErrorSection/VNoResults.vue Outdated Show resolved Hide resolved
@obulat obulat force-pushed the external_sources_on_no_results_page branch from 7d127fa to 7c0e2f7 Compare January 31, 2023 09:42
@obulat obulat dismissed fcoveram’s stale review January 31, 2023 10:32

The requested changes were implemented

Openverse PRs automation moved this from Needs review to Reviewer approved Jan 31, 2023
@obulat obulat merged commit de7e3cb into main Jan 31, 2023
Openverse PRs automation moved this from Reviewer approved to Merged! Jan 31, 2023
@obulat obulat deleted the external_sources_on_no_results_page branch January 31, 2023 10:34
github-actions bot pushed a commit that referenced this pull request Jan 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon
Projects
No open projects
Openverse PRs
  
Merged!
Development

Successfully merging this pull request may close these issues.

The external sources on the No results form should not be in a popover
5 participants