aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2024-01-23 11:07:53 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2024-01-23 11:07:53 +0100
commit9ad12676863393b394ee3ffb3e1c4b1e70665b22 (patch)
tree33bb1cad80609c50b4251402828f5e37750ad427 /src
parent8aa8a8c12e6caffa1957a37c17296428c866fc9f (diff)
feat(frontend): add content header layout component
Diffstat (limited to 'src')
-rw-r--r--src/frontend/tubo/components/layout.cljs8
-rw-r--r--src/frontend/tubo/views/bookmarks.cljs3
-rw-r--r--src/frontend/tubo/views/kiosk.cljs3
-rw-r--r--src/frontend/tubo/views/playlist.cljs21
4 files changed, 21 insertions, 14 deletions
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]]))