diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/tubo/bg_player/views.cljs | 3 | ||||
| -rw-r--r-- | src/frontend/tubo/bookmarks/views.cljs | 6 | ||||
| -rw-r--r-- | src/frontend/tubo/channel/views.cljs | 5 | ||||
| -rw-r--r-- | src/frontend/tubo/items/views.cljs | 3 | ||||
| -rw-r--r-- | src/frontend/tubo/layout/views.cljs | 22 | ||||
| -rw-r--r-- | src/frontend/tubo/navigation/views.cljs | 2 | ||||
| -rw-r--r-- | src/frontend/tubo/playlist/views.cljs | 5 | ||||
| -rw-r--r-- | src/frontend/tubo/queue/views.cljs | 3 | ||||
| -rw-r--r-- | src/frontend/tubo/stream/views.cljs | 9 |
9 files changed, 31 insertions, 27 deletions
diff --git a/src/frontend/tubo/bg_player/views.cljs b/src/frontend/tubo/bg_player/views.cljs index c2cdf94..d554ce3 100644 --- a/src/frontend/tubo/bg_player/views.cljs +++ b/src/frontend/tubo/bg_player/views.cljs @@ -254,7 +254,8 @@ {:label "Close player" :icon [:i.fa-solid.fa-close] :on-click #(rf/dispatch [:bg-player/dispose])}] - :menu-styles {:bottom "30px" :top nil :right "10px"} + :menu-classes + ["xs:right-5" "xs:top-auto" "xs:left-auto" "xs:bottom-5"] :extra-classes [:!pl-4 :px-3]]])))) (defn audio-player diff --git a/src/frontend/tubo/bookmarks/views.cljs b/src/frontend/tubo/bookmarks/views.cljs index 554b55e..e92de3a 100644 --- a/src/frontend/tubo/bookmarks/views.cljs +++ b/src/frontend/tubo/bookmarks/views.cljs @@ -50,8 +50,7 @@ :on-click #(rf/dispatch [:bookmarks/export])} {:label "Clear All" :icon [:i.fa-solid.fa-trash] - :on-click #(rf/dispatch [:bookmarks/clear])}] - :menu-styles {:bottom nil :top "5px" :left nil :right nil}]] + :on-click #(rf/dispatch [:bookmarks/clear])}]]] [items/layout-switcher !layout]] [items/related-streams items nil !layout]])))) @@ -76,8 +75,7 @@ {:label "Add to playlist" :icon [:i.fa-solid.fa-plus] :on-click #(rf/dispatch [:modals/open - [modals/add-to-bookmark items]])}] - :menu-styles {:bottom nil :top "5px" :left nil :right nil}]]) + [modals/add-to-bookmark items]])}]]]) [items/layout-switcher !layout]] [items/related-streams (map #(assoc % :type "stream" :bookmark-id id) items) nil diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs index e665543..102308f 100644 --- a/src/frontend/tubo/channel/views.cljs +++ b/src/frontend/tubo/channel/views.cljs @@ -21,7 +21,8 @@ :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark related-streams]])}] - :menu-styles {:top "15px" :right "30px"}])))) + :menu-classes + ["xs:right-7" "xs:top-0" "xs:left-auto" "xs:bottom-auto"]])))) (defn metadata [{:keys [avatars name subscriber-count] :as channel}] @@ -36,7 +37,7 @@ [:div.flex.items-center.text-neutral-600.dark:text-neutral-400.text-sm [:span (str (utils/format-quantity subscriber-count) " subscribers")]])]] - [:div.hidden.lg:block + [:div.hidden.xs:block [metadata-popover channel]]]) (defn channel diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs index 8bfc7a1..3e578f9 100644 --- a/src/frontend/tubo/items/views.cljs +++ b/src/frontend/tubo/items/views.cljs @@ -56,7 +56,8 @@ true])})])] (when (not-empty (remove nil? items)) [layout/popover-menu !menu-active? items :extra-classes - [:pr-0 :pl-4] :menu-styles {:right "15px"}]))))) + [:pr-0 :pl-4] :menu-classes + ["xs:right-5" "xs:top-0" "xs:left-auto" "xs:bottom-auto"]]))))) (defn grid-item-content [{:keys [url name uploader-url uploader-name subscriber-count view-count diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs index 8755406..6537765 100644 --- a/src/frontend/tubo/layout/views.cljs +++ b/src/frontend/tubo/layout/views.cljs @@ -39,9 +39,9 @@ :style {:color service-color}}]]) (defn focus-overlay - [on-click active? transparent?] + [on-click active? transparent? extra-classes] [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out.z-20 - {:class (when-not transparent? "bg-black") + {:class (conj extra-classes (when-not transparent? "bg-black")) :style {:visibility (when-not active? "hidden") :opacity (if active? "0.5" "0")} :on-click on-click}]) @@ -161,24 +161,26 @@ (if (vector? item) item content)]))) (defn menu - [active? items & {:keys [right top bottom left] :or {right "15px" top "0px"}}] + [active? items & {:keys [extra-classes]}] (when-not (empty? (remove nil? items)) - [:ul.absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white.shadow.shadow-neutral-400.dark:shadow-neutral-900 - {:class (when-not active? "hidden") - :style {:right right :left left :top top :bottom bottom}} + [:ul.xs:absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white.shadow.shadow-neutral-400.dark:shadow-neutral-900.bottom-2.left-2.right-2.fixed + {:class (conj extra-classes (when-not active? "hidden"))} (for [[i item] (map-indexed vector (remove nil? items))] ^{:key i} [menu-item item])])) (defn popover-menu [!menu-active? items & - {:keys [menu-styles extra-classes] :or {extra-classes [:p-3]}}] + {:keys [menu-classes extra-classes] + :or {extra-classes [:p-3] + menu-classes ["xs:bottom-auto" "xs:left-auto" "xs:right-auto"]}}] [:div.flex.items-center - [focus-overlay #(reset! !menu-active? false) @!menu-active? true] - [:button.focus:outline-none.relative + [focus-overlay #(reset! !menu-active? false) @!menu-active? true + ["bg-black" "xs:bg-transparent"]] + [:button.focus:outline-none.xs:relative {:on-click #(reset! !menu-active? (not @!menu-active?)) :class extra-classes} [:i.fa-solid.fa-ellipsis-vertical] - [menu @!menu-active? items menu-styles]]]) + [menu @!menu-active? items :extra-classes menu-classes]]]) (defn accordeon [{:keys [label on-open open? left-icon right-button]} & content] diff --git a/src/frontend/tubo/navigation/views.cljs b/src/frontend/tubo/navigation/views.cljs index 066c0f9..3966483 100644 --- a/src/frontend/tubo/navigation/views.cljs +++ b/src/frontend/tubo/navigation/views.cljs @@ -149,7 +149,7 @@ {:on-click #(rf/dispatch [:search/show-form true])} [:i.fa-solid.fa-search]] (when-not (or show-queue? show-main-player?) - [:div.lg:hidden + [:div.xs:hidden (case (-> match :data :name) diff --git a/src/frontend/tubo/playlist/views.cljs b/src/frontend/tubo/playlist/views.cljs index 8a4f1fd..561e1a1 100644 --- a/src/frontend/tubo/playlist/views.cljs +++ b/src/frontend/tubo/playlist/views.cljs @@ -21,7 +21,8 @@ :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark related-streams]])}] - :menu-styles {:top "15px" :right "30px"}])))) + :menu-classes + ["xs:right-7" "xs:top-0" "xs:left-auto" "xs:bottom-auto"]])))) (defn playlist [_] @@ -38,7 +39,7 @@ [:div.flex.flex-col.gap-y-2.mb-2 name [:span.text-sm.whitespace-nowrap.text-neutral-600.dark:text-neutral-400 (str stream-count " streams")]] - [:div.hidden.lg:block + [:div.hidden.xs:block [metadata-popover playlist]]] [:div.flex.items-center.justify-between.my-4.gap-x-4 [:div.flex.items-center diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs index 192e028..474a6c2 100644 --- a/src/frontend/tubo/queue/views.cljs +++ b/src/frontend/tubo/queue/views.cljs @@ -59,7 +59,8 @@ {:name :channel-page :params {} :query {:url uploader-url}}])}] - :menu-styles {:right "40px"} + :menu-classes + ["xs:right-5" "xs:top-0" "xs:left-auto" "xs:bottom-auto"] :extra-classes [:px-7 :py-2]]])) (defn queue-item diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs index 754c4e8..b2cd770 100644 --- a/src/frontend/tubo/stream/views.cljs +++ b/src/frontend/tubo/stream/views.cljs @@ -40,8 +40,8 @@ :icon [:i.fa-solid.fa-plus] :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark stream]])}] - :menu-styles {:top "15px" :right "30px"} - :extra-classes ["p-3" "lg:p-0"]])))) + :menu-classes ["xs:right-5" "xs:top-5" "xs:left-auto" "xs:bottom-auto"] + :extra-classes ["xs:py-2" "xs:px-4"]])))) (defn metadata-uploader [{:keys [uploader-url uploader-name subscriber-count] :as stream}] @@ -70,7 +70,7 @@ [:div.flex.items-center.gap-x-2 [:i.fa-solid.fa-thumbs-down] [:span dislike-count]])]) - [:div.hidden.lg:flex.bg-neutral-200.dark:bg-neutral-800.px-4.py-2.rounded-full + [:div.hidden.xs:flex.bg-neutral-200.dark:bg-neutral-800.rounded-full [metadata-popover stream]]]) (defn metadata @@ -134,8 +134,7 @@ :icon [:i.fa-solid.fa-plus] :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark - related-streams]])}] - :menu-styles {:bottom "30px" :top nil :left "20px" :right nil}]] + related-streams]])}]]] [items/layout-switcher !layout] [items/related-streams related-streams nil !layout]]]))))) |