Skip to content

Commit

Permalink
brutalize calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
@zacjones93
zacjones93 committed Aug 30, 2023
1 parent 78c0a78 commit 47c3ead
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 29 deletions.
38 changes: 20 additions & 18 deletions src/com/spicy/calendar.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,14 @@

(defn header
[{:keys [date today]}]
[:header.flex.items-center.justify-between.border-b.border-gray-200.px-6.py-4.lg:flex-none
[:header.flex.items-center.justify-between.border-b-2.border-black.py-4.lg:flex-none
{:id "calendar-header"}
[:h1.text-base.font-semibold.leading-6.text-gray-900
[:time {:datetime (jt/format "YYYY-MM" date)} (jt/format "MMMM YYYY" date)]]
[:h1.text-base.font-semibold.leading-6.text-black
[:time.select-none {:datetime (jt/format "YYYY-MM" date)} (jt/format "MMMM YYYY" date)]]
[:div.flex.items-center
[:div.relative.flex.items-center.bg-white.shadow-sm.md:items-stretch
[:button.flex.h-9.w-12.items-center.justify-center.border-y.border-l.border-gray-300.pr-1.text-gray-400.hover:text-gray-500.focus:relative.md:w-9.md:pr-0.md:hover:bg-gray-50
[:div
{:class (str "relative flex items-center bg-white justify-between shadow-sm md:items-stretch sm:min-w-[197.25px]")}
[:button.flex.h-9.w-12.md:w-9.lg:w-full.items-center.justify-center.border-y.border-l.border-black.pr-1.text-black.hover:text-black.focus:relative.md:pr-0.md:hover:bg-brand-teal
{:type "button"
:hx-get (str "/app/results/calendar?date=" (jt/format "YYYY-MM-dd" (jt/minus date (jt/months 1))))
:hx-select "#calendar-header"
Expand All @@ -70,7 +71,7 @@
[:span.sr-only "Previous month"]
[:svg.h-5.w-5 {:viewBox "0 0 20 20" :fill "currentcolor" :aria-hidden "true"}
[:path {:fill-rule "evenodd" :d "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" :clip-rule "evenodd"}]]]
[:button.hidden.border-y.border-gray-300.px-3.5.text-sm.font-semibold.text-gray-900.hover:bg-gray-50.focus:relative.md:block
[:button.hidden.border-y.border-black.px-3.5.text-sm.font-semibold.text-black.hover:bg-brand-teal.focus:relative.md:block
{:type "button"
:hx-get (str "/app/results/calendar?date=" (jt/format "YYYY-MM-dd" today))
:hx-select "#calendar-header"
Expand All @@ -79,7 +80,7 @@
:hx-swap "outerHTML"}
"Today"]
[:span.relative.-mx-px.h-5.w-px.bg-gray-300.md:hidden]
[:button.flex.h-9.w-12.items-center.justify-center.border-y.border-r.border-gray-300.pl-1.text-gray-400.hover:text-gray-500.focus:relative.md:w-9.md:pl-0.md:hover:bg-gray-50
[:button.flex.h-9.w-12.md:w-9.lg:w-full.items-center.justify-center.border-y.border-r.border-black.pl-1.text-black.hover:text-gray-500.focus:relative.md:pl-0.md:hover:bg-brand-teal
{:type "button"
:hx-get (str "/app/results/calendar?date=" (jt/format "YYYY-MM-dd" (jt/plus date (jt/months 1))))
:hx-select "#calendar-header"
Expand All @@ -103,13 +104,14 @@
(let [is-today? (= (jt/as day :year :month-of-year :day-of-month)
(jt/as now :year :month-of-year :day-of-month))
is-current-month? (= (jt/as day :month-of-year) (jt/as date :month-of-year))]
[:div {:class (concat '[relative px-3 py-2]
(when-not is-current-month? '[bg-gray-50 text-gray-500])
[:div {:class (concat '[relative "min-h-[84px]" px-3 py-2]
(when-not is-current-month? '[bg-gray-100 text-black])
(when is-current-month? '[bg-white]))}
[:time {:class (concat [] (when is-today? '[flex h-6 w-6 items-center justify-center bg-brand-teal font-semibold]))
[:time {:class (concat '[select-none] (when is-today? '[flex h-6 w-6 items-center justify-center bg-brand-teal font-semibold]))
:datetime (jt/format "YYYY-MM-dd" day)} (jt/as day :day-of-month)]
(when (not-empty results)
[:ol.mt-2.list-none.m-0.p-0

(map (comp (fn [{:keys [name href]}]
[:li
[:a.group.flex {:href href}
Expand All @@ -126,8 +128,8 @@
:hx-get (str "/app/results/calendar-day?date=" (jt/format "YYYY-MM-dd" day))
:hx-swap "outerHTML"
:hx-target "#mobile-day-view"
:class (concat '[flex h-14 flex-col px-3 py-2 text-gray-900 hover:bg-gray-100 focus:z-10]
(when-not is-current-month? '[bg-gray-50 text-gray-500])
:class (concat '[flex h-14 flex-col px-3 py-2 text-black hover:bg-gray-100 focus:z-10]
(when-not is-current-month? '[bg-gray-50 text-black])
(when is-current-month? '[bg-white])
(when is-today? '[font-semibold]))}
[:time.ml-auto
Expand Down Expand Up @@ -194,12 +196,12 @@
[:div.px-4.py-10.sm:px-6
{:id "mobile-day-view"}
[:h2.mb-4 (jt/format "EEE, MMMM dd" date)]
[:ol.divide-y.divide-gray-100.overflow-hidden.bg-white.text-sm.shadow.ring-1.ring-black.ring-opacity-5
[:ol.divide-y.divide-gray-100.overflow-hidden.bg-white.text-sm.ring-1.ring-black
(map (comp (fn [{:keys [name href]}]
[:li.group.flex.p-4.pr-6.focus-within:bg-gray-50.hover:bg-gray-50
[:div.flex-auto
[:p.font-semibold.text-gray-900 name]]
[:a.ml-6.flex-none.self-center.bg-white.px-3.py-2.font-semibold.text-gray-900.shadow-sm.ring-1.ring-inset.ring-gray-300.hover:ring-gray-400 {:href href} "View"
[:a.ml-6.flex-none.self-center.bg-white.px-3.py-2.font-semibold.text-gray-900.ring-1.ring-inset.ring-black.hover:ring-gray-400 {:href href} "View"
[:span.sr-only (str ", " name)]]]) r/normalized-result) results)]]
[:div.px-4.py-10.sm:px-6.lg:hidden
{:id "mobile-day-view"}
Expand All @@ -213,9 +215,9 @@
(defn desktop-body
[{:keys [date today results]}]
(let [results-by-month-day (group-by (comp inst->month-day :result/date) results)]
[:div.shadow.ring-1.ring-black.ring-opacity-5.flex.flex-auto.flex-col
[:div.ring-2.ring-black.flex.flex-auto.flex-col
{:id "calendar"}
[:div.grid.grid-cols-7.gap-px.border-b.border-gray-300.bg-gray-200.text-center.text-xs.font-semibold.leading-6.text-gray-700.lg:flex-none
[:div.grid.grid-cols-7.gap-px.bg-black.border-b-2.border-black.bg-gray-200.text-center.text-xs.font-semibold.leading-6.text-black.lg:flex-none
[:div.flex.justify-center.bg-white.py-2
[:span "S"]
[:span.sr-only.sm:not-sr-only "un"]]
Expand All @@ -238,9 +240,9 @@
[:span "S"]
[:span.sr-only.sm:not-sr-only "at"]]]
[:div.flex.bg-gray-200.text-xs.leading-6.text-gray-700.lg:flex-auto
[:div.hidden.w-full.lg:grid.lg:grid-cols-7.lg:grid-rows-6.lg:gap-px
[:div.hidden.w-full.lg:grid.lg:grid-cols-7.lg:grid-rows-6.lg:gap-px.bg-black
(map #(desktop-day {:day % :now today :date date :results (get results-by-month-day (jt/as % :month-of-year :day-of-month))}) (monthly-frame-days date))]
[:div.isolate.grid.w-full.grid-cols-7.grid-rows-6.gap-px.lg:hidden
[:div.isolate.grid.w-full.grid-cols-7.grid-rows-6.gap-px.lg:hidden.bg-black
(map #(mobile-day {:day % :now today :date date :results (get results-by-month-day (jt/as % :month-of-year :day-of-month))}) (monthly-frame-days date))]]
[:div.px-4.py-10.sm:px-6.lg:hidden
{:id "mobile-day-view"}
Expand Down
25 changes: 14 additions & 11 deletions src/com/spicy/results/core.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
:hx-target "closest #edit-result"} "Cancel"]))]))


(def list-icon [:svg.w-6.h-6.flex-none {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1.5" :stroke "currentColor"} [:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"}]])
(def list-icon [:svg.w-6.h-6.flex-none {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1" :stroke "currentColor"} [:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"}]])
(def calendar-icon [:svg.w-6.h-6.flex-none {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1.5" :stroke "currentColor"} [:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"}]])


Expand All @@ -139,22 +139,23 @@
(ui/page ctx (ui/panel [:div {:class (str "p-4")}
[:div.flex.justify-between
[:h1.text-3xl.cursor-default.capitalize.text-center.sm:text-left "Results"]
[:div.flex.space-x-1.bg-slate-100.p-0.5.border-2.border-black
[:div
{:role "tablist"
:class (str "flex space-x-1 bg-slate-100 p-0 5 border border-black min-w-[95px]")
:aria-orientation "horizontal"
:id "results-view-toggle"}
[:button#headlessui-tabs-tab-8
{:class '[flex items-center pl-2 pr-2 text-sm font-semibold lg:pr-3 bg-white]
{:class '[flex items-center w-full pl-2 pr-2 text-base lg:pr-3 bg-brand-teal]
:role "tab"
:type "button"
:aria-selected "true"
:tabindex "0"
:data-headlessui-state "selected"
:aria-controls "headlessui-tabs-panel-10"}
list-icon
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-slate-900 "List"]]
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-black.text-base "List"]]
[:button#headlessui-tabs-tab-9
{:class '[flex items-center pl-2 pr-2 text-sm font-semibold lg:pr-3]
{:class '[flex items-center w-full pl-2 pr-2 text-base lg:pr-3]
:role "tab"
:type "button"
:aria-selected "false"
Expand Down Expand Up @@ -196,12 +197,14 @@
:order-by [[d :desc]]}
[(:uid session) (c/->date start-date) (c/->date end-date)]))]
[:<>
[:div.flex.space-x-1.bg-slate-100.p-0.5.border-2.border-black
{:role "tablist"
[:div
{
:role "tablist"
:class (str " flex sm:space-x-1 bg-slate-100 p-0 5 border border-black min-w-[95px]")
:aria-orientation "horizontal"
:id "results-view-toggle"}
[:button#headlessui-tabs-tab-8
{:class '[flex items-center pl-2 pr-2 text-sm font-semibold lg:pr-3]
{:class '[flex items-center w-full pl-2 pr-2 text-base lg:pr-3]
:role "tab"
:type "button"
:aria-selected "true"
Expand All @@ -214,17 +217,17 @@
:hx-select-oob "#results-panel"
:aria-controls "headlessui-tabs-panel-10"}
list-icon
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-slate-900 "List"]]
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-black.text-base "List"]]
[:button#headlessui-tabs-tab-9
{:class '[flex items-center pl-2 pr-2 text-sm font-semibold lg:pr-3 bg-white]
{:class '[flex items-center w-full m-0 pl-2 pr-2 text-base lg:pr-3 bg-brand-teal]
:role "tab"
:type "button"
:aria-selected "false"
:tabindex "-1"
:data-headlessui-state ""
:aria-controls "headlessui-tabs-panel-11"}
calendar-icon
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-slate-900 "Calendar"]]]
[:span.sr-only.lg:not-sr-only.lg:ml-2.text-black.text-base "Calendar"]]]
[:div {:id "results-panel"}
(c/calendar {:date date
:today (jt/zoned-date-time (jt/zone-id "America/Boise"))
Expand Down

0 comments on commit 47c3ead

Please sign in to comment.