diff options
| author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-30 00:45:25 +0100 |
|---|---|---|
| committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2023-10-30 00:45:25 +0100 |
| commit | bd50163cd746d230a984df31da6010632cc80f54 (patch) | |
| tree | 8e020bfe8d63a3bb5cff15b617ea1d32bc21f735 /src | |
| parent | c5ecb74930c688420749773ff2100bcfb96c4342 (diff) | |
feat(frontend): refine play queue styles
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/tubo/components/play_queue.cljs | 47 |
1 files changed, 23 insertions, 24 deletions
diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs index 98ce513..258d06e 100644 --- a/src/frontend/tubo/components/play_queue.cljs +++ b/src/frontend/tubo/components/play_queue.cljs @@ -27,31 +27,30 @@ [:div.mx-2 [:i.fa-solid.fa-close.cursor-pointer {:on-click #(rf/dispatch [::events/toggle-media-queue])}]]] - [:div.flex.flex-col.p-4.w-full.overflow-y-auto.flex-auto + [:div.flex.flex-col.sm:p-4.w-full.overflow-y-auto.flex-auto {:class "ml:w-4/5 xl:w-3/5"} - [:div - (for [[i {:keys [uploader-name uploader-url name duration - stream url service-color thumbnail-url]}] (map-indexed vector media-queue)] - (let [service-name (case service-color - "#cc0000" "YouTube" - "#ff7700" "SoundCloud" - "#333333" "media.ccc.de" - "#F2690D" "PeerTube" - "#629aa9" "Bandcamp")] - [:div.flex.w-full.rounded.px-2.cursor-pointer - {:key i - :class (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800") - :on-click #(do - (rf/dispatch [::events/change-media-queue-pos i]) - (reset! !elapsed-time 0))} - [:div.xs:w-56.items-center - [items/thumbnail thumbnail-url nil url name duration]] - [:div.flex.flex-col.px-4.py-2.w-full - [:h1.pb-4.line-clamp-2 name] - [:h3.text-neutral-600.dark:text-neutral-300.text-sm - [:span.pr-2 uploader-name] - [:span {:dangerouslySetInnerHTML {:__html "•"}}] - [:span.pl-2 service-name]]]]))]] + (for [[i {:keys [uploader-name uploader-url name duration + stream url service-color thumbnail-url]}] (map-indexed vector media-queue)] + (let [service-name (case service-color + "#cc0000" "YouTube" + "#ff7700" "SoundCloud" + "#333333" "media.ccc.de" + "#F2690D" "PeerTube" + "#629aa9" "Bandcamp")] + [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.my-2 + {:key i + :class (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800") + :on-click #(do + (rf/dispatch [::events/change-media-queue-pos i]) + (reset! !elapsed-time 0))} + [:div.w-56 + [items/thumbnail thumbnail-url nil url name duration {:classes "h-24"}]] + [:div.flex.flex-col.px-4.py-2.w-full + [:h1.line-clamp-1 name] + [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row + [:span.line-clamp-1 uploader-name] + [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}] + [:span service-name]]]]))] [:div.flex.flex-col.p-4.w-full.shrink-0 {:class "ml:w-4/5 xl:w-3/5"} [:div.flex.flex-col.w-full.py-2 |