From cca4e5c4dbfa66f9528f8867a94636f0d42579a4 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Sun, 18 Feb 2024 19:49:17 +0100 Subject: feat(frontend): refine audio player buttons layout for mobile --- src/frontend/tubo/components/audio_player.cljs | 7 ++++--- src/frontend/tubo/components/player.cljs | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs index d69f232..ce30b0a 100644 --- a/src/frontend/tubo/components/audio_player.cljs +++ b/src/frontend/tubo/components/audio_player.cljs @@ -122,7 +122,8 @@ [:div.flex.lg:justify-end.lg:flex-1 [player/volume-slider !player volume-level muted? service-color] [player/button [:i.fa-solid.fa-list] #(rf/dispatch [::events/toggle-media-queue]) - :show-on-mobile? true] + :show-on-mobile? true + :extra-classes "pl-4 pr-3"] [layout/more-menu !menu-active? [{:label (if liked? "Remove favorite" "Favorite") :icon (if liked? @@ -136,5 +137,5 @@ {:label "Close player" :icon [:i.fa-solid.fa-close] :on-click #(rf/dispatch [::events/dispose-audio-player])}] - :menu-styles {:bottom "0px" :top nil} - :extra-classes "pt-1 !pl-2 pr-2 "]]]]))))) + :menu-styles {:bottom "30px" :top nil :right "30px"} + :extra-classes "pt-1 !pl-3 pr-3"]]]]))))) diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs index 0103840..57b2928 100644 --- a/src/frontend/tubo/components/player.cljs +++ b/src/frontend/tubo/components/player.cljs @@ -50,14 +50,15 @@ :on-mouse-out #(reset! show-slider? false)} [button (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low]) - #(rf/dispatch [::events/toggle-mute player])] + #(rf/dispatch [::events/toggle-mute player]) + :extra-classes "pl-3 pr-2"] (when @show-slider? [:input.rounded-lg.w-24.cursor-pointer.focus:outline-none.absolute {:class "rotate-[270deg]" :type "range" :on-input #(rf/dispatch [::events/change-volume-level (.. % -target -value) player]) :style {:accentColor service-color - :left "-32.5px" + :left "-29px" :bottom "63px"} :max 100 :value volume-level}])]))) -- cgit v1.2.3