From 9ad12676863393b394ee3ffb3e1c4b1e70665b22 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Tue, 23 Jan 2024 11:07:53 +0100 Subject: feat(frontend): add content header layout component --- src/frontend/tubo/components/layout.cljs | 8 ++++++++ src/frontend/tubo/views/bookmarks.cljs | 3 +-- src/frontend/tubo/views/kiosk.cljs | 3 +-- src/frontend/tubo/views/playlist.cljs | 21 +++++++++++---------- 4 files changed, 21 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs index 8a3a2c9..51847b8 100644 --- a/src/frontend/tubo/components/layout.cljs +++ b/src/frontend/tubo/components/layout.cljs @@ -26,6 +26,14 @@ [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5 xl:w-3/5"} (map-indexed #(with-meta %2 {:key %1}) children)])])) +(defn content-header + [heading & children] + [:div.flex.items-center.justify-between.mt-6 + [:h1.text-3xl.font-nunito-semibold.line-clamp-1.mr-6 + {:title heading} + heading] + (map-indexed #(with-meta %2 {:key %1}) children)]) + (defn uploader-avatar [source name & url] (let [image [:img.rounded-full.object-cover.max-w-full.min-h-full {:src source :alt name}]] diff --git a/src/frontend/tubo/views/bookmarks.cljs b/src/frontend/tubo/views/bookmarks.cljs index 7df71ce..3f47c02 100644 --- a/src/frontend/tubo/views/bookmarks.cljs +++ b/src/frontend/tubo/views/bookmarks.cljs @@ -10,8 +10,7 @@ (let [service-color @(rf/subscribe [:service-color]) bookmarks @(rf/subscribe [:bookmarks])] [layout/content-container - [:div.flex.justify-between.mt-6 - [:h1.text-3xl.font-nunito-semibold "Bookmarks"] + [layout/content-header "Bookmarks" [layout/primary-button "Enqueue" #(rf/dispatch [::events/enqueue-related-streams bookmarks service-color]) "fa-solid fa-headphones"]] [items/related-streams bookmarks]])) diff --git a/src/frontend/tubo/views/kiosk.cljs b/src/frontend/tubo/views/kiosk.cljs index e3bf812..f30bea6 100644 --- a/src/frontend/tubo/views/kiosk.cljs +++ b/src/frontend/tubo/views/kiosk.cljs @@ -15,6 +15,5 @@ (when scrolled-to-bottom? (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url])) [layout/content-container - [:div.flex.items-center.mt-6.mx-2 - [:h1.text-3xl.font-nunito-semibold id]] + [layout/content-header id] [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 b42fb6b..fc92a35 100644 --- a/src/frontend/tubo/views/playlist.cljs +++ b/src/frontend/tubo/views/playlist.cljs @@ -18,16 +18,17 @@ (when scrolled-to-bottom? (rf/dispatch [::events/playlist-pagination url next-page-url])) [layout/content-container - [:div.flex.flex-col.justify-center.my-4.mx-2 - [:div.flex.justify-between.items-center.mb-4 - [:h1.text-2xl.font-bold.line-clamp-1.pr-2 {:title name} name] + [:div.flex.flex-col.justify-center + [layout/content-header name [layout/primary-button "Enqueue" - #(rf/dispatch [::events/enqueue-related-streams related-streams service-color]) "fa-solid fa-headphones"]] - [:div.flex.items-center.justify-between - [:div.flex.items-center.my-4.mr-2 + #(rf/dispatch [::events/enqueue-related-streams related-streams service-color]) + "fa-solid fa-headphones"]] + [:div.flex.items-center.justify-between.my-4.gap-x-4 + [:div.flex.items-center [layout/uploader-avatar uploader-avatar uploader-name uploader-url] - [:div - [: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")]]] + [:a.line-clamp-1.ml-2 + {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) + :title uploader-name} + uploader-name]] + [:span.whitespace-nowrap (str stream-count " streams")]]] [items/related-streams related-streams next-page-url]])) -- cgit v1.2.3