Improve styling of premiere date box #2611
Merged
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
a 5% border radius will create an oval shape when height and width differ. this doesn't look good. 5px radius looks better and is used in other places
Increases the offset a tiny amount and adds a left offset aswell. This looks better than when it was previously only offset from the bottom. I used 12px because it's what youtube uses.
vertically centes premiere icon and text with by making their parent a flexbox sets a min width for the text instead of using a set width for the premiereDate
line height 1.2 did not affect anything
efb4f5ff-1298-471a-8973-3d47447115dc
added
the
PR: waiting for review
github-actions
bot
added
PR: merge conflicts / rebase needed
and removed
PR: waiting for review
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
auto-merge was automatically disabled
September 25, 2022 01:35
Head branch was pushed to by a user without write access
|
Conflicts have been resolved. A maintainer will review the pull request shortly. |
|
Merge conflicts have been fixed now |
efb4f5ff-1298-471a-8973-3d47447115dc
added
the
PR: waiting for review
ChunkyProgrammer
requested review from
PikachuEXE,
absidue,
efb4f5ff-1298-471a-8973-3d47447115dc and
ChunkyProgrammer
absidue
reviewed
Sep 26, 2022
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
auto-merge was automatically disabled
September 26, 2022 20:57
Head branch was pushed to by a user without write access
efb4f5ff-1298-471a-8973-3d47447115dc
approved these changes
Sep 26, 2022
PikachuEXE
approved these changes
Sep 26, 2022
github-actions
bot
removed
the
PR: waiting for review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Improve styling of premiere date box
Pull Request Type
Related issue
no related issue
Description
Fixes some issues I had with the styling of the premiere date box and tries to bring it up to par with how it looks on YouTube.
Border radius is set with
pxinstead of%This is good because it makes the border radius circular instead of oval-shaped.
Adds some additional offset so the box isn't hugging the bottom-left of the video
Use flex-box to align text vertically instead of relying on margins
The text is now more centered than ever.
use min-width instead of a set width.
Looks better because there's less empty space normally and the "Please refresh soon" message is put on 1 line
increase opacity of the box from 0.7 to 0.8.
Make timestamp smaller and bold.
looks similar to YouTube.
adds more margin between text, icon, and box edges
Screenshots (if appropriate)
Before:
After:
Testing (for code that is not small enough to be easily understandable)
https://www.youtube.com/watch?v=O3cCYok_ukk
Desktop (please complete the following information):
Additional context
I added a span around Premiere time left but ended up not using it
Might need to wait for #2610 or the other way around since both change the same line in Watch.vue