Make session cards a bit prettier again

- render time properly - show session type again - outline of guage - center speaker image
GaiwanTeam · Jul 20, 2024 · eb94ac1 · eb94ac1
1 parent b10f322
commit eb94ac1
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 44 deletions.
diff --git a/deps.edn b/deps.edn
@@ -20,7 +20,8 @@
   io.pedestal/pedestal.log       {:mvn/version "0.7.0"}
   ch.qos.logback/logback-classic {:mvn/version "1.5.6"}
 
-  com.datomic/peer      {:mvn/version "1.0.7180"}
+  com.datomic/peer      {:mvn/version "1.0.7180"
+                         :exclusions [joda-time/joda-time]}
   com.cnuernber/charred {:mvn/version "1.034"}
 
   hato/hato                             {:mvn/version "1.0.0"}

diff --git a/resources/compass/schedule.edn b/resources/compass/schedule.edn
@@ -4,7 +4,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/daniel-szmulewicz.jpg",
-  :session/time #time/inst "2024-09-18T18:20:00Z",
+  :session/time #time/zdt "2024-09-18T18:20+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -14,7 +14,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/sami-kallinen.png",
-  :session/time #time/inst "2024-09-18T17:40:00Z",
+  :session/time #time/zdt "2024-09-18T17:40+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -24,7 +24,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/james-reeves.jpeg",
-  :session/time #time/inst "2024-09-18T12:30:00Z",
+  :session/time #time/zdt "2024-09-18T12:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -35,7 +35,7 @@
   :session/type :session.type/workshop,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/chris-mccormick.jpg",
-  :session/time #time/inst "2024-09-18T14:00:00Z",
+  :session/time #time/zdt "2024-09-18T14:00+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/hal5,
   :session/description
@@ -45,7 +45,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/jeaye-wilkerson.png",
-  :session/time #time/inst "2024-09-18T15:30:00Z",
+  :session/time #time/zdt "2024-09-18T15:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -55,7 +55,7 @@
   :session/type :session.type/keynote,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/eric-normand.jpg",
-  :session/time #time/inst "2024-09-19T18:05:00Z",
+  :session/time #time/zdt "2024-09-19T18:05+02:00[Europe/Brussels]",
   :session/duration "PT45M",
   :session/location :location.type/depot,
   :session/description
@@ -66,7 +66,7 @@
   :session/type :session.type/workshop,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/michiel-borkent-teodor-heggelund-christian-johansen.png",
-  :session/time #time/inst "2024-09-18T14:30:00Z",
+  :session/time #time/zdt "2024-09-18T14:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/hal5,
   :session/description
@@ -77,7 +77,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/philippa-markovics-martin-kavalar.png",
-  :session/time #time/inst "2024-09-19T15:30:00Z",
+  :session/time #time/zdt "2024-09-19T15:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -87,7 +87,7 @@
   :session/type :session.type/workshop,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/nikita-prokopov.jpg",
-  :session/time #time/inst "2024-09-18T16:00:00Z",
+  :session/time #time/zdt "2024-09-18T16:00+02:00[Europe/Brussels]",
   :session/duration "PT90M",
   :session/location :location.type/hal5,
   :session/description
@@ -98,7 +98,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/dimitris-kyriakoudis.png",
-  :session/time #time/inst "2024-09-19T16:10:00Z",
+  :session/time #time/zdt "2024-09-19T16:10+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -108,7 +108,7 @@
   :session/type :session.type/office-hours,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/colin-fleming.jpeg",
-  :session/time #time/inst "2024-09-19T15:00:00Z",
+  :session/time #time/zdt "2024-09-19T15:00+02:00[Europe/Brussels]",
   :session/duration "PT90M",
   :session/location :location.type/hal5,
   :session/description
@@ -118,17 +118,18 @@
   :session/type :session.type/session,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/katja-bohnke.jpg",
-  :session/time #time/inst "2024-09-18T15:30:00Z",
+  :session/time #time/zdt "2024-09-18T15:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/hal5,
   :session/description
   "As women in tech I am used to being the only women in the room. I am used to feeling different. At time this raises the question: Do I belong here?\r\n\r\nWorking on a team with people of different age, gender, sexual orientation, religion, physical and mental abilities, ethnic and social background helps me to realize that we are all different and we all belong. Unfortunately, many teams are less diverse and not all people get to make this experience. Therefore, it is important to create opportunities to learn about each other and to become aware of similarities and differences.\r\n\r\nIn this interactive session we share experiences and talk about challenges. The goal is to raise awareness for the topic, to hear each others stories and to support each other. The session is open for all! I invite you to open your hearts for diversity and connect with each other!\n\n## Speakers\n\n### Katja Böhnke\n\nKatja Böhnke is a software engineer and psychology student. She values connection and learning. She loves to work on diverse teams and to create spaces where people can be themselves and connect with each other."}
- {:session/title "Richer SQL",
+ {:session/title
+  "Richer SQL  — Steering SQL's Future Towards Clojure's Philosophy",
   :session/subtitle "Jeremy Taylor",
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/jeremy-taylor.jpg",
-  :session/time #time/inst "2024-09-19T09:50:00Z",
+  :session/time #time/zdt "2024-09-19T09:50+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -138,17 +139,17 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/lovro-lugovic-sung-shik-jongmans.png",
-  :session/time #time/inst "2024-09-18T17:00:00Z",
+  :session/time #time/zdt "2024-09-18T17:00+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
-  "Over the past five years, the European Commission has invested over 250M EUR in its **Next Generation Internet** initiative. As part of this ambitious program, we are developing a new free and open-source core technology for distributed systems -- in Clojure, of course.\r\n\r\nThe idea behind our project, called Klor (https://github.com/lovrosdu/klor), is to use a new domain-specific language (DSL) -- embedded in Clojure -- to write distributed systems as **choreographies**. A choreography is very similar to any \"normal\" Clojure program, except that it has a special message-passing primitive for processes to communicate: instead of the usual two `send` and `receive` primitives, there is just one `communicate` primitive that embodies a whole end-to-end transmission. The great thing about this is that bugs like communication mismatches and deadlocks -- very hard to diagnose and fix! -- become syntactically impossible to write in the first place. The choreography essentially acts as a single source of truth and is used to automatically generate the implementations of the processes in the system. `communicate` still compiles to a `send` and a corresponding `receive` behind the scenes, but it all happens completely transparently to the programmer.\r\n\r\nKlor is implemented on top of the `clojure.tools.analyzer` compiler framework and hooks into Clojure's macro system to perform all of its analysis and code generation at macroexpansion-time, imposing virtually no run-time cost on the user. It uses a lightweight \"type\" system to track the locations of values and knowledge shared between the processes, and supports standard higher-order features that help with composition and modularity. Still, Klor does not impose any hard restrictions and embraces the interactive and dynamically typed spirit of Clojure: there is seamless interoperability with external Clojure code and standard REPL-based development is highly encouraged. All in all, Clojure's excellent support for concurrency, host interop and mature tooling makes it a great foundation to use for Klor.\r\n\r\nThe aim of this talk is to demonstrate Klor's usage and highlight some of the interesting implementation challenges we faced.\n\n## Speakers\n\n### Lovro Lugović\n\nLovro Lugović is a C++ software engineer turned Lisp hacker and a recent PhD graduate from the University of Southern Denmark, specializing in programming languages and concurrency theory. He likes functional programming, designing domain-specific languages and solving problems using a combination thereof.\n### Sung-Shik Jongmans\n\nSung-Shik Jongmans is language engineer at Swat.engineering. Before, he was associate professor at Open University of the Netherlands and researcher at the Dutch National Research Institute for Mathematics and Computer Science. His interests include programming languages, concurrency theory, and software engineering. And Clojure, of course."}
+  "Over the past five years, the European Commission has invested over 250M EUR in its **Next Generation Internet** initiative. As part of this ambitious program, we are developing a new free and open-source core technology for distributed systems -- in Clojure, of course.\n\n## Speakers\n\n### Lovro Lugović\n\nLovro Lugović is a C++ software engineer turned Lisp hacker and a recent PhD graduate from the University of Southern Denmark, specializing in programming languages and concurrency theory. He likes functional programming, designing domain-specific languages and solving problems using a combination thereof.\n### Sung-Shik Jongmans\n\nSung-Shik Jongmans is language engineer at Swat.engineering. Before, he was associate professor at Open University of the Netherlands and researcher at the Dutch National Research Institute for Mathematics and Computer Science. His interests include programming languages, concurrency theory, and software engineering. And Clojure, of course."}
  {:session/title "An introduction to application.garden",
   :session/subtitle "Jack Rusher, Paolo Holinski",
   :session/type :session.type/workshop,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/jack-rusher-paolo-holinski.png",
-  :session/time #time/inst "2024-09-18T15:00:00Z",
+  :session/time #time/zdt "2024-09-18T15:00+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/hal5,
   :session/description
@@ -159,7 +160,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/mitesh-shah.png",
-  :session/time #time/inst "2024-09-18T16:10:00Z",
+  :session/time #time/zdt "2024-09-18T16:10+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -170,7 +171,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/pawel-stroinski.jpeg",
-  :session/time #time/inst "2024-09-19T10:30:00Z",
+  :session/time #time/zdt "2024-09-19T10:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -180,7 +181,7 @@
   :session/type :session.type/talk,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/felix-alm.jpeg",
-  :session/time #time/inst "2024-09-19T11:30:00Z",
+  :session/time #time/zdt "2024-09-19T11:30+02:00[Europe/Brussels]",
   :session/duration "PT30M",
   :session/location :location.type/depot,
   :session/description
@@ -190,7 +191,7 @@
   :session/type :session.type/keynote,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/lu-wilson.png",
-  :session/time #time/inst "2024-09-18T09:35:00Z",
+  :session/time #time/zdt "2024-09-18T09:35+02:00[Europe/Brussels]",
   :session/duration "PT45M",
   :session/location :location.type/depot,
   :session/description
@@ -200,7 +201,7 @@
   :session/type :session.type/keynote,
   :session/image
   "https://2024.heartofclojure.eu/img/speakers/anna-colom.png",
-  :session/time #time/inst "2024-09-18T11:05:00Z",
+  :session/time #time/zdt "2024-09-18T11:05+02:00[Europe/Brussels]",
   :session/duration "PT45M",
   :session/location :location.type/depot,
   :session/description

diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -125,19 +125,24 @@ body {
 }
 
 .sessions-capacity_gauge {
-  display: flex;
   aspect-ratio: 1 / 1;
+  position: relative;
   --sessions-arc-thickness: 10%;
 }
 
+.sessions-capacity_gauge >* {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .sessions-capacity_gauge .sessions-arc {
   width: 100%;
 }
 
 .sessions-capacity_gauge .img {
   width: 100%;
   padding: var(--sessions-arc-thickness);
-  margin-left: -100%;
 }
 
 .sessions-capacity_gauge .img >* {
@@ -156,7 +161,6 @@ body {
 }
 
 .sessions-session_card .title {
-  margin-bottom: var(--size-3);
   font-size: var(--size-3);
 }
 
@@ -171,6 +175,7 @@ body {
 
 .sessions-session_card .guage {
   padding: var(--size-2);
+  align-self: center;
 }
 
 .sessions-session_card .type {
@@ -180,11 +185,11 @@ body {
   font-variant: small-caps;
   writing-mode: vertical-lr;
   transform: rotate(180deg);
+  background-color: var(--sessions-session-type-color);
 }
 
 .sessions-session_card .sessions-capacity_gauge {
   width: 100px;
-  margin-right: var(--size-3);
 }
 
 .sessions-session_card .details {

diff --git a/src/co/gaiwan/compass/db.clj b/src/co/gaiwan/compass/db.clj
@@ -10,6 +10,8 @@
 
 (declare transact)
 
+(def event-time-zone (java.time.ZoneId/of "Europe/Brussels"))
+
 (defmethod ig/init-key :compass/db [_ {:keys [url]}]
   (d/create-database url)
   (let [conn (d/connect url)]
@@ -43,13 +45,18 @@
     (instance? java.time.Instant value)
     (java.util.Date/from value)
 
+    (instance? java.time.ZonedDateTime value)
+    (java.util.Date/from (.toInstant ^java.time.ZonedDateTime value))
+
     :else
     value))
 
 (defn munge-from-db [value]
   (cond
     (instance? java.util.Date value)
-    (.toInstant ^java.util.Date value)
+    (java.time.ZonedDateTime/ofInstant
+     (.toInstant ^java.util.Date value)
+     event-time-zone)
 
     (instance? datomic.query.EntityMap value)
     (->munged-entity value)

diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
@@ -2,8 +2,9 @@
   "Views and components (hiccup/ornament) related to sessions"
   {:ornament/prefix "sessions-"}
   (:require
+   [clojure.string :as str]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
-   [co.gaiwan.compass.http.oauth :as oauth]
+   [java-time.api :as time]
    [lambdaisland.ornament :as o]))
 
 (o/defprop --arc-degrees "240deg")
@@ -21,56 +22,65 @@
 
 (o/defstyled capacity-gauge :div
   "Image with an arc around it to indicate how full a session is."
-  :flex :aspect-square
+  :aspect-square
+  {:position "relative"}
+  [:>* {:position "absolute" :top 0 :left 0}]
   [arc :w-full]
   {--arc-thickness "10%"}
   [:.img :w-full
    {:padding --arc-thickness
-    :margin-left "-100%"}
+    #_#_:margin-left "-100%"}
    [:>* :w-full :aspect-square :rounded-full
     {:background-size "contain"}]]
   ([{:keys [capacity image]}]
    [:<> {:style {--arc-degrees (str (* 360.0 capacity) "deg")}}
+    [arc {:style {--arc-degrees "360deg"
+                  --arc-color "white"}}]
     [arc]
+
     [:div.img
      [:div
       {:style {:background-image image}}]]]))
 
+(o/defprop --session-type-color)
+
 (o/defstyled session-card :div
   :flex :gap-3
   :surface-2
   :shadow-4
   :boder :border-solid :border-surface-3
-  [:.title :mb-3 :font-size-3]
+  [:.title :font-size-3]
   [:.datetime :flex-col :items-center :justify-center :font-size-3 :font-bold]
-  [:.guage :p-2]
+  [:.guage :p-2 :self-center]
   [:.type :font-bold
    :p-1
    :text-center
    :small-caps
    {:writing-mode "vertical-lr"
-    :transform "rotate(180deg)"}]
-  [capacity-gauge :w-100px :mr-3]
+    :transform "rotate(180deg)"
+    :background-color --session-type-color}]
+  [capacity-gauge :w-100px]
   [:.details :flex-col :py-2]
-  ([{:session/keys [type title subtitle organized time location image]}]
+  ([{:session/keys [type title subtitle organized time location image] :as s}]
    [:<>
-    [:div.type (:sesion.type/name type)]
-    [:div.datetime (str time)]
-    #_[:div.datetime
-       [:div (subs day 0 3)]
-       [:div date]
-       [:div time]]
+    {:style {--session-type-color (:session.type/color type)}}
+    [:div.type (:session.type/name type)]
     [:div.guage
      [capacity-gauge {:capacity (rand)
                       :image (if image
                                (str "url(" image ")")
                                (str "var(--gradient-" (inc (rand-int 7)) ")"))}]]
+    [:div.datetime
+     [:div
+      (subs (str/capitalize (str (time/day-of-week time))) 0 3) " "]
+     [:div (time/format "dd.MM" time)]
+     [:div (str (time/truncate-to (time/local-time time) :minutes))]]
     [:div.details
      [:h2.title title]
-     [:p.subtitle subtitle]
+     [:h3.subtitle subtitle]
 
      [:div.loc (:location/name location)]
-     [:p.host "Organized by " organized]]]))
+     #_[:p.host "Organized by " organized]]]))
 
 ;; Create / edit
 
@@ -118,3 +128,4 @@
       [:input {:id "published" :name "published?" :type "checkbox"}]]
 
      [:input {:type "submit" :value "Create"}]]]))
+