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/src/bbbg/styles.clj | |
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/src/bbbg/styles.clj')
-rw-r--r-- | users/grfn/bbbg/src/bbbg/styles.clj | 43 |
1 files changed, 35 insertions, 8 deletions
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"})] |