diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-11-01 18:25:30 +0100 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-11-01 18:25:30 +0100 |
commit | a16a7e0936109891435fa1331ffc12e8b14a58a0 (patch) | |
tree | d48bdfd05a1f6897d8501a8a67e3dec818d578eb | |
parent | 53aa4384e3944570074b6e7005c3f5e62003583e (diff) |
feat(frontend): tweak add to background button styles
-rw-r--r-- | src/frontend/tubo/views/channel.cljs | 26 | ||||
-rw-r--r-- | src/frontend/tubo/views/playlist.cljs | 12 | ||||
-rw-r--r-- | src/frontend/tubo/views/stream.cljs | 4 |
3 files changed, 23 insertions, 19 deletions
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs index 9318c0e..fd7965c 100644 --- a/src/frontend/tubo/views/channel.cljs +++ b/src/frontend/tubo/views/channel.cljs @@ -25,16 +25,22 @@ (when banner [:div.flex.justify-center [:img {:src banner}]]) - [:div.flex.items-center.my-4.mx-2 - (when avatar - [:div.relative.w-16.h-16 - [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]]) - [:div.m-4 - [:h1.text-xl name] - (when subscriber-count - [:div.flex.my-2.items-center - [:i.fa-solid.fa-users.text-xs] - [:span.mx-2 (.toLocaleString subscriber-count)]])]] + [:div.flex.items-center.justify-between + [:div.flex.items-center.my-4.mx-2 + (when avatar + [:div.relative.w-16.h-16 + [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]]) + [:div.m-4 + [:h1.text-xl name] + (when subscriber-count + [:div.flex.my-2.items-center + [:i.fa-solid.fa-users.text-xs] + [:span.mx-2 (.toLocaleString subscriber-count)]])]] + [:div.whitespace-nowrap.ml-4 + [:button + {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])} + [:i.fa-solid.fa-headphones.mx-3] + [:span.text-neutral-600.dark:text-neutral-300 "Background"]]]] [:div.my-2 [:p description]] [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs index bee01c5..d8e8d49 100644 --- a/src/frontend/tubo/views/playlist.cljs +++ b/src/frontend/tubo/views/playlist.cljs @@ -21,7 +21,7 @@ [:div.flex.flex-col.items-center.px-5.pt-4.flex-auto (if page-loading? [loading/loading-icon service-color "text-5xl"] - [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5"} + [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5 xl:w-3/5"} [navigation/back-button service-color] (when banner-url [:div @@ -30,11 +30,11 @@ [: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 + [:div.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"]]]] + [:i.mx-3.fa-solid.fa-headphones] + [:span.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 @@ -43,7 +43,5 @@ [:img.rounded-full.object-cover.min-h-full.min-w-full {:src uploader-avatar :alt uploader-name}]]]] [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} uploader-name]] - [:span.ml-2.whitespace-nowrap (str stream-count " streams")]] - [:div.flex.flex.w-full.my-4.justify-center - ]] + [:span.ml-2.whitespace-nowrap (str stream-count " streams")]]] [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs index 6747abc..e13fa39 100644 --- a/src/frontend/tubo/views/stream.cljs +++ b/src/frontend/tubo/views/stream.cljs @@ -145,7 +145,7 @@ :on-click #(rf/dispatch [::events/toggle-stream-layout :show-related])}]] [:button {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])} - [:i.fa-solid.fa-headphones] - [:span.mx-2.text-neutral-600.dark:text-neutral-300 "Background"]]] + [:i.mx-2.fa-solid.fa-headphones] + [:span.text-neutral-600.dark:text-neutral-300 "Background"]]] (when (not show-related) [items/related-streams related-streams nil])])]]])])) |