Improve session page design

GaiwanTeam · Sep 3, 2024 · e27b549 · e27b549
1 parent e07cc71
commit e27b549
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 17 deletions.
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -19,6 +19,7 @@
   --workshop-color: var(--teal-2);
   --office-hours-color: var(--red-2);
   --activity-color: var(--red-2);
+  --highlight-yellow: var(--yellow-2);
   --highlight: var(--hoc-pink-1);
 }
 
@@ -29,6 +30,7 @@
     --workshop-color: var(--teal-8);
     --office-hours-color: var(--red-9);
     --activity-color: var(--red-9);
+    --highlight-yellow: var(--yellow-9);
     --highlight: var(--hoc-pink-4);
   }
 
@@ -590,10 +592,82 @@ body {
   animation: session-card-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+.sessions-session_detail {
+  margin-top: var(--size-8);
+}
+
 .sessions-session_detail .sessions-capacity_gauge {
   width: 100px;
 }
 
+.sessions-session_detail .header-row {
+  display: flex;
+  gap: var(--size-2);
+  margin-bottom: var(--size-8);
+}
+
+.sessions-session_detail .header-row .title {
+  font-size: var(--size-8);
+  text-wrap: wrap;
+}
+
+.sessions-session_detail .header-row .type {
+  background: var(--sessions-session-type-color);
+  margin: var(--size-0);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: var(--size-1);
+}
+
+.sessions-session_detail .event-at {
+  box-shadow: -14px 14px 0 -4px black;
+  background: var(--highlight-yellow);
+  padding: var(--size-4);
+  max-width: 32rem;
+  margin-top: var(--size-2);
+  margin-bottom: var(--size-6);
+  margin-left: var(--size-2);
+}
+
+.sessions-session_detail .event-at >p {
+  font-weight: 600;
+}
+
+.sessions-session_detail .event-at .datetime {
+  font-size: var(--size-7);
+  font-weight: 700;
+}
+
+.sessions-session_detail .three-box {
+  background: var(--activity-color);
+  font-size: var(--size-6);
+  margin-top: var(--size-4);
+  margin-bottom: var(--size-4);
+  display: flex;
+  padding: var(--size-4);
+  gap: var(--size-4);
+}
+
+.sessions-session_detail .three-box >div {
+  border-width: 8px;
+  font-weight: 600;
+  padding: var(--size-4);
+  width: 33%;
+  text-align: center;
+}
+
+.sessions-session_detail .three-box >div >.small {
+  font-size: var(--size-3);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.sessions-session_detail .three-box >div >.large {
+  font-size: var(--size-7);
+  font-weight: 700;
+}
+
 .sessions-session_list .sessions {
   display: grid;
   gap: var(--size-3);

diff --git a/src/co/gaiwan/compass/css.clj b/src/co/gaiwan/compass/css.clj
@@ -24,6 +24,7 @@
          (o/defined-garden))))
 
 (defn on-watcher-event [e]
+  (println "File changed, reloading css")
   (when (.isFile (io/file (str (:path e))))
     (when (.endsWith (str (:path e)) ".clj")
       (require

diff --git a/src/co/gaiwan/compass/css/tokens.clj b/src/co/gaiwan/compass/css/tokens.clj
@@ -34,13 +34,15 @@
 (o/defprop --activity-color)
 
 (o/defprop --highlight)
+(o/defprop --highlight-yellow)
 
 (o/defrules session-colors
   [":where(html)"
    {--talk-color         --blue-2
     --workshop-color     --teal-2
     --office-hours-color --red-2
     --activity-color     --red-2
+    --highlight-yellow      --yellow-2
     --highlight          --hoc-pink-1}]
 
   (gs/at-media
@@ -50,4 +52,5 @@
      --workshop-color     --teal-8
      --office-hours-color --red-9
      --activity-color     --red-9
+     --highlight-yellow      --yellow-9
      --highlight          --hoc-pink-4}]))
diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
@@ -184,6 +184,25 @@
 
 (o/defstyled session-detail :div
   [capacity-gauge :w-100px]
+  :mt-8
+  [:.header-row :flex :gap-2 :mb-8
+   [:.title :font-size-8 {:text-wrap :wrap}]
+   [:.header-row-text]
+   [:.type
+    {:background --session-type-color}
+    :m-0 :font-bold :uppercase :tracking-widest :p-1]]
+  [:.event-at
+   {:box-shadow "-14px 14px 0 -4px black"
+    :background t/--highlight-yellow}
+   :p-4 :max-w-lg :mt-2 :mb-6 :ml-2
+   [:>p :font-semibold]
+   [:.datetime :font-size-7 :font-bold]
+   ]
+  [:.three-box {:background t/--activity-color}
+   :font-size-6 :my-4 :flex :p-4 :gap-4
+   [:>div :border-8 :font-semibold :p-4 :w-33% :text-center
+    [:>.small :font-size-3 :uppercase :tracking-widest]
+    [:>.large :font-size-7 :font-bold]]]
   ([{:session/keys [type title subtitle organized
                     time location image capacity
                     signup-count description
@@ -196,37 +215,46 @@
      :hx-select (str "." session-detail " > *")
      :hx-disinherit "hx-target hx-select "
      :style {--session-type-color (:session.type/color type)}}
-    [:div.type (:session.type/name type)]
 
     [:div.details
      [:a
       {:href "/"
        :style {:display "none"}
        :hx-trigger (str "session-" (:db/id session) "-deleted from:body")}]
-     [session-image+guage session user]
-     [:h3.title title]
+     [:div.header-row
+      [session-image+guage session user]
+      [:div.header-row-text
+       [:div.type (:session.type/name type)]
+       [:h3.title title]]]
+     [:div.event-at
+      [:p "Event scheduled at"]
+      [:div.datetime
+       (str (time/truncate-to (time/local-time time) :minutes)
+            ", "
+            (subs (str/capitalize (str (time/day-of-week time))) 0 3)
+            " "
+            (time/format "dd.MM" time))]]
      [:h3.subtitle subtitle]
-     [:div.datetime
-      [:div
-       (str (time/truncate-to (time/local-time time) :minutes))]
-      [:div
-       (subs (str/capitalize (str (time/day-of-week time))) 0 3) " "
-       (time/format "dd.MM" time)]]
      [:div.description
       [:div (m/component (m/md->hiccup description))]]
-     [:div.location
-      [:div "Location "]
-      [:div (:location/name location)]]
-     [:div.capacity
-      [:div "Spots available:"]
-      [:div (- (or capacity 0) (or signup-count 0))]]
+     [:div.three-box
+      [:div.location
+       [:div.small "Location "]
+       [:div.large (:location/name location)]]
+      [:div.capacity
+       [:div.small "Spots available"]
+       [:div.large (- (or capacity 0) (or signup-count 0))]]
+      [:div
+       [:p.small "Ticket required"]
+       (if (:session/ticket-required? session)
+         [:p.large "YES ✅"]
+         [:p.large "NO ❎"])]]
      (when (session/organizing? session user)
        ;; Only show the participants' list to organizer.
        [:div.participants
         [:div "Participants:"]
         [:ol (map attendee participants)]])
-     (when (:session/ticket-required? session)
-       [:p "Ticket Required"])
+
      [:div.actions
       [join-btn session user]
       (when (or (user/admin? user)