From 972839216c14baa5c9eaf80e1fb2fb2694bbb72c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 8 Oct 2024 22:51:46 -0400
Subject: modified how buttons are laid out on carousel and comparison views so
 that text boxes can reflow around them.  extracted flashcard pratice into its
 own component and applied it to carousel3D and carousel

---
 .../views/collections/CollectionCarouselView.scss  | 86 +---------------------
 1 file changed, 4 insertions(+), 82 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 97952822e..757072453 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -12,23 +12,10 @@
         display: inline-block;
         width: 100%;
         user-select: none;
+        position: absolute;
+        top: 0;
+        left: 0;
     }
-    .message {
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        height: 60%;
-        z-index: -1;
-        // margin: 15px;
-    }
-}
-
-.collectionCarouselView-addFlashcards {
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    z-index: -1;
-    pointer-events: none;
 }
 .collectionCarouselView-recentlyMissed {
     color: red;
@@ -39,10 +26,7 @@
     pointer-events: none;
 }
 .carouselView-back,
-.carouselView-fwd,
-.carouselView-remove,
-.carouselView-check,
-.carouselView-add {
+.carouselView-fwd {
     position: absolute;
     display: flex;
     width: 30;
@@ -66,68 +50,6 @@
     left: 0;
     transform-origin: top left;
 }
-.carouselView-add {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-.carouselView-remove {
-    left: 52%;
-}
-.carouselView-check {
-    right: 52%;
-}
-.carouselView-menu {
-    position: absolute;
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-    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,
 .carouselView-fwd:hover {
     background: lightgray;
-- 
cgit v1.2.3-70-g09d2