From 91f0ce637e40d21cc7dbb679f5aa747a2712c25b Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Wed, 25 Aug 2021 16:49:08 +0200
Subject: [PATCH] update functionality for watch later button on mobile

---
 ui/component/fileWatchLaterLink/view.jsx |  2 +-
 ui/scss/component/_claim-list.scss       | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui/component/fileWatchLaterLink/view.jsx b/ui/component/fileWatchLaterLink/view.jsx
index 50884f80d..ad6d748dd 100644
--- a/ui/component/fileWatchLaterLink/view.jsx
+++ b/ui/component/fileWatchLaterLink/view.jsx
@@ -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
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 0118834fe..4304359f8 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -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);