From 7b99d98c553f40ec4d633d0d4fdf65f275c80e77 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 12:32:42 +0200
Subject: Replace all use of <a> + href='#' with proper buttons

---
 src/components/attachment/attachment.js  |  6 ++++--
 src/components/attachment/attachment.vue | 28 +++++++++++++++++-----------
 2 files changed, 21 insertions(+), 13 deletions(-)

(limited to 'src/components/attachment')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3877b67f..5f5779a0 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -9,7 +9,8 @@ import {
   faMusic,
   faImage,
   faVideo,
-  faPlayCircle
+  faPlayCircle,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -17,7 +18,8 @@ library.add(
   faMusic,
   faImage,
   faVideo,
-  faPlayCircle
+  faPlayCircle,
+  faTimes
 )
 
 const Attachment = {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index f1fac2c8..b072b170 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -42,15 +42,13 @@
         icon="play-circle"
       />
     </a>
-    <div
+    <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled -padded hider"
+      @click.prevent="toggleHidden"
     >
-      <a
-        href="#"
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
+      <FAIcon icon="times" />
+    </button>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
@@ -234,15 +232,23 @@
   .hider {
     position: absolute;
     right: 0;
-    white-space: nowrap;
     margin: 10px;
     padding: 5px;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
     z-index: 4;
-    line-height: 1;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
   }
 
   video {
-- 
cgit v1.2.3-70-g09d2


From 1d178b7341d9848b64d5f2eb27338ac26f046a2a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 21:35:14 +0200
Subject: fix too big hide button, fix weird 28px hack

---
 src/components/attachment/attachment.vue       | 4 ++--
 src/components/popover/popover.vue             | 6 +++++-
 src/components/timeline_menu/timeline_menu.vue | 1 -
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/components/attachment')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index b072b170..2c1c1682 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -44,7 +44,7 @@
     </a>
     <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="button-unstyled -padded hider"
+      class="button-unstyled hider"
       @click.prevent="toggleHidden"
     >
       <FAIcon icon="times" />
@@ -233,7 +233,7 @@
     position: absolute;
     right: 0;
     margin: 10px;
-    padding: 5px;
+    padding: 0;
     z-index: 4;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 3868ec96..020eab05 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,7 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled -fullwidth"
+      class="button-unstyled -fullwidth popover-trigger-button"
       @click="onClick"
     >
       <slot name="trigger" />
@@ -31,6 +31,10 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.popover-trigger-button {
+  display: block;
+}
+
 .popover {
   z-index: 8;
   position: absolute;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index f8f79be9..c46531be 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,7 +84,6 @@
   margin-right: auto;
   min-width: 0;
   width: 24rem;
-  height: 28px;
 
   .timeline-menu-popover-wrap {
     overflow: hidden;
-- 
cgit v1.2.3-70-g09d2