Style groups overview

Still uses placeholder pictures until we have image upload support
thekid · Jan 2, 2024 · 72f5d5c · 72f5d5c
1 parent 5c11c94
commit 72f5d5c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/main/handlebars/index.handlebars b/src/main/handlebars/index.handlebars
@@ -11,11 +11,14 @@
       {{#each groups}}
         {{#*fragment "group"}}
           <div id="g{{_id}}" class="group">
+            <a href="/group/{{_id}}">
+              <img src="https://picsum.photos/536/354?random={{_id}}" width="536" height="354" alt="{{name}}">
+            </a>
             <h2><a href="/group/{{_id}}">{{name}}</a></h2>
             <p>{{description}}</p>
 
             <div class="actions">
-              <small>Created by <b>{{owner.name}}</b> on {{date created}}</small>
+              <small>Created by <b>{{owner.name}}</b> on {{date created format="d.m.Y"}}</small>
             </div>
           </div>
         {{/fragment}}

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
@@ -60,20 +60,33 @@
     .groups {
       display: grid;
       gap: 1rem;
-      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
     }
 
     .group {
+      --corners: 1rem;
       display: grid;
-      gap: .5rem;
-      grid-template-rows: max-content 1fr max-content;
-      border: 1px solid rgb(0 0 0 / .2);
-      box-shadow: 0 .25rem .25rem rgb(0 0 0 / .1);
+      gap: 1rem;
+      grid-template-rows: 10rem max-content 1fr max-content;
       background-color: white;
+      border-radius: var(--corners);
+      overflow: hidden;
     }
 
-    .group > * {
-      padding: .75rem;
+    .group img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: var(--corners) var(--corners) 0 0;
+      transition: transform 350ms cubic-bezier(0.2, 0, 0, 1) 0s;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+
+    .group h2, .group p {
+      padding-inline: 1rem;
     }
 
     .group h2 {
@@ -91,6 +104,8 @@
     }
 
     .post {
+      --corners: .25rem;
+
       display: grid;
       gap: .5rem;
       border: 1px solid rgb(0 0 0 / .2);
@@ -115,6 +130,8 @@
       background-color: rgb(0 0 0 / .05);
       display: grid;
       grid-template-columns: 1fr max-content;
+      padding: .75rem;
+      border-radius: 0 0 var(--corners) var(--corners);
     }
 
     .actions .buttons {