From fc3e2b18b9dad38920e1cec5e58bf9fbd06f4aaf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 8 Oct 2024 03:30:21 -0400
Subject: changed carousel view to resize ui buttons based on screen scaling
 and document dimensions.  lint errors.

---
 .../views/collections/CollectionCarouselView.scss  | 95 ++++++++++------------
 1 file changed, 45 insertions(+), 50 deletions(-)

(limited to 'src/client/views/collections/CollectionCarouselView.scss')

diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index af617254a..97952822e 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -40,7 +40,6 @@
 }
 .carouselView-back,
 .carouselView-fwd,
-.carouselView-star,
 .carouselView-remove,
 .carouselView-check,
 .carouselView-add {
@@ -58,16 +57,14 @@
     }
 }
 .carouselView-fwd {
-    top: 42.5%;
-    right: 20;
+    top: calc(50% - 15px);
+    right: 0;
+    transform-origin: right top;
 }
 .carouselView-back {
-    top: 42.5%;
-    left: 20;
-}
-.carouselView-star {
-    top: 0;
+    top: calc(50% - 15px);
     left: 0;
+    transform-origin: top left;
 }
 .carouselView-add {
     position: absolute;
@@ -75,62 +72,60 @@
     left: 0;
 }
 .carouselView-remove {
-    top: 80%;
     left: 52%;
 }
 .carouselView-check {
-    top: 80%;
     right: 52%;
 }
-.carouselView-quiz {
-    position: relative;
-    display: flex;
-    height: 20px;
-    align-items: center;
-    margin: auto;
-    &:hover {
-        color: white;
-    }
-}
-
-.carouselView-practice {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 20px;
-    align-items: center;
-    margin: auto;
-    &:hover {
-        color: white;
-    }
-}
-.carouselView-starFilter {
-    position: relative;
-    display: flex;
-    height: 20px;
-    align-items: center;
-    &:hover {
-        color: white;
-    }
-}
-
-.carouselView-practiceModes {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    flex-direction: column;
-}
 .carouselView-menu {
     position: absolute;
     flex-direction: column;
     align-items: center;
     display: flex;
-    top: 2px;
-    left: 2px;
+    top: 0px;
+    left: 0px;
     width: 30;
+    transform-origin: top left;
     border-radius: 5px;
     color: rgba(255, 255, 255, 0.5);
     background: rgba(0, 0, 0, 0.1);
+    .carouselView-practiceModes {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+        position: relative;
+        .carouselView-quiz {
+            position: relative;
+            display: flex;
+            height: 20px;
+            align-items: center;
+            margin: auto;
+            &:hover {
+                color: white;
+            }
+            & > svg {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        .carouselView-practice {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            height: 20px;
+            align-items: center;
+            margin: auto;
+            &:hover {
+                color: white;
+            }
+            & > svg {
+                height: 100%;
+                width: 100%;
+            }
+        }
+    }
 }
 
 .carouselView-back:hover,
-- 
cgit v1.2.3-70-g09d2