From f0bd57af98f130f7670cb29b2da24ff82c6d1055 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Fri, 9 Dec 2022 22:43:32 -0600
Subject: [PATCH] media assets: fix paginator positioning on mobile.

On the media assets show page, fix the styling and positioning of the paginator on mobile.
---
 .../media_asset_component.scss                | 33 +++++++++++++++----
 .../src/styles/base/040_colors.scss           |  2 +-
 .../src/styles/common/utilities.scss          |  2 ++
 app/views/media_assets/show.html.erb          |  6 ++--
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/components/media_asset_component/media_asset_component.scss b/app/components/media_asset_component/media_asset_component.scss
index 8bf659836..266870fa2 100644
--- a/app/components/media_asset_component/media_asset_component.scss
+++ b/app/components/media_asset_component/media_asset_component.scss
@@ -8,30 +8,49 @@
 }
 
 .media-asset-component {
-  &:not(.media-asset-component-fit-height) .paginator {
+  &:not(.media-asset-component-fit-height) .media-asset-paginator {
     position: sticky;
+    top: calc((100vh + var(--header-visible-height) - var(--paginator-size)) / 2);
   }
 
   &:hover {
-    .paginator-prev, .paginator-next {
-      opacity: 0.8;
+    .media-asset-paginator-prev, .media-asset-paginator-next {
+      opacity: 0.4;
     }
   }
 
-  .paginator-prev, .paginator-next {
+  .media-asset-paginator {
+    top: calc((100% - var(--paginator-size)) / 2);
+    height: 0;
+
+    --paginator-size: 32px;
+    font-size: var(--text-lg);
+
+    @media screen and (min-width: 660px) {
+      --paginator-size: 48px;
+      font-size: var(--text-xl);
+    }
+  }
+
+  .media-asset-paginator-prev, .media-asset-paginator-next {
     opacity: 0;
-    width: 48px;
-    height: 96px;
-    top: calc((100vh - var(--header-visible-height) - 96px) / 2);
+    width: var(--paginator-size);
+    height: var(--paginator-size);
+    border-radius: var(--paginator-size);
     transition: opacity 0.125s, background-color 0.125s;
 
     color: var(--asset-paginator-link-color);
     background-color: var(--asset-paginator-background-color);
 
     &:hover {
+      opacity: 1;
       color: var(--asset-paginator-link-hover-color);
       background-color: var(--asset-paginator-background-hover-color);
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   .media-asset-image {
diff --git a/app/javascript/src/styles/base/040_colors.scss b/app/javascript/src/styles/base/040_colors.scss
index 9243c83ae..f804cd2cb 100644
--- a/app/javascript/src/styles/base/040_colors.scss
+++ b/app/javascript/src/styles/base/040_colors.scss
@@ -296,7 +296,7 @@ html, body[data-current-user-theme="light"] {
   --asset-paginator-link-color: var(--link-color);
   --asset-paginator-link-hover-color: var(--link-color);
   --asset-paginator-background-color: var(--white);
-  --asset-paginator-background-hover-color: var(--blue-0);
+  --asset-paginator-background-hover-color: var(--white);
 
   --artist-tag-color: var(--red-6);
   --artist-tag-hover-color: var(--red-5);
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index 604a627ba..02573ea13 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -109,7 +109,9 @@ $spacer: 0.25rem; /* 4px */
 
 .mx-auto { margin-left: auto; margin-right: auto; }
 .mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
+.mx-1    { margin-left: 1   * $spacer; margin-right: 1   * $spacer; }
 .mx-2    { margin-left: 2   * $spacer; margin-right: 2   * $spacer; }
+.mx-4    { margin-left: 4   * $spacer; margin-right: 4   * $spacer; }
 
 .mt-1  { margin-top: 1 * $spacer; }
 .mt-2  { margin-top: 2 * $spacer; }
diff --git a/app/views/media_assets/show.html.erb b/app/views/media_assets/show.html.erb
index 76d5e1424..9191b3b3d 100644
--- a/app/views/media_assets/show.html.erb
+++ b/app/views/media_assets/show.html.erb
@@ -4,9 +4,9 @@
       <div class="flex-1 w-full min-w-0">
         <%= render MediaAssetComponent.new(media_asset: @media_asset, current_user: CurrentUser.user, outer_classes: "sticky h-full relative top-0", inner_classes: "mx-auto", dynamic_height: true, scroll_on_zoom: true) do |component| %>
           <% component.with_header do %>
-            <div class="paginator top-0 w-full z-10">
-              <%= link_to chevron_left_icon, media_assets_path(search: { id: ">#{@media_asset.id}", order: "id_asc" }, limit: 1, redirect: true), class: "paginator-prev flex items-center justify-center text-xl absolute left-0 z-10", "data-shortcut": "a left" %>
-              <%= link_to chevron_right_icon, media_assets_path(search: { id: "<#{@media_asset.id}", order: "id_desc" }, limit: 1, redirect: true), class: "paginator-next flex items-center justify-center text-xl absolute right-0 z-10", "data-shortcut": "d right" %>
+            <div class="media-asset-paginator absolute flex justify-between top-0 w-full z-10">
+              <%= link_to chevron_left_icon, media_assets_path(search: { id: ">#{@media_asset.id}", order: "id_asc" }, limit: 1, redirect: true), class: "media-asset-paginator-prev flex items-center justify-center z-10 mx-1", "data-shortcut": "a left" %>
+              <%= link_to chevron_right_icon, media_assets_path(search: { id: "<#{@media_asset.id}", order: "id_desc" }, limit: 1, redirect: true), class: "media-asset-paginator-next flex items-center justify-center z-10 mx-1", "data-shortcut": "d right" %>
             </div>
           <% end %>