diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-30 01:28:23 +0100 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-30 01:28:23 +0100 |
commit | d553eb19f1a229c078973e272f75a188fe35fd40 (patch) | |
tree | 14272859722165d3a090d1870b628aeac78f79d4 | |
parent | 7ddf157e974e9df2dccb2c45ca31c15e4b3cee74 (diff) |
fix(frontend): fix responsive styles for containers without data
-rw-r--r-- | src/frontend/tubo/views/bookmarks.cljs | 4 | ||||
-rw-r--r-- | src/frontend/tubo/views/playlist.cljs | 14 | ||||
-rw-r--r-- | src/frontend/tubo/views/settings.cljs | 2 | ||||
-rw-r--r-- | src/frontend/tubo/views/stream.cljs | 2 |
4 files changed, 13 insertions, 9 deletions
diff --git a/src/frontend/tubo/views/bookmarks.cljs b/src/frontend/tubo/views/bookmarks.cljs index cae383c..24c356c 100644 --- a/src/frontend/tubo/views/bookmarks.cljs +++ b/src/frontend/tubo/views/bookmarks.cljs @@ -10,12 +10,12 @@ (let [service-color @(rf/subscribe [:service-color]) bookmarks @(rf/subscribe [:bookmarks])] [:div.flex.flex-col.items-center.px-5.py-2.flex-auto - [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"} + [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5 xl:w-3/5"} [navigation/back-button service-color] [:div.flex.justify-between [:h1.text-2xl.font-bold.py-6 "Bookmarks"] [:button {:on-click #(rf/dispatch [::events/enqueue-related-streams bookmarks service-color])} [:i.fa-solid.fa-headphones] - [:span.mx-2.text-neutral-600.dark:text-neutral-300 "Background"]]] + [:span.ml-2.text-neutral-600.dark:text-neutral-300 "Background"]]] [items/related-streams bookmarks]]])) diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs index 9eaccdf..a201008 100644 --- a/src/frontend/tubo/views/playlist.cljs +++ b/src/frontend/tubo/views/playlist.cljs @@ -27,7 +27,14 @@ [:div [:img {:src banner-url}]]) [:div.flex.flex-col.justify-center.my-4.mx-2 - [:h1.text-2xl.font-bold.mb-4.line-clamp-1 {:title name} name] + [:div.flex.justify-between.items-center.mb-4 + [:div + [:h1.text-2xl.font-bold.line-clamp-1 {:title name} name]] + [:div.flex-auto.whitespace-nowrap.ml-4 + [:button + {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])} + [:i.fa-solid.fa-headphones] + [:span.ml-4.text-neutral-600.dark:text-neutral-300 "Background"]]]] [:div.flex.items-center.justify-between [:div.flex.items-center.my-4.mr-2 [:div.flex.items-center.py-3.pr-3.box-border.h-12 @@ -38,8 +45,5 @@ uploader-name]] [:span.ml-2 (str stream-count " streams")]] [:div.flex.flex.w-full.my-4.justify-center - [:button.px-3.py-1.mx-2 - {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])} - [:i.fa-solid.fa-headphones] - [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Background"]]]] + ]] [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tubo/views/settings.cljs b/src/frontend/tubo/views/settings.cljs index de1f7a7..c39d35e 100644 --- a/src/frontend/tubo/views/settings.cljs +++ b/src/frontend/tubo/views/settings.cljs @@ -19,7 +19,7 @@ show-description]} @(rf/subscribe [:settings]) service-color @(rf/subscribe [:service-color])] [:div.flex.flex-col.items-center.px-5.py-2.flex-auto - [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"} + [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5 xl:w-3/5"} [navigation/back-button service-color] [:h1.text-2xl.font-bold.py-6 "Settings"] [:form.flex.flex-wrap diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs index c4546b8..503dfd0 100644 --- a/src/frontend/tubo/views/stream.cljs +++ b/src/frontend/tubo/views/stream.cljs @@ -29,7 +29,7 @@ [:div.flex.flex-col.items-center.justify-center.dark:text-white.flex-auto (if page-loading? [loading/loading-icon service-color "text-5xl"] - [:div.w-full.pb-4.relative {:class "ml:w-4/5 xl:w-3/5"} + [:div.w-full.pb-4.relative.w-full {:class "ml:w-4/5 xl:w-3/5"} [navigation/back-button service-color] [:div.flex.justify-center.relative {:class "h-[300px] ml:h-[450px] lg:h-[600px]"} |