feat(grfn/bbbg): Attendee table responsive on mobile r/3419

Change-Id: Ib299082bc2a697da044ee5b7813d0f4ca0b37cac
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4637
Tested-by: BuildkiteCI
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>

4 files changed, 65 insertions, 25 deletions

diff --git a/users/grfn/bbbg/src/bbbg/db/attendee.clj b/users/grfn/bbbg/src/bbbg/db/attendee.clj
index 91e13e07f860..d5d6011e2c10 100644
--- a/users/grfn/bbbg/src/bbbg/db/attendee.clj
+++ b/users/grfn/bbbg/src/bbbg/db/attendee.clj
@@ -60,8 +60,8 @@
                        (db/process-key-map :attendee)
                        (u/map-keys keyword))
                  attendees)
-    :upsert {:on-conflict [:meetup-user-id]
-             :do-update-set [:meetup-name]}
+    :upsert [[:on-conflict [:meetup-user-id]]
+             [:do-update-set [:meetup-name]]]
     :returning [:id :meetup-user-id]}))
 
 (comment
diff --git a/users/grfn/bbbg/src/bbbg/handlers/attendees.clj b/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
index 99815ab6aae8..cc233a0408cc 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
@@ -46,23 +46,34 @@
                      attendees)
            :let [id (::attendee/id attendee)]]
        [:tr
-        [:td (::attendee/meetup-name attendee)]
-        [:td (::attendee/discord-name attendee)]
-        [:td (:events-rsvpd attendee)]
-        [:td (:events-attended attendee)]
-        [:td (:no-shows attendee)]
-        (if-let [last-check (:last-check attendee)]
-          [:td (str "✔️ "(-> last-check
+        [:td.attendee-name (::attendee/meetup-name attendee)]
+        [:td
+         [:label.mobile-label "Discord Name: "]
+         (or (not-empty (::attendee/discord-name attendee))
+             "—")]
+        [:td
+         [:label.mobile-label "Events RSVPd: "]
+         (:events-rsvpd attendee)]
+        [:td
+         [:label.mobile-label "Events Attended: "]
+         (:events-attended attendee)]
+        [:td
+         [:label.mobile-label "No-shows: "]
+         (:no-shows attendee)]
+        [:td
+         [:label.mobile-label "Last Vaccination Check: "]
+         (if-let [last-check (:last-check attendee)]
+           (str "✔️ "(-> last-check
                         ::attendee-check/checked-at
                         format-date)
-                    ", by "
-                    (get-in last-check [:user ::user/username]))]
-          [:td
-           [:span {:title "Not Checked"}
-            "❌"]
-           " "
-           [:a {:href (str "/attendees/" id "/checks/edit")}
-            "Edit"]])
+                ", by "
+                (get-in last-check [:user ::user/username]))
+           (list
+            [:span {:title "Not Checked"}
+             "❌"]
+            " "
+            [:a {:href (str "/attendees/" id "/checks/edit")}
+             "Edit"] ))]
         (if (= edit-notes id)
           [:td
            [:form.organizer-notes {:method :post
diff --git a/users/grfn/bbbg/src/bbbg/handlers/core.clj b/users/grfn/bbbg/src/bbbg/handlers/core.clj
index e08b7a1e7038..caa679ee873f 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/core.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/core.clj
@@ -64,6 +64,8 @@
      [:html {:lang "en"}
       [:head
        [:meta {:charset "UTF-8"}]
+       [:meta {:name "viewport"
+               :content "width=device-width,initial-scale=1"}]
        [:title (if title
                  (str title " - BBBG")
                  "BBBG")]
diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj
index 1c495faa285e..026fb500cc99 100644
--- a/users/grfn/bbbg/src/bbbg/styles.clj
+++ b/users/grfn/bbbg/src/bbbg/styles.clj
@@ -4,7 +4,8 @@
    [garden.color :as color]
    [garden.compiler :refer [compile-css]]
    [garden.def :refer [defstyles]]
-   [garden.selectors :refer [& active attr= descendant hover focus nth-child]]
+   [garden.selectors
+    :refer [& active attr= descendant focus hover nth-child]]
    [garden.stylesheet :refer [at-media]]
    [garden.units :refer [px]]))
 
@@ -37,13 +38,20 @@
 ;;;
 
 (def content-width (px 1200))
+(def mobile-width (px 480))
 
-(defn not-mobile [& rules]
+(defn desktop [& rules]
   (at-media
    {:screen true
     :min-width content-width}
-   [:&
-    rules]))
+   [:& rules]))
+
+(defn mobile [& rules]
+  (at-media
+   {:screen true
+    :max-width mobile-width}
+   [:& rules]))
+
 
 ;;;
 
@@ -56,7 +64,7 @@
      :flex-direction :row
      :list-style :none}
 
-    (not-mobile
+    (desktop
      {:width content-width
       :margin "0 auto"})]
 
@@ -238,7 +246,7 @@
 (defstyles signup-page
   [:.signup-page
    {:margin "1rem"}
-   (not-mobile
+   (desktop
     {:width content-width
      :margin "1rem auto"})]
 
@@ -281,7 +289,26 @@
   [:.attendee-checks-form
    {:max-width "340px"
     :margin-left "auto"
-    :margin-right "auto"}])
+    :margin-right "auto"}]
+
+  [:.attendees
+   (mobile
+    {:display :block}
+
+    [:thead {:display :none}]
+    [:tbody :tr :td
+     {:display :block}]
+
+    [:tr
+     {:background-color silver
+      :padding "0.5rem 0.8rem"
+      :margin-bottom "1rem"
+      :border-radius "3px"}]
+    [:td {:padding "0.2rem 0"}]
+
+    [:.attendee-name
+     {:font-weight "bold"
+      :margin-bottom "0.9rem"}])])
 
 (defstyles styles
   forms
@@ -308,7 +335,7 @@
     :margin-left "1rem"
     :margin-right "1rem"}
 
-   (not-mobile
+   (desktop
     {:width content-width
      :margin-left "auto"
      :margin-right "auto"})]