update functionality for watch later button on mobile

This commit is contained in:
Anthony 2021-08-25 16:49:08 +02:00
parent 5c8139f326
commit 91f0ce637e
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 19 additions and 3 deletions

View file

@ -37,7 +37,7 @@ function FileWatchLaterLink(props: Props) {
});
}
// text that will show if you keep cursor over dic
// text that will show if you keep cursor over button
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
// label that is shown after hover

View file

@ -605,8 +605,13 @@
background-color: var(--color-black);
padding: 0.3rem;
border-radius: var(--border-radius);
opacity: 0.7;
z-index: 2;
opacity: 0.7;
// show full opacity for touch devices
@media (pointer: fine), (pointer: coarse) {
opacity: 0.85;
}
.file-properties {
color: var(--color-white);
@ -676,7 +681,17 @@
// div that displays watch later button
.claim-preview__hover-actions {
display: none;
// if the user is using a mouse
@media (pointer: fine){
display: none;
}
// if the user doesn't have a pointer (mouse etc) hide watch later button
@media (pointer: none), (pointer:coarse) {
display: none !important;
}
position: relative;
float: right;
top: var(--spacing-xxs);
@ -700,6 +715,7 @@
padding: var(--spacing-xxs) var(--spacing-xxs);
height: unset;
// label (with 'Add' text) hidden by default
.button__label {
color: var(--color-text);
font-size: var(--font-small);