Arne/next

deps.edn

@@ -32,8 +32,8 @@
 
   potemkin/potemkin {:mvn/version "0.4.7"} ; def-map-type
 
-  ;; Markdown 
-  markdown-to-hiccup {:mvn/version "0.6.2"}}
+  ;; Markdown
+  markdown-to-hiccup/markdown-to-hiccup {:mvn/version "0.6.2"}}
 
  :aliases
  {:dev

resources/public/css/styles.css

@@ -1,16 +1,24 @@
 :where(html) {
-  --hoc-pink: #e25f7d;
   --size-0: 0;
-  --sessions-arc-thickness: 30px;
+  --co-gaiwan-compass-html-components--toggle-radius-left: 0.5rem;
   --sessions-arc-color: var(--lime-5);
+  --hoc-pink: #e25f7d;
+  --hoc-pink-3: var(--hoc-pink);
   --sessions-arc-degrees: 240deg;
+  --profiles-arc-thickness: 30px;
+  --sessions-arc-thickness: 30px;
+  --hoc-pink-1: #e7879d;
+  --hoc-pink-2: #cd4e6a;
+  --hoc-pink-4: #c0415b;
+  --co-gaiwan-compass-html-components--toggle-radius-right: 0.5rem;
 }
 
 :where(html) {
   --talk-color: var(--blue-2);
   --workshop-color: var(--teal-2);
   --office-hours-color: var(--red-2);
   --activity-color: var(--red-2);
+  --highlight: var(--hoc-pink-1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -20,6 +28,7 @@
     --workshop-color: var(--teal-8);
     --office-hours-color: var(--red-9);
     --activity-color: var(--red-9);
+    --highlight: var(--hoc-pink-4);
   }
 
 }
@@ -29,7 +38,6 @@ body.menu-open .co_gaiwan_compass_html_navigation__menu_panel {
 }
 
 body {
-  padding: 0.5rem;
   max-width: 100vw;
 }
 
@@ -38,6 +46,10 @@ body #app {
   margin: 0 auto;
 }
 
+body #app >main {
+  padding: var(--size-2);
+}
+
 ul, ol {
   list-style-type: none;
   margin: var(--size-0);
@@ -117,24 +129,54 @@ body {
   font-size: var(--font-size-3);
 }
 
-.htmx-request.session-card-pulse {
-  opacity: 0.5;
-  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.co_gaiwan_compass_html_components__toggle_button {
+  color: var(--text-2);
+}
 
-  /* don't know if this makes sense or could be delayed. */
-  background-color: var(--sessions-session-type-color);
-  /* It looks okay for long requests */
-  /* ... incidentally: perhaps this is even a better participating indicator than the check mark */
+.co_gaiwan_compass_html_components__toggle_button input {
+  display: none;
 }
 
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+.co_gaiwan_compass_html_components__toggle_button >.btn {
+  width: 100%;
+  border-top-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
+  border-bottom-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
+  border-top-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
+  border-bottom-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
+}
+
+.co_gaiwan_compass_html_components__toggle_button input:checked ~ .btn {
+  font-weight: 600;
+  color: var(--text-1);
+  background-color: var(--highlight);
+}
+
+.co_gaiwan_compass_html_components__toggle_group {
+  display: flex;
+  flex-direction: row;
+  --co-gaiwan-compass-html-components--toggle-radius-left: 0;
+  --co-gaiwan-compass-html-components--toggle-radius-right: 0;
+}
+
+.co_gaiwan_compass_html_components__toggle_group :first-child > .btn {
+  --co-gaiwan-compass-html-components--toggle-radius-left: 0.5em;
+}
+
+.co_gaiwan_compass_html_components__toggle_group :last-child > .btn {
+  --co-gaiwan-compass-html-components--toggle-radius-right: 0.5em;
+}
+
+.filters-filter_section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-1);
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
+}
+
+.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
+  font-weight: 400;
+  flex-grow: 1;
 }
 
 .sessions-arc {
@@ -192,13 +234,17 @@ body {
   background-position: 50% 50%;
 }
 
-.sessions-session_actions {
+.sessions-session_card_actions {
   display: flex;
   justify-content: flex-end;
   width: 100%;
   margin-top: var(--size-2);
 }
 
+.sessions-session_image_PLUS_guage .sessions-capacity_gauge {
+  width: 100px;
+}
+
 .sessions-session_card {
   display: flex;
   gap: var(--size-1);
@@ -249,7 +295,7 @@ body {
   background-color: var(--sessions-session-type-color);
 }
 
-.sessions-session_card .sessions-session_actions {
+.sessions-session_card .sessions-session_card_actions {
   text-align: right;
 }
 
@@ -301,19 +347,19 @@ body {
   gap: var(--size-2);
 }
 
-.home-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-1);
-  margin-top: var(--size-3);
-  margin-bottom: var(--size-3);
+.profiles-image_frame .img {
+  width: 100%;
+  padding: var(--profiles-arc-thickness);
 }
 
-.home-filters button, .home-filters .btn {
-  font-weight: 400;
-  flex-grow: 1;
+.profiles-image_frame .img >* {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px;
+  background-size: cover;
+  background-position: 50% 50%;
 }
 
-.sessions-session_image_PLUS_guage .sessions-capacity_gauge {
+.profiles-profile_detail .profiles-image_frame {
   width: 100px;
 }

resources/public/js/cx.js

@@ -8,13 +8,31 @@ function handle_cx_toggle(e) {
   target.classList.toggle(klass);
 }
 
-function add_handle_cx_toggle() {
+function ensure_cx_toggle() {
   document.querySelectorAll('[cx-toggle]').forEach((el) => {
     el.removeEventListener('click', handle_cx_toggle);
     el.addEventListener('click', handle_cx_toggle);
   });
 }
 
-addEventListener('DOMContentLoaded', add_handle_cx_toggle);
-addEventListener('htmx:afterSwap', add_handle_cx_toggle);
-addEventListener('popstate', () => setTimeout(add_handle_cx_toggle, 0));
+function showModal(e) {
+  window.modal.showModal()
+}
+
+function ensure_show_modal() {
+  document.getElementById("modal").removeEventListener('htmx:afterSwap', showModal)
+  document.getElementById("modal").addEventListener('htmx:afterSwap', showModal)
+}
+
+function apply_handlers() {
+  ensure_cx_toggle()
+  ensure_show_modal()
+}
+
+addEventListener('DOMContentLoaded', apply_handlers);
+addEventListener('htmx:afterSwap', (_) => apply_handlers());
+addEventListener('popstate', () => setTimeout(apply_handlers, 0));
+
+// Local Variables:
+// js-indent-level: 2
+// End:

src/co/gaiwan/compass/css/tokens.clj

@@ -10,8 +10,14 @@
 
 (o/defprop --size-0 0)
 (o/defprop --text-1)
+(o/defprop --text-2)
 
 (o/defprop --hoc-pink "#e25f7d")
+(o/defprop --hoc-pink-1 "#e7879d")
+(o/defprop --hoc-pink-2 "#cd4e6a")
+(o/defprop --hoc-pink-3 --hoc-pink)
+(o/defprop --hoc-pink-4 "#c0415b")
+
 (o/defprop --surface-1)
 (o/defprop --surface-2)
 (o/defprop --surface-3)
@@ -22,17 +28,21 @@
 (o/defprop --office-hours-color)
 (o/defprop --activity-color)
 
+(o/defprop --highlight)
+
 (o/defrules session-colors
   [":where(html)"
    {--talk-color         --blue-2
     --workshop-color     --teal-2
     --office-hours-color --red-2
-    --activity-color     --red-2}]
+    --activity-color     --red-2
+    --highlight          --hoc-pink-1}]
 
   (gs/at-media
    {:prefers-color-scheme 'dark}
    [":where(html)"
     {--talk-color         --blue-9
      --workshop-color     --teal-8
      --office-hours-color --red-9
-     --activity-color     --red-9}]))
+     --activity-color     --red-9
+     --highlight          --hoc-pink-4}]))

src/co/gaiwan/compass/db/queries.clj

@@ -0,0 +1,14 @@
+(ns co.gaiwan.compass.db.queries
+  (:require
+   [co.gaiwan.compass.db :as db]))
+
+(defn all-sessions
+  []
+  (sort-by :session/time
+           (db/q
+            '[:find
+              [(pull ?e [* {:session/type [*]
+                            :session/location [*]}]) ...]
+              :where
+              [?e :session/title]]
+            (db/db))))

src/co/gaiwan/compass/html/auth.clj

@@ -0,0 +1,14 @@
+(ns co.gaiwan.compass.html.auth
+  (:require
+   [co.gaiwan.compass.html.graphics :as graphics]
+   [co.gaiwan.compass.http.oauth :as oauth]
+   [lambdaisland.ornament :as o]))
+
+(o/defstyled popup :div
+  ([next-url]
+   [:<>
+    [graphics/cross {:on-click "window.modal.close()"}]
+    [:p "Please authenticate using Discord to make full use of the Compass app. This will also give you access to our Discord server where you can chat with speakers and attendees."]
+    [:a {:href (oauth/flow-init-url (if next-url
+                                      {:redirect-url next-url}
+                                      {}))} "Login with discord"]]))

src/co/gaiwan/compass/html/components.clj

@@ -0,0 +1,49 @@
+(ns co.gaiwan.compass.html.components
+  "Generic components"
+  (:require
+   [co.gaiwan.compass.css.tokens :as t]
+   [lambdaisland.ornament :as o]))
+
+(o/defprop --toggle-radius-left "0.5rem")
+(o/defprop --toggle-radius-right "0.5rem")
+
+(o/defstyled toggle-button :label
+  "Toggle implemented as a checkbox (can also be used as a radio button)."
+  {:color t/--text-2}
+  [:input :hidden]
+  [:>.btn :w-full
+   {:border-top-left-radius     --toggle-radius-left
+    :border-bottom-left-radius  --toggle-radius-left
+    :border-top-right-radius    --toggle-radius-right
+    :border-bottom-right-radius --toggle-radius-right}]
+  ["input:checked ~ .btn"
+   :font-semibold
+   {:color            t/--text-1
+    :background-color t/--highlight}]
+  ([props & children]
+   (let [id (:id props)]
+     [:<>
+      {:for id}
+      [:input
+       (merge
+        {:type    "checkbox"
+         :name    id
+         :value   id
+         :checked (when (:checked? props) "checked")}
+        (dissoc props :checked?))]
+      [:div.btn
+       children]])))
+
+(o/defstyled toggle-group :div
+  :flex :flex-row
+  "Multiple toggle buttons that act as a group (implemented as radio buttons)"
+  {--toggle-radius-left 0
+   --toggle-radius-right 0}
+  [":first-child > .btn" {--toggle-radius-left "0.5em"}]
+  [":last-child > .btn" {--toggle-radius-right "0.5em"}]
+  ([props]
+   (for [[k v] (:options props)]
+     [toggle-button (assoc (dissoc props :options :value)
+                           :id (name k)
+                           :type "radio"
+                           :checked? (= (:value props) k)) v])))