diff options
author | Griffin Smith <grfn@gws.fyi> | 2021-12-26T16·01-0500 |
---|---|---|
committer | clbot <clbot@tvl.fyi> | 2021-12-26T16·06+0000 |
commit | 66a0334c782fa0bd24f8723a4bfa4d29d9acab26 (patch) | |
tree | 0aa6356427c2f4982e3f4297096412caa18d1ccb /users/grfn/bbbg | |
parent | 24815f58fe219916b2a48ac66d0ac0d17f9bc1c9 (diff) |
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>
Diffstat (limited to 'users/grfn/bbbg')
-rw-r--r-- | users/grfn/bbbg/src/bbbg/db/attendee.clj | 4 | ||||
-rw-r--r-- | users/grfn/bbbg/src/bbbg/handlers/attendees.clj | 41 | ||||
-rw-r--r-- | users/grfn/bbbg/src/bbbg/handlers/core.clj | 2 | ||||
-rw-r--r-- | users/grfn/bbbg/src/bbbg/styles.clj | 43 |
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"})] |