Merge pull request #605 from browngraphicslab/presentation_updates

Presentation updates

1 files changed, 87 insertions, 9 deletions

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 54accb012..c4d8f1a4f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -13,7 +13,7 @@ $light-background: #ececec;
     width: 100%;
     min-width: 20px;
     height: 100%;
-    min-height: 41px;
+    min-height: 35px;
     letter-spacing: 2px;
     overflow: hidden;
     transition: 0.7s opacity ease;
@@ -801,7 +801,7 @@ $light-background: #ececec;
     }
 
 
-    .miniPresOverlay {
+    .presPanelOverlay {
         background-color: #323232;
         color: white;
         border-radius: 5px;
@@ -816,7 +816,7 @@ $light-background: #ececec;
         right: 10px;
         transition: all 0.2s;
 
-        .miniPres-button-text {
+        .presPanel-button-text {
             display: flex;
             height: 20;
             width: max-content;
@@ -833,13 +833,13 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-divider {
+        .presPanel-divider {
             width: 0.5px;
             height: 80%;
             border-right: solid 1px #5a5a5a;
         }
 
-        .miniPres-button-frame {
+        .presPanel-button-frame {
             justify-self: center;
             align-self: center;
             align-items: center;
@@ -854,7 +854,7 @@ $light-background: #ececec;
             border-radius: 5px;
         }
 
-        .miniPres-button {
+        .presPanel-button {
             cursor: pointer;
             display: flex;
             height: 20;
@@ -867,11 +867,11 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-button:hover {
+        .presPanel-button:hover {
             background-color: #5a5a5a;
         }
 
-        .miniPres-button-text:hover {
+        .presPanel-button-text:hover {
             background-color: #5a5a5a;
         }
     }
@@ -950,4 +950,82 @@ $light-background: #ececec;
     .select {
         font-size: 100%;
     }
-}
\ No newline at end of file
+}
+
+.miniPres:hover {
+    opacity: 1;
+}
+
+.miniPres {
+    cursor: grab;
+    position: absolute;
+    overflow: hidden;
+    right: 10;
+    top: 10;
+    opacity: 0.1;
+    transition: all 0.4s;
+    /* border: solid 1px; */
+    color: white;
+    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+    
+    .miniPresOverlay {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto auto;
+        grid-template-rows: 100%;
+        height: 100%;
+        justify-items: center;
+        align-items: center;
+
+        .miniPres-button-text {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            font-weight: 400;
+            min-width: 100%;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button-frame {
+            justify-self: center;
+            align-self: center;
+            align-items: center;
+            display: grid;
+            grid-template-columns: auto auto auto;
+            justify-content: space-around;
+            font-size: 11;
+            margin-left: 7;
+            width: 30;
+            height: 85%;
+            background-color: rgba(91, 157, 221, 0.4);
+            border-radius: 5px;
+        }
+
+        .miniPres-divider {
+            width: 0.5px;
+            height: 80%;
+            border-right: solid 2px #5a5a5a;
+        }
+
+        .miniPres-button {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            min-width: 20;
+            border-radius: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button:hover {
+            background-color: #5a5a5a;
+        }
+
+        .miniPres-button-text:hover {
+            background-color: #5a5a5a;
+        }
+    }
+}