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

1 files changed, 4 insertions, 82 deletions

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;