aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/frontend/tubo/bg_player/views.cljs3
-rw-r--r--src/frontend/tubo/bookmarks/views.cljs6
-rw-r--r--src/frontend/tubo/channel/views.cljs5
-rw-r--r--src/frontend/tubo/items/views.cljs3
-rw-r--r--src/frontend/tubo/layout/views.cljs22
-rw-r--r--src/frontend/tubo/navigation/views.cljs2
-rw-r--r--src/frontend/tubo/playlist/views.cljs5
-rw-r--r--src/frontend/tubo/queue/views.cljs3
-rw-r--r--src/frontend/tubo/stream/views.cljs9
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]]])))))