added marginalia side bar

MitchStevens · Sep 21, 2024 · b6d5b05 · b6d5b05
1 parent 10c6b27
commit b6d5b05
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 9 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -18,6 +18,6 @@
     <script src="./abed.js"></script>
     <div id="content">
       <div id="abed"></div>
-      <div id="parchment"></div>
+      <div class="parchment"></div>
     </div>
 </html>
diff --git a/dist/less/default.less b/dist/less/default.less
@@ -6,6 +6,7 @@
 @import "piece-component";
 @import "chat-component";
 @import "sidebar-component";
+@import "marginalium-component";
 @import "parchment";
 
 body {
@@ -18,7 +19,7 @@ body {
     height: 100vh;
     min-width: 100%;
     display: inline-grid;
-    grid-template-columns: 1fr 900px 1fr;
+    grid-template-columns: minmax(300px, 1fr) 900px 1fr;
 }
 
 #abed {

diff --git a/dist/less/marginalium-component.less b/dist/less/marginalium-component.less
@@ -0,0 +1,22 @@
+#marginalia {
+  width: 300px;
+  grid-row: 1;
+  grid-column: 1;
+  background-color: #1e68d26b;
+  left: -280px;
+  position: relative;
+
+  .marginalium {
+    position: absolute;
+    width: 300px;
+
+    .text {
+
+    }
+
+    .parchment {
+
+    }
+
+  }
+}
diff --git a/dist/less/parchment.less b/dist/less/parchment.less
@@ -1,6 +1,6 @@
 // taken from https://codepen.io/AgnusDei/pen/NWPbOxL
 
-#parchment {
+.parchment {
   display: flex;
   /* center page with absolute position */
   margin: 2em 0;

diff --git a/src/Component/Marginalia/Types.purs b/src/Component/Marginalia/Types.purs
@@ -42,8 +42,8 @@ marginalia predicate marginaliaDescription =
 description :: String -> Predicate GameEvent -> MarginaliumDescription
 description message removeOn =
   { message
-  , leadTime: Seconds 10.0
-  , maxTimeToDisplay: Seconds 20.0
+  , leadTime: Seconds 0.0 --Seconds 10.0
+  , maxTimeToDisplay: Seconds 100000.0 --Seconds 20.0
   , removeOn
   }
 

diff --git a/src/Component/Marginalium.purs b/src/Component/Marginalium.purs
@@ -70,10 +70,14 @@ component = H.mkComponent { eval, initialState, render }
 
     render state =
       HH.div
-        [ HP.class_ (ClassName "marginalium")] $
-        if state.isDisplaying
-          then maybe [] (renderMarginalium >>> pure) state.description
-          else []
+        [ HP.class_ (ClassName "marginalium")]
+        [ --HH.div [ HP.class_ (ClassName "parchment") ] []
+        HH.div_ $
+          if state.isDisplaying
+            then maybe [] (renderMarginalium >>> pure) state.description
+            else []
+        ]
+
 
     eval = H.mkEval (H.defaultEval
       { handleAction = handleAction