lint

dtcooper · Aug 10, 2023 · ba4a043 · ba4a043
1 parent fc55de2
commit ba4a043
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/client/src/main/Header.svelte b/client/src/main/Header.svelte
@@ -16,7 +16,7 @@
 
 <div class="col-span-3 flex flex-col gap-6">
   <div class="flex items-center justify-between bg-base-200 px-5 py-2">
-    <div class="flex items-center gap-3 text-3xl font-mono italic">
+    <div class="flex items-center gap-3 font-mono text-3xl italic">
       <Icon icon={tomatoIcon} class="h-12 w-12" shape-rendering="crispEdges" viewBox="0 -.5 16 16" />
       {$config.STATION_NAME}
     </div>

diff --git a/client/src/main/Main.svelte b/client/src/main/Main.svelte
@@ -13,7 +13,9 @@
 
 <div class="max-w-screen flex h-screen max-h-screen w-screen flex-col gap-2">
   <Header bind:showSyncModal bind:showSettingsModal />
-  <div class="mx-auto grid max-h-fit w-full max-w-4xl flex-1 grid-cols-[3fr,1fr] grid-rows-[max-content,auto] gap-5 px-2">
+  <div
+    class="mx-auto grid max-h-fit w-full max-w-4xl flex-1 grid-cols-[3fr,1fr] grid-rows-[max-content,auto] gap-5 px-2"
+  >
     <Player />
   </div>
 </div>
diff --git a/client/src/main/player/Bar.svelte b/client/src/main/player/Bar.svelte
@@ -15,12 +15,15 @@
 </script>
 
 <div class="flex justify-center">
-  <div class="text-2xl font-mono font-bold" class:tomato-pulse={item.type === "wait" && item.overdue} style:--pulse-color="var(--er)">
+  <div
+    class="font-mono text-2xl font-bold"
+    class:tomato-pulse={item.type === "wait" && item.overdue}
+    style:--pulse-color="var(--er)"
+  >
     {#if item.type === "wait" && item.overtime}
       {#if item.overdue}
-        <span class="text-error italiv">
-          You are <span class="underline">OVERDUE</span> to play a {$config.STOPSET_ENTITY_NAME}.
-          Press play now.
+        <span class="italiv text-error">
+          You are <span class="underline">OVERDUE</span> to play a {$config.STOPSET_ENTITY_NAME}. Press play now.
         </span>
       {:else}
         <span class="text-success">Play next {$config.STOPSET_ENTITY_NAME} now</span>
@@ -57,9 +60,12 @@
             <span>{prettyDuration(asset.duration)}</span>
           </div>
         {/each}
-        <div class="absolute z-10 bg-base-100 left-0 h-full opacity-40" style:width={`${(item.elapsed / item.duration) * 100}%`} />
         <div
-          class="absolute z-10 h-full w-[6px] bg-base-content border-x-[1px] border-base-100"
+          class="absolute left-0 z-10 h-full bg-base-100 opacity-40"
+          style:width={`${(item.elapsed / item.duration) * 100}%`}
+        />
+        <div
+          class="absolute z-10 h-full w-[6px] border-x-[1px] border-base-100 bg-base-content"
           class:animate-pulse={!item.playing}
           style:left={`calc(${(item.elapsed / item.duration) * 100}% - 3px)`}
         />

diff --git a/client/src/main/player/List.svelte b/client/src/main/player/List.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <!-- col-span-2 until we have a single play rotator player -->
-<div class="col-span-2 flex h-0 min-h-full flex-col gap-2 border-base-content bg-base-200 rounded-lg p-1.5">
+<div class="col-span-2 flex h-0 min-h-full flex-col gap-2 rounded-lg border-base-content bg-base-200 p-1.5">
   <div class="flex flex-1 flex-col overflow-y-auto" id="playlist">
     {#each items as item, index (item.generatedId)}
       {@const isFirstItem = index === 0}
@@ -28,7 +28,7 @@
               class:border-base-content={!isFirstItem || (!asset.finished && !asset.active)}
             >
               <div
-                class="flex items-center gap-3 overflow-hidden px-3 py-1 text-secondary-content min-h-[5rem]"
+                class="flex min-h-[5rem] items-center gap-3 overflow-hidden px-3 py-1 text-secondary-content"
                 style={asset.finished
                   ? ""
                   : `background: linear-gradient(to right, hsl(var(--sf)) 0%, hsl(var(--sf)) ${asset.percentDone}%, hsl(var(--s)) ${asset.percentDone}%, hsl(var(--s)) 100%);`}
@@ -37,7 +37,7 @@
               >
                 {#if $userConfig.uiMode > 0}
                   <div
-                    class="radial-progress h-18 w-18 font-mono text-sm"
+                    class="h-18 w-18 radial-progress font-mono text-sm"
                     style:--value={(asset.elapsed / asset.duration) * 100}
                     style:--thickness={asset.elapsed === 0 ? "0" : "0.4rem"}
                   >
@@ -46,7 +46,11 @@
                 {/if}
                 <div class="flex flex-1 flex-col overflow-x-hidden">
                   <div class="font-sm truncate">
-                    <span class="badge font-medium border-secondary-content" style:background-color={asset.color.value} style:color={asset.color.content}>
+                    <span
+                      class="badge border-secondary-content font-medium"
+                      style:background-color={asset.color.value}
+                      style:color={asset.color.content}
+                    >
                       {asset.rotator.name}
                     </span>
                   </div>
@@ -66,12 +70,12 @@
         {:else if item.type === "wait"}
           <div class="border-l-4 pl-2" class:border-base-content={!isFirstItem} class:border-success={isFirstItem}>
             <div
-              class="flex items-center gap-3 overflow-hidden px-3 py-1 text-neutral-content min-h-[5rem]"
+              class="flex min-h-[5rem] items-center gap-3 overflow-hidden px-3 py-1 text-neutral-content"
               style:background-image={`linear-gradient(to right, hsl(var(--nf)) 0%, hsl(var(--nf)) ${item.percentDone}%, hsl(var(--n)) ${item.percentDone}%, hsl(var(--n)) 100%)`}
             >
               {#if $userConfig.uiMode > 0}
                 <div
-                  class="radial-progress w-18 h-18 font-mono text-sm"
+                  class="w-18 h-18 radial-progress font-mono text-sm"
                   style:--value={(item.elapsed / item.duration) * 100}
                   style:--thickness={item.elapsed === 0 ? "0" : "0.4rem"}
                 >