From 4ad4e7346b53209979244dbd558ca08ab2bb50ce Mon Sep 17 00:00:00 2001 From: Griffin Smith Date: Fri, 24 Dec 2021 13:24:44 -0500 Subject: feat(grfn/bbbg): Begin styles Start working on styles for the app, beginning with a global stylesheet/reset and styles for the nav. Change-Id: Ie15e549d7bb4e0116582f4099752aa2503eb9ce7 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4583 Reviewed-by: grfn Autosubmit: grfn Tested-by: BuildkiteCI --- users/grfn/bbbg/resources/base.css | 152 +++++++++++++++++++++ users/grfn/bbbg/resources/main.js | 49 ------- .../public/fonts/montserrat-v15-latin-500.woff | Bin 0 -> 23576 bytes .../public/fonts/montserrat-v15-latin-500.woff2 | Bin 0 -> 19272 bytes .../fonts/montserrat-v15-latin-500italic.woff | Bin 0 -> 24056 bytes .../fonts/montserrat-v15-latin-500italic.woff2 | Bin 0 -> 19624 bytes .../public/fonts/montserrat-v15-latin-600.woff | Bin 0 -> 23628 bytes .../public/fonts/montserrat-v15-latin-600.woff2 | Bin 0 -> 19264 bytes .../public/fonts/montserrat-v15-latin-800.woff | Bin 0 -> 23872 bytes .../public/fonts/montserrat-v15-latin-800.woff2 | Bin 0 -> 19440 bytes .../fonts/montserrat-v15-latin-800italic.woff | Bin 0 -> 24404 bytes .../fonts/montserrat-v15-latin-800italic.woff2 | Bin 0 -> 19836 bytes .../public/fonts/montserrat-v15-latin-italic.woff | Bin 0 -> 24012 bytes .../public/fonts/montserrat-v15-latin-italic.woff2 | Bin 0 -> 19660 bytes .../public/fonts/montserrat-v15-latin-regular.woff | Bin 0 -> 23480 bytes .../fonts/montserrat-v15-latin-regular.woff2 | Bin 0 -> 19172 bytes users/grfn/bbbg/resources/public/main.js | 49 +++++++ users/grfn/bbbg/resources/public/robots.txt | 2 + users/grfn/bbbg/resources/robots.txt | 2 - users/grfn/bbbg/src/bbbg/handlers/core.clj | 21 +-- users/grfn/bbbg/src/bbbg/styles.clj | 85 +++++++++++- users/grfn/bbbg/src/bbbg/web.clj | 17 ++- 22 files changed, 307 insertions(+), 70 deletions(-) create mode 100644 users/grfn/bbbg/resources/base.css delete mode 100644 users/grfn/bbbg/resources/main.js create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff create mode 100644 users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 create mode 100644 users/grfn/bbbg/resources/public/main.js create mode 100644 users/grfn/bbbg/resources/public/robots.txt delete mode 100644 users/grfn/bbbg/resources/robots.txt (limited to 'users/grfn/bbbg') diff --git a/users/grfn/bbbg/resources/base.css b/users/grfn/bbbg/resources/base.css new file mode 100644 index 0000000000..c86c3f24f0 --- /dev/null +++ b/users/grfn/bbbg/resources/base.css @@ -0,0 +1,152 @@ +/* montserrat-italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 400; + src: local("Montserrat Italic"), local("Montserrat-Italic"), + url("/fonts/montserrat-v15-latin-italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-regular - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 400; + src: local("Montserrat Regular"), local("Montserrat-Regular"), + url("/fonts/montserrat-v15-latin-regular.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-500 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 500; + src: local("Montserrat Medium"), local("Montserrat-Medium"), + url("/fonts/montserrat-v15-latin-500.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-500italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 500; + src: local("Montserrat Medium Italic"), local("Montserrat-MediumItalic"), + url("/fonts/montserrat-v15-latin-500italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-500italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-600 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 600; + src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), + url("/fonts/montserrat-v15-latin-600.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-800 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 800; + src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"), + url("/fonts/montserrat-v15-latin-800.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-800italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 800; + src: local("Montserrat ExtraBold Italic"), local("Montserrat-ExtraBoldItalic"), + url("/fonts/montserrat-v15-latin-800italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-800italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +body { + width: 100%; + font-family: "Montserrat", Helvetica, sans-serif; + margin: 0; + box-sizing: border-box; +} + +*, +::before, +::after { + box-sizing: border-box; +} + +ul, +ol { + padding: 0; +} + +body, +h1, +h2, +h3, +h4, +p, +ul, +ol, +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +body { + min-height: 100vh; + scroll-behavior: smooth; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +ul[class], +ol[class] { + list-style: none; +} + +a:not([class]) { + text-decoration-skip-ink: auto; +} + +img { + max-width: 100%; + display: block; +} + +article > * + * { + margin-top: 1em; +} + +input, +button, +textarea, +select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/users/grfn/bbbg/resources/main.js b/users/grfn/bbbg/resources/main.js deleted file mode 100644 index d4752f1141..0000000000 --- a/users/grfn/bbbg/resources/main.js +++ /dev/null @@ -1,49 +0,0 @@ -window.onload = () => { - console.log("loaded"); - const input = document.getElementById("name-autocomplete"); - if (input != null) { - const eventID = document.getElementById("event-id").value; - - const autocomplete = new autoComplete({ - selector: "#name-autocomplete", - placeHolder: "Enter your name", - data: { - src: async (query) => { - const resp = await fetch( - `/attendees.json?q=${query}&event_id=${eventID}&attended=false` - ); - console.log("got resp"); - const { results } = await resp.json(); - return results; - }, - keys: ["bbbg.attendee/meetup-name"], - }, - resultItem: { - highlight: { - render: true, - }, - }, - }); - - input.addEventListener("selection", function (event) { - const attendee = event.detail.selection.value; - event.target.value = attendee["bbbg.attendee/meetup-name"]; - - const attendeeID = attendee["bbbg.attendee/id"]; - document.getElementById("attendee-id").value = attendeeID; - document.getElementById("signup-form").removeAttribute("disabled"); - document - .getElementById("signup-form") - .querySelector('input[type="submit"]') - .removeAttribute("disabled"); - }); - } - - document.querySelectorAll("form").forEach((form) => { - form.onsubmit = (e) => { - if (e.target.attributes.disabled) { - e.preventDefault(); - } - }; - }); -}; diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff new file mode 100644 index 0000000000..1c83d8518d Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 new file mode 100644 index 0000000000..9dc5c7f158 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff new file mode 100644 index 0000000000..71476d858f Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 new file mode 100644 index 0000000000..0fb9838c9d Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff new file mode 100644 index 0000000000..e7f8a31ba3 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 new file mode 100644 index 0000000000..29cc1a9734 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff new file mode 100644 index 0000000000..79203dd780 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 new file mode 100644 index 0000000000..0abb707aed Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff new file mode 100644 index 0000000000..65415571a7 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 new file mode 100644 index 0000000000..674e6eabe7 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff new file mode 100644 index 0000000000..67f1e85379 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 new file mode 100644 index 0000000000..469aede09c Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff new file mode 100644 index 0000000000..676a065e24 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff differ diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 new file mode 100644 index 0000000000..70788c2732 Binary files /dev/null and b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 differ diff --git a/users/grfn/bbbg/resources/public/main.js b/users/grfn/bbbg/resources/public/main.js new file mode 100644 index 0000000000..d4752f1141 --- /dev/null +++ b/users/grfn/bbbg/resources/public/main.js @@ -0,0 +1,49 @@ +window.onload = () => { + console.log("loaded"); + const input = document.getElementById("name-autocomplete"); + if (input != null) { + const eventID = document.getElementById("event-id").value; + + const autocomplete = new autoComplete({ + selector: "#name-autocomplete", + placeHolder: "Enter your name", + data: { + src: async (query) => { + const resp = await fetch( + `/attendees.json?q=${query}&event_id=${eventID}&attended=false` + ); + console.log("got resp"); + const { results } = await resp.json(); + return results; + }, + keys: ["bbbg.attendee/meetup-name"], + }, + resultItem: { + highlight: { + render: true, + }, + }, + }); + + input.addEventListener("selection", function (event) { + const attendee = event.detail.selection.value; + event.target.value = attendee["bbbg.attendee/meetup-name"]; + + const attendeeID = attendee["bbbg.attendee/id"]; + document.getElementById("attendee-id").value = attendeeID; + document.getElementById("signup-form").removeAttribute("disabled"); + document + .getElementById("signup-form") + .querySelector('input[type="submit"]') + .removeAttribute("disabled"); + }); + } + + document.querySelectorAll("form").forEach((form) => { + form.onsubmit = (e) => { + if (e.target.attributes.disabled) { + e.preventDefault(); + } + }; + }); +}; diff --git a/users/grfn/bbbg/resources/public/robots.txt b/users/grfn/bbbg/resources/public/robots.txt new file mode 100644 index 0000000000..1f53798bb4 --- /dev/null +++ b/users/grfn/bbbg/resources/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/users/grfn/bbbg/resources/robots.txt b/users/grfn/bbbg/resources/robots.txt deleted file mode 100644 index 1f53798bb4..0000000000 --- a/users/grfn/bbbg/resources/robots.txt +++ /dev/null @@ -1,2 +0,0 @@ -User-agent: * -Disallow: / diff --git a/users/grfn/bbbg/src/bbbg/handlers/core.clj b/users/grfn/bbbg/src/bbbg/handlers/core.clj index d8359bc188..4bb7cf6290 100644 --- a/users/grfn/bbbg/src/bbbg/handlers/core.clj +++ b/users/grfn/bbbg/src/bbbg/handlers/core.clj @@ -23,18 +23,21 @@ (defn global-nav [] [:nav.global-nav [:ul + [:li [:a {:href "/events"} + "Events"]] (when *authenticated?* [:li [:a {:href "/attendees"} "Attendees"]]) - [:li [:a {:href "/events"} - "Events"]] - (if *authenticated?* - [:li [:form {:method :post - :action "/auth/sign-out"} - [:input {:type "submit" - :value "Sign Out"}]]] - [:li [:a {:href "/auth/discord"} - "Sign In"]])]]) + [:li.spacer] + [:li + (if *authenticated?* + [:form.link-form + {:method :post + :action "/auth/sign-out"} + [:input {:type "submit" + :value "Sign Out"}]] + [:a {:href "/auth/discord"} + "Sign In"])]]]) (defn render-page [opts & body] (let [[{:keys [title]} body] diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj index 07ed87ba1a..8e39f5c0e6 100644 --- a/users/grfn/bbbg/src/bbbg/styles.clj +++ b/users/grfn/bbbg/src/bbbg/styles.clj @@ -1,9 +1,88 @@ +;; -*- eval: (rainbow-mode) -*- (ns bbbg.styles - (:require [garden.def :refer [defstyles]] - [garden.compiler :refer [compile-css]])) + (:require + [garden.compiler :refer [compile-css]] + [garden.def :refer [defstyles]] + [garden.selectors :refer [attr= visited hover active & descendant]])) + +(def black "#342e37") + +(def silver "#f9fafb") + +(def gray "#aaa") + +(def gray-light "#ddd") + +(def purple "#837aff") + +(def red "#c42348") + +(def orange "#fa824c") + +(def yellow "#FACB0F") + +(def blue "#026fb1") + +(def green "#BEEF9E") + +(def contextual + {:success green + :info blue + :warning yellow + :error red}) + +;;; + +(defstyles global-nav + [:.global-nav + {:background-color silver} + + [:>ul + {:display :flex + :flex-direction :row + :list-style :none}] + + [:a (descendant :.link-form (attr= "type" "submit")) + {:padding "1rem 1.5rem" + :display :block + :color black + :text-decoration :none} + + [(& hover) + {:color blue}]] + + [:.spacer + {:flex 1}]]) + +(def link-conditional-styles + (list + [(& hover) (& active) + {:text-decoration :underline}] + [(& active) + {:color purple}])) + +(defstyles link-form + [:form.link-form + {:margin 0} + [(attr= "type" "submit") + {:background "none" + :border "none" + :padding 0 + :color blue + :text-decoration :none + :cursor :pointer} + link-conditional-styles]]) (defstyles styles - ) + global-nav + link-form + + [:body + {:color black}] + + [:a {:color blue + :text-decoration :none} + link-conditional-styles]) (def stylesheet (compile-css styles)) diff --git a/users/grfn/bbbg/src/bbbg/web.clj b/users/grfn/bbbg/src/bbbg/web.clj index c9d0fd0d44..bb47efbdad 100644 --- a/users/grfn/bbbg/src/bbbg/web.clj +++ b/users/grfn/bbbg/src/bbbg/web.clj @@ -20,9 +20,11 @@ [ring.middleware.keyword-params :refer [wrap-keyword-params]] [ring.middleware.multipart-params :refer [wrap-multipart-params]] [ring.middleware.params :refer [wrap-params]] + [ring.middleware.resource :refer [wrap-resource]] [ring.middleware.session :refer [wrap-session]] [ring.middleware.session.cookie :refer [cookie-store]] - [ring.util.response :refer [content-type resource-response response]]) + [ring.util.response :refer [content-type resource-response response]] + [clojure.java.io :as io]) (:import java.util.Base64)) @@ -70,13 +72,13 @@ (defn app-routes [env] (routes (GET "/main.css" [] - (-> (response stylesheet) + (-> (response + (str + "\n/* begin base.css */\n" + (slurp (io/resource "base.css")) + "\n/* end base.css */\n" + stylesheet)) (content-type "text/css"))) - (GET "/main.js" [] - (-> (resource-response "main.js") - (content-type "text/javascript"))) - (GET "/robots.txt" [] - (resource-response "robots.txt")) (attendees/attendees-routes env) (attendee-checks/attendee-checks-routes env) @@ -86,6 +88,7 @@ (defn middleware [app env] (-> app + (wrap-resource "public") wrap-dynamic-auth (wrap-discord-auth env) wrap-keyword-params -- cgit 1.4.1