diff options
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/tubo/views.cljs | 75 |
1 files changed, 55 insertions, 20 deletions
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs index c1a04ed..5978808 100644 --- a/src/frontend/tubo/views.cljs +++ b/src/frontend/tubo/views.cljs @@ -11,6 +11,46 @@ (defonce services (rf/dispatch [::events/get-services])) (defonce kiosks (rf/dispatch [::events/get-kiosks 0])) +(defn mobile-nav + [show-mobile-nav? service-id services available-kiosks] + [:<> + [:div.w-full.fixed.min-h-screen.right-0.top-0 + {:class "bg-black/50" + :style {:visibility (when-not show-mobile-nav? "hidden")} + :on-click #(rf/dispatch [::events/toggle-mobile-nav])}] + [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900 + {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))} + [:div.flex.justify-center.py-8.items-center + [:img.mb-1 {:src "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"} + :title "Tubo"}] + [:h3.text-3xl.font-bold.px-4 "Tubo"]] + [:div.relative.flex.flex-col.items-center-justify-center + [:div.w-full.box-border.z-10.ml:text-white + [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full + {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))]) + :value service-id + :style {:background "transparent"}} + (when services + (for [service services] + [:option.text-white.bg-neutral-900.border-none + {:value (:id service) :key (:id service)} + (-> service :info :name)]))]] + [:div.flex.absolute.min-h-full.top-0.right-6.items-center.justify-end.z-0 + [:i.fa-solid.fa-caret-down]]] + [:div.relative.pb-4 + [:ul.flex.font-roboto.flex-col + (for [kiosk available-kiosks] + [:li.px-5.py-2 {:key kiosk} + [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id + :kioskId kiosk})} + kiosk]])]] + [:div.relative.dark:border-neutral-800.border-gray-300.pt-4 + {:class "border-t-[1px]"} + [:ul.flex.font-roboto + [:li.px-5.py-2 + [:a {:href (rfe/href ::routes/settings)} + "Settings"]]]]]]) + (defn navbar [{{:keys [serviceId]} :query-params}] (let [!query (r/atom "") @@ -18,11 +58,11 @@ (fn [{{:keys [serviceId]} :query-params}] (let [service-id @(rf/subscribe [:service-id]) service-color @(rf/subscribe [:service-color]) - search-query @(rf/subscribe [:search-query]) + search-query @(rf/subscribe [:search-query]) services @(rf/subscribe [:services]) {:keys [current-theme]} @(rf/subscribe [:settings]) id (js/parseInt (or serviceId service-id)) - mobile-nav? @(rf/subscribe [:show-mobile-nav]) + show-mobile-nav? @(rf/subscribe [:show-mobile-nav]) {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])] [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito {:style {:background service-color}} @@ -40,40 +80,35 @@ {:name ::routes/search :params {} :query {:q search-query :serviceId service-id}}])))} - [:div - [:input.bg-transparent.text-white.border-none.rounded.py-2.px-0.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto + [:div.relative + [:input.bg-transparent.text-white.border-none.rounded.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto {:type "text" :ref #(reset! !input %) :default-value @!query :on-change #(let [input (.. % -target -value)] (when-not (empty? input) (rf/dispatch [::events/change-search-query input])) (reset! !query input)) - :placeholder "Search for something"}]] - [:div.flex.items-center.px-2.text-white - [:button.mx-2 - {:type "button" + :placeholder "Search for something"}] + [:button.mx-2.text-xs.text-white.absolute.right-0.top-3 + {:type "button" :on-click #(when @!input (set! (.-value @!input) "") (reset! !query "") (.focus @!input)) - :class (when (empty? @!query) "invisible")} - [:i.fa-solid.fa-circle-xmark]] + :class (when (empty? @!query) "invisible")} + [:i.fa-solid.fa-circle-xmark]]] + [:div.flex.items-center.px-2.text-white [:button.mx-2 {:type "submit"} [:i.fa-solid.fa-search]] - [:a.mx-2 {:href (rfe/href ::routes/settings)} + [:a.mx-2.hidden.ml:block + {:href (rfe/href ::routes/settings)} [:i.fa-solid.fa-cog]]]] [:div.cursor-pointer.px-2.ml:hidden.text-white {:on-click #(rf/dispatch [::events/toggle-mobile-nav])} [:i.fa-solid.fa-bars]] - [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8 - {:class (str "ease-in-out delay-75 transition-[right] " - (if (= current-theme :light) "bg-white" "bg-neutral-900") - " ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 " - (if mobile-nav? "right-0" "right-[-245px]"))} - [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2 - {:on-click #(rf/dispatch [::events/toggle-mobile-nav])} - [:i.fa-solid.fa-close.text-xl]] + [mobile-nav show-mobile-nav? service-id services available-kiosks] + [:div.hidden.ml:flex.w-full [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row [:div.w-full.box-border.z-10.ml:text-white [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full @@ -90,7 +125,7 @@ [:div.relative.flex-auto.ml:pl-4 [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white (for [kiosk available-kiosks] - [:li.px-5.py-2 {:key kiosk} + [:li.px-4.py-2 {:key kiosk} [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id :kioskId kiosk})} kiosk]])]]]]])))) |