Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Improve UX of current time tooltip #3060

Closed
wants to merge 3 commits into from
Closed

Improve UX of current time tooltip #3060

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b51e4f
Improve UX of current time tooltip
Feb 1, 2016
6be06ce
Restore current time tooltip border-radius
Feb 1, 2016
bff12eb
Slight tweak to progress tooltip positioning
Feb 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/css/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,12 @@
.video-js .vjs-play-progress:after {
display: none;
position: absolute;
top: -2.4em;
top: -3.5em;
right: -1.5em;
font-size: 0.9em;
color: #000;
content: attr(data-current-time);
padding: 0.2em 0.5em;
padding: 6px 8px 8px 8px;
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't it have equal padding on top/bottom?

Copy link
Author

Choose a reason for hiding this comment

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

It is visually equal with this CSS. Probably due to the font.

Copy link
Member

Choose a reason for hiding this comment

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

I'm seeing it larger on the bottom.

Copy link
Author

Choose a reason for hiding this comment

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

What browser? This is what I'm seeing in Chrome:

screen shot 2016-02-01 at 2 53 58 pm

Copy link
Member

Choose a reason for hiding this comment

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

Chrome. I'm definitely seeing it as 6px and 8px.

Copy link
Member

Choose a reason for hiding this comment

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

So, after looking careful at it with @incompl, the computed style does actually lie here. What was causing as issue is the slight overlap of the control bar which caused it to look wrong to me. This is fixed by the latest commit to the PR.

@include background-color-with-alpha(#fff, 0.8);
@include border-radius(0.3em);
}
Expand Down