diff options
| author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-28 22:00:14 +0200 |
|---|---|---|
| committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-28 22:00:14 +0200 |
| commit | 278109c545762a33ba7ef5f68d3161079423e243 (patch) | |
| tree | 0a2711e2879de7b756ca247e362ad0e355d8cba9 /src | |
| parent | 679d70f1b2f006f1f3c3c6d1a4fb328362bb445d (diff) | |
feat(frontend): improve the layout of item cards
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/tubo/components/items.cljs | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs index 6ca5515..1881d06 100644 --- a/src/frontend/tubo/components/items.cljs +++ b/src/frontend/tubo/components/items.cljs @@ -22,27 +22,30 @@ (defn item-content [{:keys [type url name thumbnail-url description subscriber-count stream-count verified? key uploader-name uploader-url - uploader-avatar upload-date short-description view-count]} + uploader-avatar upload-date short-description view-count + duration]} item-route service-color] [:<> (when name [:div.flex.items-center.my-2 [:a {:href item-route :title name} - [:h1.line-clamp-2.my-1 name]] + [:h1.line-clamp-2.my-1.break-words name]] (when (and verified? (not uploader-url)) [:i.fa-solid.fa-circle-check.pl-2])]) [:div.flex.justify-between [:div.flex.items-center.my-2 (if uploader-url [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} - [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name]] + [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2.break-all uploader-name]] [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name]) (when (and uploader-url verified?) [:i.fa-solid.fa-circle-check])] (when (= type "stream") [:button.pl-4.focus:outline-none {:on-click #(rf/dispatch [::events/switch-to-audio-player - {:uploader-name uploader-name + {:duration duration + :thumbnail-url thumbnail-url + :uploader-name uploader-name :uploader-url uploader-url :name name :url url @@ -83,7 +86,7 @@ (defn generic-item [item service-color] - [:div.w-full.xs:w-56.h-80.xs:h-72.my-2 {:key key} + [:div.w-full.h-80.xs:h-72.my-2 {:key key} [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full (case (:type item) "stream" [stream-item item service-color] @@ -98,7 +101,8 @@ (if (empty? related-streams) [:div.flex.items-center [:p "No available streams"]] - [:div.flex.justify-center.flex-wrap + [:div.grid.w-full + {:class "grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))]"} (for [[i item] (map-indexed vector related-streams) :let [keyed-item (assoc item :key i)]] [generic-item keyed-item service-color])]) |