Update sessions, locations, tweaks to session page

GaiwanTeam · Sep 9, 2024 · 5608f9c · 5608f9c
1 parent 3b59579
commit 5608f9c
Show file tree

Hide file tree

Showing 10 changed files with 402 additions and 67 deletions.
diff --git a/resources/compass/schedule_20240909.edn b/resources/compass/schedule_20240909.edn
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -122,6 +122,34 @@ body {
   font-family: Open Sans, sans-serif;
 }
 
+.site-copy p {
+  line-height: 2;
+}
+
+.site-copy h1 {
+  margin-top: var(--size-5);
+  margin-bottom: var(--size-4);
+}
+
+.site-copy h2 {
+  margin-top: var(--size-4);
+  margin-bottom: var(--size-3);
+}
+
+.site-copy h3 {
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-2);
+}
+
+.site-copy h4 {
+  margin-top: var(--size-2);
+  margin-bottom: var(--size-1);
+}
+
+.site-copy h5 {
+  margin-top: var(--size-1);
+}
+
 .graphics-compass_logo path {
   fill: var(--hoc-pink);
 }
@@ -555,16 +583,7 @@ body {
   width: 100px;
 }
 
-.sessions-session_card {
-  display: flex;
-  gap: var(--size-1);
-  background-color: var(--surface-2);
-  box-shadow: var(--shadow-2);
-  border-style: solid;
-  border-color: var(--surface-3);
-}
-
-.sessions-session_card .left {
+.sessions-img_PLUS_join_widget {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -574,6 +593,15 @@ body {
   margin-right: var(--size-2);
 }
 
+.sessions-session_card {
+  display: flex;
+  gap: var(--size-1);
+  background-color: var(--surface-2);
+  box-shadow: var(--shadow-2);
+  border-style: solid;
+  border-color: var(--surface-3);
+}
+
 .sessions-session_card .title {
   font-size: var(--size-4);
   font-weight: 600;
@@ -626,7 +654,7 @@ body {
   display: block;
 }
 
-.sessions-session_card.htmx-request .left, .sessions-session_card.htmx-request .details {
+.sessions-session_card.htmx-request .details, .sessions-session_card.htmx-request .sessions-img_PLUS_join_widget {
   opacity: 0.5;
   animation: session-card-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -643,6 +671,7 @@ body {
   display: flex;
   gap: var(--size-2);
   margin-bottom: var(--size-8);
+  align-items: center;
 }
 
 .sessions-session_detail .header-row .title {
@@ -661,7 +690,8 @@ body {
 
 .sessions-session_detail .header-row .type {
   background: var(--sessions-session-type-color);
-  margin: var(--size-0);
+  margin-top: var(--size-1);
+  margin-bottom: var(--size-1);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
@@ -691,7 +721,6 @@ body {
   position: relative;
   margin-top: var(--size-4);
   margin-bottom: var(--size-4);
-  display: flex;
   padding: var(--size-4);
   gap: var(--size-4);
   display: flex;
@@ -712,14 +741,7 @@ body {
   font-weight: 600;
   padding: var(--size-4);
   text-align: center;
-}
-
-@media (min-width: 1024px) {
-
-  .sessions-session_detail .three-box >div {
-    width: 33%;
-  }
-
+  flex-grow: 1;
 }
 
 .sessions-session_detail .three-box >div >.small {

diff --git a/src/co/gaiwan/compass/css/styles.clj b/src/co/gaiwan/compass/css/styles.clj
@@ -18,4 +18,16 @@
    [:dialog :p-0]
 
    [:body {:font-family "Open Sans, sans-serif"}]
+
+   [:.site-copy
+    [:p {:line-height 2}]
+    [:h1 {:margin-top t/--size-5
+          :margin-bottom t/--size-4}]
+    [:h2 {:margin-top t/--size-4
+          :margin-bottom t/--size-3}]
+    [:h3 {:margin-top t/--size-3
+          :margin-bottom t/--size-2}]
+    [:h4 {:margin-top t/--size-2
+          :margin-bottom t/--size-1}]
+    [:h5 {:margin-top t/--size-1}]]
    ])
diff --git a/src/co/gaiwan/compass/db.clj b/src/co/gaiwan/compass/db.clj
@@ -101,4 +101,9 @@
               :session/capacity 1}])
 
   (wagontrain/applied? (conn) :add-locations)
+
+  (wagontrain/rollback! (conn) :add-live-set)
+  (wagontrain/rollback! (conn) :add-updated-schedule)
+  (wagontrain/migrate! (conn) (munge-to-db migrations/all))
+
   )
diff --git a/src/co/gaiwan/compass/db/data.clj b/src/co/gaiwan/compass/db/data.clj
@@ -51,9 +51,9 @@
     :session.type/color "var(--activity-color)"
     :db/ident           :session.type/activity}])
 
-(defn schedule []
+(defn load-schedule [resource-path]
   (map
    (fn [s]
      (update s :session/image #(assets/download-image %)))
-   (read-string (slurp (io/resource "compass/schedule.edn")))))
+   (read-string (slurp (io/resource resource-path)))))
 
diff --git a/src/co/gaiwan/compass/db/migrations.clj b/src/co/gaiwan/compass/db/migrations.clj
@@ -9,5 +9,23 @@
     :tx-data (data/session-types)}
 
    {:label :add-initial-schedule
-    :tx-data (data/schedule)}
+    :tx-data (data/load-schedule "compass/schedule.edn")}
+
+   {:label :add-live-set
+    :tx-data [{:session.type/name  "Live Set"
+               :session.type/color "var(--workshop-color)"
+               :db/ident           :session.type/live-set}]}
+
+   {:label :add-updated-schedule
+    :tx-data (data/load-schedule "compass/schedule_20240909.edn")}
+
+   {:label :update-locations
+    :tx-data
+    [[:db/retractEntity :location.type/depot-main-stage]
+     [:db/retractEntity :location.type/hal5-zone-a]
+     [:db/retractEntity :location.type/hal5-zone-b]
+     [:db/retractEntity :location.type/hal5-hoc-cafe]
+     {:db/ident :location.type/hal5
+      :location/name "Hal 5 - Workshop Zone"}
+     {:location/name "Hal 5 - Community Space"}]}
    ])
diff --git a/src/co/gaiwan/compass/db/queries.clj b/src/co/gaiwan/compass/db/queries.clj
@@ -53,3 +53,10 @@
      :where
      [?t :session.type/name]]
    (db/db)))
+
+(defn all-locations []
+  (db/q
+   '[:find [(pull ?t [*]) ...]
+     :where
+     [?t :location/name]]
+   (db/db)))
diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
@@ -4,6 +4,7 @@
   (:require
    [clojure.string :as str]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
+   [co.gaiwan.compass.db.queries :as q]
    [co.gaiwan.compass.html.components :as c]
    [co.gaiwan.compass.html.filters :as filters]
    [co.gaiwan.compass.html.graphics :as graphics]
@@ -110,13 +111,19 @@
      (when (< 0 m)
        (str m " min")))))
 
+(o/defstyled img+join-widget :div
+  :flex-col :items-center :py-3 :mx-2
+  ([session user]
+   [:<>
+    [session-image+guage session user]
+    [join-btn session user]]))
+
 (o/defstyled session-card :div
   :flex :gap-1
   :bg-surface-2
   :shadow-2
   :boder :border-solid :border-surface-3
   #_:text-center
-  [:.left :flex-col :items-center :py-3 :mx-2]
   [:.title :font-size-4 :font-semibold :mt-3 :mb-2
    [:a {:color t/--text-1}]]
   [:.subtitle :font-size-3 :font-medium :mb-3
@@ -135,7 +142,7 @@
   [:.expansion {:display "none"}]
   [:&.expanded [:.expansion {:display "block"}]]
   [:&.htmx-request
-   [#{:.left :.details}
+   [#{(str "." img+join-widget) :.details}
     {:opacity "0.5"
      :animation "session-card-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite"}]]
   ([{:session/keys [type title subtitle organized time
@@ -153,19 +160,16 @@
      :hx-disinherit "hx-target hx-select"}
     [:div.type (:session.type/name type)]
 
-    [:div.left
-     [session-image+guage session user]
-     [join-btn session user]]
+    [img+join-widget session user]
+
 
     [:div.details
      [:h2.title
       [:a {:href (url-for :session/get {:id (:db/id session)})}
        [:span.datetime
         (str (time/truncate-to (time/local-time time) :minutes)) " · "]
        title]]
-     [:h3.subtitle (if-let [organizer-name (and (str/blank? subtitle) (-> session :session/organized :public-profile/name))]
-                     (str "organized by " organizer-name)
-                     subtitle)]
+     [:h3.subtitle (session/subtitle session)]
      #_[:div.expansion
         [session-card-actions session user]]
      [:div.loc (fmt-dur duration) " @ " (:location/name location)]
@@ -188,23 +192,24 @@
   [capacity-gauge :w-100px]
   :mt-8
   [:.header-row :flex :gap-2 :mb-8
+   :items-center
    [:.title :lg:font-size-8
     :font-size-7
     {:text-wrap :wrap
      :word-break :break-word}]
    [:.header-row-text]
    [:.type
     {:background --session-type-color}
-    :m-0 :font-bold :uppercase :tracking-widest :p-1]]
+    :my-1 :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}
-   :relative :my-4 :flex :p-4 :gap-4 :lg:flex-row :flex-col
-   [:>div :border-8 :font-semibold :p-4 :lg:w-33% :text-center
+   :relative :my-4 :p-4 :gap-4 :lg:flex-row :flex-col
+   [:>div :border-8 :font-semibold :p-4 :text-center :flex-grow
     [:>.small :lg:font-size-3 :uppercase :tracking-widest]
     [:>.large :font-size-6 :lg:font-size-7 :font-bold]]
    [:&:before
@@ -220,7 +225,7 @@
      :transform "rotate(1deg)"}]]
 
   ([{:session/keys [type title subtitle organized
-                    time location image capacity
+                    time duration location image capacity
                     signup-count description
                     participants] :as session}
     user]
@@ -238,21 +243,25 @@
        :style {:display "none"}
        :hx-trigger (str "session-" (:db/id session) "-deleted from:body")}]
      [:div.header-row
-      [session-image+guage session user]
+      [img+join-widget session user]
       [:div.header-row-text
-       [:div.type (:session.type/name type)]
-       [:h3.title title]]]
+       [:div [:span.type (:session.type/name type)]]
+       [:h3.title title]
+       [:h4 (session/subtitle session)]]]
      [:div.event-at
-      [:p "Event scheduled at"]
+      #_[:p "Event scheduled at"]
       [:div.datetime
        (when time
-         (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.description
+         (str
+          (subs (str/capitalize (str (time/day-of-week time))) 0 3)
+          " "
+          (time/format "dd.MM" time)
+          ", "
+          (time/truncate-to (time/local-time time) :minutes)))
+       " → "
+       (fmt-dur duration)]]
+
+     [:div.description.site-copy
       [:div (m/component (m/md->hiccup description))]]
      [:div.three-box
       [:div.location
@@ -261,19 +270,19 @@
       [: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 ❎"])]]
+      #_[: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)]])
 
      [:div.actions
-      [join-btn session user]
+
       (when (or (user/admin? user)
                 (session/organizing? session user))
         [:<>
@@ -388,19 +397,13 @@
             n])]])
 
      [:label {:for "location"} "Location"]
-     [:select (cond-> {:id "location" :name "location"}
-                session
-                (assoc :value
-                       (name (get-in session [:session/location :db/ident]))))
-      [:option {:value "depot-main-stage"} "Het Depot - main stage"]
-      [:option {:value "depot-bar"} "Het Depot - Bar"]
-      [:option {:value "hal5-zone-a"} "Hal 5 - zone A"]
-      [:option {:value "hal5-zone-b"} "Hal 5 - zone B"]
-      [:option {:value "hal5-hoc-cafe"} "Hal 5 - HoC Café"]
-      [:option {:value "hal5-foodcourt"} "Hal 5 - Foodcourt"]
-      [:option {:value "hal5-park"} "Hal 5 - park"]
-      [:option {:value "hal5-outside-seating"} "Hal 5 - outside seating"]
-      [:option {:value "hal5-long-table"} "Hal 5 - long table"]]
+
+     [:select {:id "location" :name "location"}
+      (for [{:location/keys [name] :db/keys [id]} (q/all-locations)]
+        [:option (cond-> {:value id}
+                   (= id (get-in session [:session/location :db/id]))
+                   (assoc :selected "selected"))
+         name])]
 
      [:label {:for "capacity"} "How many people can you accomodate?"]
      [:input (cond-> {:id "capacity" :name "capacity" :type "number"

diff --git a/src/co/gaiwan/compass/model/session.clj b/src/co/gaiwan/compass/model/session.clj
@@ -116,3 +116,10 @@
 
 (defn session-image-css-value [session]
   (str "url(" (assets/image-url (:session/image session)) ")"))
+
+(defn subtitle
+  "Returns the subtitle if there is one, or 'organized by <person>' otherwise."
+  [{:session/keys [subtitle] :as session}]
+  (if-let [organizer-name (and (str/blank? subtitle) (-> session :session/organized :public-profile/name))]
+    (str "organized by " organizer-name)
+    subtitle))