-
Notifications
You must be signed in to change notification settings - Fork 63
Fix "Back to results" link and remove grey background from single results page #1977
Conversation
Storybook and Tailwind configuration previews: Ready Storybook: https://wordpress.github.io/openverse-frontend/_preview/1977 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. |
Size Change: -2.15 kB (0%) Total Size: 820 kB
ℹ️ View Unchanged
|
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.
When I checked out this PR, and ran Playwright tests without running pnpm dev first, I get errors locally because the en.json5 was updated, but en.json wasn't.
If we add pnpm run i18n:get-translations --en-only
to playwright.sh, we'll always update the generated json file before running the tests.
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 think it would make sense to remove the px-6
padding from the Nuxt
component as it will simplify layout.
Also, could you please add a VR test for the single result pages (ideally, for both old and new header, but even only new header would be great)?
Co-authored-by: Olga Bulat <obulat@gmail.com>
@@ -1,10 +1,10 @@ | |||
<template> | |||
<!-- @todo: Separate the absolute container from the link itself. --> | |||
<VLink | |||
class="flex flex-row items-center px-2 py-3 text-xs font-semibold text-dark-charcoal md:px-6 md:pt-4 md:pb-2 md:text-sr" | |||
:href="path" | |||
class="time inline-flex flex-row items-center gap-2 rounded-sm p-2 text-xs font-semibold text-dark-charcoal-70 pe-3 hover:text-dark-charcoal" |
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.
What is the "time" CSS class?
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.
That's the name of the font styled used by @panchovm in the Figma mockups. If I had to guess, it started as the font-style used in the audio timestamps but then found use in other places without updating the name.
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 think you are referring to the Time pill component. I am seeing the Design Library and that is the only component named like that and used in all audio component's variants.
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.
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.
Oh, I got it. And yes, it was named time as it was created for the time pill.
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.
Snapshots are great! I can see a couple of problems on the pages:
Although we should select a single threshold breakpoint instead of using I'm not sure if it's best to fix here, or to open separate issues, though. |
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.
Looks great, and it's nice to see the changes in the snapshots!
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.
Works great now. LGTM.
Fixes
Fixes #1974 by @zackkrida
Description
This PR
Testing Instructions
See that the issue #1974 has been resolved, without tampering the old header UI.
Checklist
Update index.md
).main
) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin