feat: add responsive popovers and use classes over styles

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]]])))))