aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/frontend/tubo/bookmarks/modals.cljs2
-rw-r--r--src/frontend/tubo/items/views.cljs81
-rw-r--r--src/frontend/tubo/layout/views.cljs25
-rw-r--r--src/frontend/tubo/modals/views.cljs2
-rw-r--r--src/frontend/tubo/navigation/views.cljs2
-rw-r--r--src/frontend/tubo/notifications/views.cljs4
-rw-r--r--src/frontend/tubo/queue/views.cljs13
-rw-r--r--src/frontend/tubo/stream/views.cljs19
8 files changed, 78 insertions, 70 deletions
diff --git a/src/frontend/tubo/bookmarks/modals.cljs b/src/frontend/tubo/bookmarks/modals.cljs
index b6463a5..89d82be 100644
--- a/src/frontend/tubo/bookmarks/modals.cljs
+++ b/src/frontend/tubo/bookmarks/modals.cljs
@@ -7,7 +7,7 @@
(defn bookmark-item
[{:keys [items name] :as bookmark} item]
- [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.hover:bg-gray-100.dark:hover:bg-stone-800
+ [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.hover:bg-neutral-100.dark:hover:bg-neutral-800
{:on-click #(rf/dispatch [(if (vector? item) :bookmark/add-n :bookmark/add)
bookmark item])}
[:div.w-24
diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs
index c89f481..dbd93b4 100644
--- a/src/frontend/tubo/items/views.cljs
+++ b/src/frontend/tubo/items/views.cljs
@@ -73,7 +73,7 @@
[:a {:href route :title name}
[:h1.line-clamp-2.my-1 {:class "[overflow-wrap:anywhere]"} name]]
(when (and verified? (not uploader-url))
- [:i.fa-solid.fa-circle-check.pl-2])])
+ [:i.fa-solid.fa-circle-check.pl-2.text-sm])])
[:div.flex.justify-between
[:div.flex.items-center.my-2
(conj
@@ -86,7 +86,7 @@
{:class "[overflow-wrap:anywhere]" :title uploader-name :key url}
uploader-name])
(when (and uploader-url verified?)
- [:i.fa-solid.fa-circle-check])]
+ [:i.fa-solid.fa-circle-check.text-xs])]
[item-popover item bookmarks]]
(when subscriber-count
[:div.flex.items-center
@@ -105,57 +105,62 @@
(defn list-item-content
[{:keys [url name uploader-url uploader-name subscriber-count view-count
- stream-count verified? thumbnail-url duration]
+ stream-count verified? thumbnail-url duration upload-date]
:as item} route bookmarks]
[:div.w-full
- [:div.flex.gap-x-5
+ [:div.flex.gap-x-3.xs:gap-x-5
[layout/thumbnail thumbnail-url route name duration
:classes
[:py-2 :h-28 "xs:h-36" "min-w-[150px]" "max-w-[150px]" "sm:min-w-[250px]"
"sm:max-w-[250px]"] :rounded?
true]
- [:div.flex-auto.mr-2
+ [:div.flex.flex-col.flex-auto.xs:mr-2.gap-y-2
(when name
[:div.flex.items-center.justify-between.mt-2
[:a {:href route :title name}
- [:h1.line-clamp-1.text-xl
+ [:h1.line-clamp-1.xs:text-xl
{:class "[overflow-wrap:anywhere]"}
name
(when (and verified? (not uploader-url))
[:i.fa-solid.fa-circle-check.pl-3.text-sm])]]
[item-popover item bookmarks]])
- [:div.flex.justify-between
- [:div.flex.flex-col
- [:div.flex.text-neutral-900.dark:text-neutral-400.text-sm.flex-col.xs:flex-row
- (when view-count
- [:<>
- [:div.flex.items-center.h-full
- [:p (str (utils/format-quantity view-count) " views")]]
- [:span.px-2.hidden.xs:inline-block
- {:dangerouslySetInnerHTML {:__html "&bull;"}}]])
- [:span (utils/format-date-ago (:upload-date item))]]
- [:div.my-2.xs:my-4.flex.gap-2.items-center
- [layout/uploader-avatar item :classes ["w-6" "h-6"]]
- (conj
- (when uploader-url
- [:a
- {:href (rfe/href :channel-page nil {:url uploader-url})
- :title uploader-name
- :key url}])
- [:h1.text-neutral-900.dark:text-neutral-400.font-bold.line-clamp-1.break-all.text-sm
- {:class "[overflow-wrap:anywhere]" :title uploader-name :key url}
- uploader-name])
- (when (and uploader-url verified?)
- [:i.fa-solid.fa-circle-check.text-sm.text-neutral-400])]]]
- [:div.flex.text-neutral-800.dark:text-gray-300.text-sm.flex-col.xs:flex-row
- (when subscriber-count
- [:<>
- [:div.flex.items-center.h-full
- [:p (str (utils/format-quantity subscriber-count) " subscribers")]]
- [:span.px-2.hidden.xs:inline-block
- {:dangerouslySetInnerHTML {:__html "&bull;"}}]])
- (when stream-count
- [:span (str (utils/format-quantity stream-count) " streams")])]]]])
+ [:div.flex.items-center.justify-between.gap-y-2
+ [:div.flex.flex-col.justify-center.gap-y-2.text-neutral-600.dark:text-neutral-400
+ (when (or uploader-url uploader-name)
+ [:div.flex.gap-2.items-center
+ [layout/uploader-avatar item :classes ["w-6" "h-6"]]
+ (conj
+ (when uploader-url
+ [:a
+ {:href (rfe/href :channel-page nil {:url uploader-url})
+ :title uploader-name
+ :key url}])
+ [:h1.font-semibold.line-clamp-1.break-all.text-sm
+ {:class "[overflow-wrap:anywhere]" :title uploader-name :key url}
+ uploader-name])
+ (when (and uploader-url verified?)
+ [:i.fa-solid.fa-circle-check.text-xs])])
+ (when (or view-count upload-date)
+ [:div.flex.text-xs.xs:text-sm.flex-col.xs:flex-row
+ (when view-count
+ [:<>
+ [:div.flex.items-center.h-full
+ [:p (str (utils/format-quantity view-count) " views")]]
+ [:span.px-2.hidden.xs:inline-block
+ {:dangerouslySetInnerHTML {:__html "&bull;"}}]])
+ [:span (utils/format-date-ago upload-date)]])
+ (when (or subscriber-count stream-count)
+ [:div.flex.text-xs.xs:text-sm.flex-col.xs:flex-row
+ (when subscriber-count
+ [:<>
+ [:div.flex.items-center.h-full
+ [:p
+ (str (utils/format-quantity subscriber-count) " subscribers")]]
+ [:span.px-2.hidden.xs:inline-block
+ {:dangerouslySetInnerHTML {:__html "&bull;"}}]])
+ (when stream-count
+ [:span
+ (str (utils/format-quantity stream-count) " streams")])])]]]]])
(defn related-streams
[related-streams next-page-url !layout]
diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs
index b49f51d..26a5cb9 100644
--- a/src/frontend/tubo/layout/views.cljs
+++ b/src/frontend/tubo/layout/views.cljs
@@ -15,12 +15,12 @@
(if thumbnail-url
[:img.object-cover.min-h-full.max-h-full.min-w-full
{:src thumbnail-url :class (when rounded? :rounded)}]
- [:div.bg-gray-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded
+ [:div.bg-neutral-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded
[:i.fa-solid.fa-image.text-3xl.text-white]])
(when duration
[:div.rounded.p-2.absolute
{:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}}
- [:p.text-white.text-md
+ [:p.text-white.text-xs.xs:text-base
(if (= duration 0)
"LIVE"
(utils/format-duration duration))]])]])
@@ -90,15 +90,13 @@
(defn primary-button
[label on-click left-icon right-icon]
[button label on-click left-icon right-icon
- :button-classes ["bg-stone-800" "dark:bg-white"]
+ :button-classes ["bg-neutral-800" "dark:bg-neutral-200"]
:label-classes ["text-neutral-300" "dark:text-neutral-900"]])
(defn secondary-button
[label on-click left-icon right-icon]
[button label on-click left-icon right-icon
- :button-classes
- ["bg-neutral-100" "dark:bg-transparent" "border" "border-neutral-300"
- "dark:border-stone-700"]
+ :button-classes ["bg-neutral-100" "dark:bg-neutral-800"]
:label-classes ["text-neutral-500" "dark:text-white"]])
(defn generic-input
@@ -145,7 +143,7 @@
[:span.whitespace-nowrap label]]
classes ["relative" "flex" "items-center" "gap-x-3"
"hover:bg-neutral-200"
- "dark:hover:bg-neutral-700" "py-2" "px-3"
+ "dark:hover:bg-neutral-700" "py-2" "px-4"
"first:rounded-t" "last:rounded-b"]]
(if link
[:a
@@ -153,7 +151,7 @@
:target (when (:external? link) "_blank")
:class (str/join " " classes)}
content]
- [:li.font-semibold
+ [:li
{:on-click on-click
:class (str/join " " classes)}
(if (vector? item) item content)])))
@@ -161,7 +159,7 @@
(defn menu
[active? items & {:keys [right top bottom left] :or {right "15px" top "0px"}}]
(when-not (empty? (remove nil? items))
- [:ul.absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white
+ [:ul.absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white.shadow.shadow-neutral-400.dark:shadow-neutral-900
{:class (when-not active? "hidden")
:style {:right right :left left :top top :bottom bottom}}
(for [[i item] (map-indexed vector (remove nil? items))]
@@ -228,7 +226,7 @@
(defn error
[{:keys [_failure parse-error status status-text]} cb]
[:div.flex.flex-auto.h-full.items-center.justify-center.p-8
- [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-stone-700.bg-neutral-300.dark:bg-neutral-800.p-8
+ [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-neutral-700.bg-neutral-300.dark:bg-neutral-800.p-8
[:div.flex.items-center.gap-2.text-xl
[:i.fa-solid.fa-circle-exclamation]
[:h3.font-bold
@@ -249,8 +247,11 @@
(for [[i tab] (map-indexed vector tabs)]
(let [selected? (= (:id tab) (:id @!current))]
(when tab
- [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2.border-transparent
- {:class (if selected? :border-white :border-transparent) :key i}
+ [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2
+ {:class (if selected?
+ "border-neutral-700 dark:border-neutral-100"
+ "!border-transparent")
+ :key i}
[:button.flex-auto.py-4
{:on-click (when (not selected?)
(fn []
diff --git a/src/frontend/tubo/modals/views.cljs b/src/frontend/tubo/modals/views.cljs
index 1ff4bb1..de54cbc 100644
--- a/src/frontend/tubo/modals/views.cljs
+++ b/src/frontend/tubo/modals/views.cljs
@@ -5,7 +5,7 @@
(defn modal-content
[title body & extra-buttons]
- [:div.bg-white.dark:bg-neutral-900.max-h-full.flex.flex-col.flex-auto.shrink-0.gap-y-5.border.border-neutral-300.dark:border-stone-700.rounded.p-5.z-20
+ [:div.bg-white.dark:bg-neutral-900.max-h-full.flex.flex-col.flex-auto.shrink-0.gap-y-5.border.border-neutral-300.dark:border-neutral-700.rounded.p-5.z-20
[:div.flex.justify-between.shrink-0
[:h1.text-xl.font-semibold title]
[:button {:on-click #(rf/dispatch [:modals/close])}
diff --git a/src/frontend/tubo/navigation/views.cljs b/src/frontend/tubo/navigation/views.cljs
index 9cae66e..ea10ed3 100644
--- a/src/frontend/tubo/navigation/views.cljs
+++ b/src/frontend/tubo/navigation/views.cljs
@@ -42,7 +42,7 @@
(rf/dispatch [:search/change-query input]))
(reset! !query input))
:placeholder "Search"}]
- [:button.mx-4 {:type "submit"} [:i.fa-solid.fa-search]]
+ [:button.mx-3 {:type "submit"} [:i.fa-solid.fa-search]]
[:button.mx-4.text-xs.absolute.right-8.top-3
{:on-click #(when @!input
(set! (.-value @!input) "")
diff --git a/src/frontend/tubo/notifications/views.cljs b/src/frontend/tubo/notifications/views.cljs
index 66095a6..e4f8a53 100644
--- a/src/frontend/tubo/notifications/views.cljs
+++ b/src/frontend/tubo/notifications/views.cljs
@@ -5,11 +5,11 @@
(defn notification-content
[{:keys [failure parse-error status status-text] :as notification}]
(when notification
- [:div.relative.flex.justify-center.pl-4.pr-8.py-4.rounded.backdrop-blur.shadow.dark:shadow-neutral-900.shadow-neutral-700
+ [:div.relative.flex.justify-center.pl-4.pr-8.py-4.rounded.shadow.dark:shadow-neutral-900.shadow-neutral-400
{:class (case failure
:success ["bg-green-600/90" :text-white]
:error ["bg-red-600/90" :text-white]
- ["dark:bg-stone-800" "dark:text-white" :bg-neutral-300
+ ["dark:bg-neutral-800" "dark:text-white" :bg-neutral-100
:text-neutral-800])}
[:div.flex.items-center.gap-x-4
(case failure
diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs
index 7f7a874..ba6fbb5 100644
--- a/src/frontend/tubo/queue/views.cljs
+++ b/src/frontend/tubo/queue/views.cljs
@@ -11,16 +11,17 @@
(defn item-metadata
[{:keys [uploader-name name service-id duration thumbnail-url]} queue-pos i]
[:div.flex.cursor-pointer.py-2
- {:class (when (= i queue-pos) ["bg-neutral-200" "dark:bg-stone-800"])
+ {:class (when (= i queue-pos) ["bg-neutral-200" "dark:bg-neutral-800"])
:on-click #(rf/dispatch [:queue/change-pos i])}
- [:div.flex.items-center.justify-center.min-w-20.w-20.xs:min-w-28.xs:w-28
+ [:div.flex.items-center.justify-center.min-w-16.w-16.xs:min-w-28.xs:w-28
[:span.font-bold.text-neutral-400.text-sm
(if (= i queue-pos) [:i.fa-solid.fa-play] (inc i))]]
- [:div.w-36
- [layout/thumbnail thumbnail-url nil name duration :classes "h-16"]]
+ [:div.w-32.flex.items-center
+ [layout/thumbnail thumbnail-url nil name duration :classes
+ ["h-12" "xs:h-16"]]]
[:div.flex.flex-col.pl-4.pr-12.w-full
- [:h1.line-clamp-1.w-fit {:title name} name]
- [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row
+ [:h1.line-clamp-1.w-fit.text-sm.xs:text-lg {:title name} name]
+ [:div.text-neutral-600.dark:text-neutral-400.text-xs.xs:text-sm.flex.flex-col.xs:flex-row
[:span.line-clamp-1 {:title uploader-name} uploader-name]
[:span.px-2.hidden.xs:inline-block
{:dangerouslySetInnerHTML {:__html "&bull;"}}]
diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs
index 63184b4..9179017 100644
--- a/src/frontend/tubo/stream/views.cljs
+++ b/src/frontend/tubo/stream/views.cljs
@@ -100,7 +100,7 @@
[:div.flex.gap-2.py-2
(for [[i tag] (map-indexed vector tags)]
^{:key i}
- [:span.bg-neutral-300.dark:bg-neutral-800.rounded-md.p-2.text-sm
+ [:span.bg-neutral-300.dark:bg-neutral-800.rounded-md.p-2.text-sm.line-clamp-1
(str "#" tag)])]])))
(defn comments
@@ -159,14 +159,15 @@
[description stream]
[:div.mt-10
[layout/tabs
- [{:id :comments
- :label "Comments"
- :label-fn (fn [label]
- [:div.flex.gap-3.items-center.justify-center
- [:i.fa-solid.fa-comments]
- [:span label]
- [:span.dark:bg-neutral-800.rounded.px-2
- comments-length]])}
+ [{:id :comments
+ :label "Comments"
+ :label-fn
+ (fn [label]
+ [:div.flex.gap-3.items-center.justify-center
+ [:i.fa-solid.fa-comments]
+ [:span label]
+ [:span.bg-neutral-200.dark:bg-neutral-800.rounded.px-2
+ comments-length]])}
{:id :related-items
:label "Related Items"
:label-fn (fn [label]