Merge pull request #49 from MTRNord/MTRNord/css-improvements

Small CSS improvements
matrix-org · Jan 3, 2025 · d6c7b0b · d6c7b0b
2 parents 04e6469 + 46a66af
commit d6c7b0b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -27,10 +27,9 @@
             <pre id="closeinfocontainer">[ Close ]</pre>
             <pre id="eventdetails" />
         </div>
-        <div id="contents">
-            <div id="eventlist"></div>
-            <div id="svgcontainer" class="monospace" />
-        </div>
+        <div id="eventlist"></div>
+        <div id="svgcontainer" class="monospace" />
+
     </div>
 
     <template id="eventlisttemplate">

diff --git a/src/graph.ts b/src/graph.ts
@@ -333,7 +333,7 @@ const redraw = (vis: HTMLDivElement, events: MatrixEvent[], opts: RenderOptions)
     d3.select(vis).html(null);
 
     // determine width & height of parent element and subtract the margin
-    const width = lanes.length * gx + 1000;
+    const width = lanes.length * gx + 1140;
     const height = data.length * gy;
 
     // create svg and create a group inside that is moved by means of margin
@@ -629,7 +629,18 @@ const redraw = (vis: HTMLDivElement, events: MatrixEvent[], opts: RenderOptions)
         .attr("y", (d) => d.y * gy + 4);
 
     node.append("text")
-        .text((d) => (d.origin_server_ts ? new Date(d.origin_server_ts).toLocaleString() : ""))
+        .text((d) =>
+            d.origin_server_ts
+                ? new Date(d.origin_server_ts).toLocaleString(undefined, {
+                      day: "2-digit",
+                      month: "2-digit",
+                      year: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit",
+                  })
+                : "",
+        )
         .attr("x", -margin.left)
         .attr("y", (d) => d.y * gy + 4);
 

diff --git a/style.css b/style.css
@@ -2,50 +2,49 @@ body {
     margin: 0px;
 }
 #page {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-areas:
+        "header header"
+        "eventlist svgcontainer"
+        "eventlist svgcontainer";
+    grid-template-rows: min-content auto auto;
+    /* Make the sidebar just enough wide for the content but the svgcontainer take the most space */
+    grid-template-columns: 25% auto;
     height: 100%;
 }
 
 #header {
-    top: 0;
-    left: 0;
+    grid-area: header;
+    height: min-content;
     padding: 8px;
     background-color: #a6b8c7;
     border: 1px solid #00060b;
     margin: 5px;
     display: flex;
+    gap: 8px;
 }
 
 #infocontainer {
     position: absolute;
     background-color: #eee;
-    width: 50%; /* don't let the popup occlude the entire graph */
+    padding: 10px;
+    width: min-content;
+    max-width: 50%; /* don't let the popup occlude the entire graph */
     overflow: scroll;
 }
 
 #closeinfocontainer {
     cursor: pointer;
 }
 
-#contents {
-    display: flex;
-    /* 
-     * this makes firefox center-justify the contents and hide it when the svg is wide
-     * and don't hide the overflow when the svg is wide
-     */
-    /* justify-content: space-around; */
-    /* overflow: hidden; */
-    flex-grow: 1;
-}
-
 #svgcontainer {
-    flex-grow: 1;
+    grid-area: svgcontainer;
+    /* Prevent the svg from filling more than the available space by allowing it to scroll in both directions */
+    overflow: scroll;
 }
 
 #eventlist {
-    min-width: 25%;
-    max-width: 25%;
+    grid-area: eventlist;
     border: 1px solid;
     border-color: #00060b;
     margin: 5px;