diff options
| author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-02-18 19:49:17 +0100 |
|---|---|---|
| committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-02-18 19:49:17 +0100 |
| commit | cca4e5c4dbfa66f9528f8867a94636f0d42579a4 (patch) | |
| tree | 7f337cd98343e5446ee234eb333ffe1f1fa454d5 /src/frontend | |
| parent | ae7360d693aaa2aacd99b710a0474c232075261e (diff) | |
feat(frontend): refine audio player buttons layout for mobile
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/tubo/components/audio_player.cljs | 7 | ||||
| -rw-r--r-- | src/frontend/tubo/components/player.cljs | 5 |
2 files changed, 7 insertions, 5 deletions
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}])]))) |