frontend calendar list

crates/frontend/frontend/src/templates/pages/user.html

@@ -5,31 +5,44 @@
 
 {% block content %}
 <style>
-li {
+li.calendar-list-item {
   list-style: none;
-  display: block;
+  display: grid;
   margin: 12px;
   min-height: 80px;
   background: #EEE;
   padding: 8px;
   border-radius: 12px;
+  grid-template-areas:
+    "title color-chip"
+    "description color-chip";
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 50px;
+  padding: 0;
+
+  a {
+    display: contents;
+
+    .color-chip {
+      background: var(--color);
+      grid-area: color-chip;
+      border-radius: 0 12px 12px 0;
+    }
+  }
 }
 </style>
 <h2>Welcome {{ user_id }}!</h2>
 <ul>
   {% for calendar in calendars %}
-  <li>
-    {% if let Some(name) = calendar.displayname %}
-    {{ name }}
-    {% else %}
-    {{ calendar.id }}
-    {% endif %}
-    {% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
-    <p style="color: {{ color }}">
-    {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
-    </p>
-    <!-- <a href="{{ calendar.id}}">Test</a> -->
-    <a href="/frontend/user/{{ user_id }}/{{ calendar.id}}">Test</a>
+  {% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
+  <li class="calendar-list-item" style="--color: {{ color }}">
+    <a href="/frontend/user/{{ user_id }}/{{ calendar.id}}">
+      <span class="title">{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}</span>
+      <span class="description">
+      {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
+      </span>
+      <div class="color-chip"></div>
+    </a>
   </li>
   {% endfor %}
 </ul>