changed carousel view to resize ui buttons based on screen scaling and document dimensions. lint errors.

1 files changed, 45 insertions, 50 deletions

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,