From d4c9e4947d794dd6cfc79199fffd85592515b6b3 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Mon, 2 Dec 2024 00:46:39 +0100 Subject: feat: add responsive styles to thumbnails --- src/frontend/tubo/items/views.cljs | 2 +- src/frontend/tubo/layout/views.cljs | 6 +++--- src/frontend/tubo/queue/views.cljs | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs index 2de6004..2f8f419 100644 --- a/src/frontend/tubo/items/views.cljs +++ b/src/frontend/tubo/items/views.cljs @@ -111,7 +111,7 @@ [: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]" + [:py-2 :h-28 "sm:h-36" "min-w-[130px]" "max-w-[130px]" "sm:min-w-[250px]" "sm:max-w-[250px]"] :rounded? true] [:div.flex.flex-col.flex-auto.xs:mr-2.gap-y-2 diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs index 26a5cb9..abc6027 100644 --- a/src/frontend/tubo/layout/views.cljs +++ b/src/frontend/tubo/layout/views.cljs @@ -18,8 +18,8 @@ [: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"}} + [:div.rounded.p-1.xs:p-2.absolute.bottom-1.right-1.z-0 + {:class "bg-[rgba(0,0,0,.7)]"} [:p.text-white.text-xs.xs:text-base (if (= duration 0) "LIVE" @@ -143,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-4" + "dark:hover:bg-neutral-700" "py-2.5" "px-4" "first:rounded-t" "last:rounded-b"]] (if link [:a diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs index ba6fbb5..d382466 100644 --- a/src/frontend/tubo/queue/views.cljs +++ b/src/frontend/tubo/queue/views.cljs @@ -16,9 +16,9 @@ [: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-32.flex.items-center + [:div.flex.items-center.shrink-0.grow-0 [layout/thumbnail thumbnail-url nil name duration :classes - ["h-12" "xs:h-16"]]] + ["h-12" "xs:h-16" "w-16" "xs:w-24" "md:w-32"]]] [:div.flex.flex-col.pl-4.pr-12.w-full [: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 -- cgit v1.2.3