LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

update functionality for watch later button on mobile

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/fileWatchLaterLink/view.jsx
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'); const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
// label that is shown after hover // label that is shown after hover

20
ui/scss/component/_claim-list.scss
View file

@ -605,8 +605,13 @@
background-color: var(--color-black); background-color: var(--color-black);
padding: 0.3rem; padding: 0.3rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
opacity: 0.7;
z-index: 2; z-index: 2;
opacity: 0.7;
// show full opacity for touch devices
@media (pointer: fine), (pointer: coarse) {
opacity: 0.85;
}
.file-properties { .file-properties {
color: var(--color-white); color: var(--color-white);
@ -676,7 +681,17 @@
// div that displays watch later button // div that displays watch later button
.claim-preview__hover-actions { .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; position: relative;
float: right; float: right;
top: var(--spacing-xxs); top: var(--spacing-xxs);
@ -700,6 +715,7 @@
padding: var(--spacing-xxs) var(--spacing-xxs); padding: var(--spacing-xxs) var(--spacing-xxs);
height: unset; height: unset;
// label (with 'Add' text) hidden by default
.button__label { .button__label {
color: var(--color-text); color: var(--color-text);
font-size: var(--font-small); font-size: var(--font-small);