Merge pull request #15 from stiefeljackal/refactor/dl-infobox

tweak(metadata): change from ul to dl format

Author: ProbablePrime

public/stylesheets/style.css

@@ -17,6 +17,29 @@
   font-family: "Poppins", sans-serif;
 }
 
+.infobox {
+  list-style-type: disc;
+  padding-inline-start: 40px;
+}
+
+.infobox__row {
+  display: list-item;
+}
+
+.infobox__heading,
+.infobox__details {
+  display: inline;
+}
+
+.infobox__heading {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.infobox__details {
+  margin-left: 0;
+}
+
 .btn {
   appearance: button;
   border-radius: 6px;

views/session.pug

@@ -15,10 +15,16 @@ block content
     .center 
         img(src=thumbnailUrl alt=`A preview image of the '${title}' session.`)
 
-    ul
-        li #[strong Host:] #{hostUsername}
-        li #[strong Version:] #{appVersion}
-        li #[strong Users (#{totalJoinedUsers}/#{maxUsers}):] #{sessionUsers.map(user => user.username).join(", ")}
+    dl.infobox
+        .infobox__row
+            dt.infobox__heading Host: 
+            dd.infobox__details #{hostUsername}
+        .infobox__row
+            dt.infobox__heading Version: 
+            dd.infobox__details #{appVersion}
+        .infobox__row
+            dt.infobox__heading Users (#{totalJoinedUsers}/#{maxUsers}): 
+            dd.infobox__details #{sessionUsers.map(user => user.username).join(", ")}
     div.center
         a.btn(href=`ressession:///${sessionId}`) Join Session!
     p.center 

views/world.pug

@@ -14,10 +14,16 @@ block content
     .center 
         img(src=thumbnailUri alt=`A preview image of the '${title}' world.`)
 
-    ul
-        li #[strong By:] #{ownerName}
-        li #[strong Description:] #{description}
-        li #[strong Tags:] #{tags.join(", ")}
+    dl.infobox
+        .infobox__row
+            dt.infobox__heading By: 
+            dd.infobox__details #{ownerName}
+        .infobox__row 
+            dt.infobox__heading Description: 
+            dd.infobox__details #{description}
+        .infobox__row 
+            dt.infobox__heading Tags: 
+            dd.infobox__details #{tags.join(", ")}
     div.center
         a.btn(href=`resrec:///${ownerId}/${id}`) Open World!
     p.center