diff options
| -rw-r--r-- | public/index.html | 68 | ||||
| -rw-r--r-- | src/style.css | 93 | ||||
| -rw-r--r-- | webpack.config.js | 10 |
3 files changed, 53 insertions, 118 deletions
diff --git a/public/index.html b/public/index.html index dc140fe..bd55000 100644 --- a/public/index.html +++ b/public/index.html @@ -9,26 +9,28 @@ <header></header> <main class="my-4"> <div id="slideshow" class="hidden!"> - <div id="slideshow-top-controls"> - <div id="slideshow-share"> - <button id="share" class="svgbtn p-3 size-12"><svg alt="Share" class="size-6"><use href="#sprite-share"></use></svg></button> - <button id="download" class="svgbtn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button> + <div class="flex justify-end pe-[10vw] w-full absolute bg-gradient-to-b from-black/40 z-20"> + <div id="slideshow-share" class="z-10"> + <button id="share" class="svg-btn p-3 size-12"><svg alt="Share" class="size-6"><use href="#sprite-share"></use></svg></button> + <button id="download" class="svg-btn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button> <!-- <button id="hide"><svg alt="Don't Show This Image"><use href="#skip_next"></use></svg></button> --> </div> </div> <div id="slideshow-carousel" class="h-full"></div> <template id="carousel-cell-template"> - <div class="carousel-cell"><img src="" /></div> + <div class="carousel-cell"><img class="carousel-img" src="" /></div> </template> - <div id="slideshow-bottom-controls" class="grid grid-cols-3 max-w-3xl"> - <button id="prevSlide" class="svgbtn"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button> - <button id="playPause" class="svgbtn"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button> - <button id="nextSlide" class="svgbtn"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button> + <div class="grid grid-cols-3 w-full max-w-3xl m-auto justify-items-center py-4"> + <button id="prevSlide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button> + <button id="playPause" class="svg-btn size-12"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button> + <button id="nextSlide" class="svg-btn size-12"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button> </div> </div> - <div id="albums" class="hidden!"> - <input class="rounded-2xl max-w-3xl" id="album-search" placeholder="Search your albums" /> - <div id="albums-container"></div> + <div id="albums" class="hidden! overflow-y-scroll"><div class="px-4 m-auto max-w-3xl"> + <div class="p-2 sticky top-0 z-20 bg-black"> + <input class="rounded-input mx-auto mb-4 w-full" id="album-search" placeholder="Search your albums" /> + </div> + <div id="albums-container" class="m-auto z-10"></div> <template id="album-template"> <div class="album group"> <svg class="opacity-0 self-center size-6 group-hover:opacity-50 @@ -50,52 +52,48 @@ </a> </div> </template> - </div> - <div id="settings" class="hidden!"> - <form class="flex flex-col gap-4 m-auto max-w-3xl"> - <fieldset> - <h2> + </div></div> + <div id="settings" class="hidden! overflow-y-scroll"> + <form class="flex flex-col gap-4 m-auto max-w-3xl mx-auto px-4"> + <fieldset class="rounded-fieldset"> + <h2 class="fieldset-header"> <svg class="size-6 inline"><use href="#sprite-camera"></use></svg> Immich Server </h2> <div> - <label>Immich URL</label> + <label class="settings-label">Immich URL</label> <p>Complete Immich base url (e.g. <span class="font-medium">http://immich.local</span>)</p> </div> <input class="rounded-input" name="immich_url" type="text" /> <div> - <label>Immich API Key</label> + <label class="settings-label">Immich API Key</label> <p>Generate an API key in User Settings</p> </div> <input class="rounded-input" name="immich_api_key" type="text" /> </fieldset> - <fieldset> - <h2> + <fieldset class="rounded-fieldset"> + <h2 class="fieldset-header"> <svg class="size-6 inline"><use href="#sprite-photo_frame"></use></svg> Display </h2> - <div class="grid grid-cols-[16fr_9fr] gap-6"> + <div class="grid md:grid-cols-[16fr_9fr] gap-4"> <div> - <label>Image Duration</label> + <label class="settings-label">Image Duration</label> <p>Number of seconds each image will be displayed.</p> </div> <input class="my-auto rounded-input" name="image_duration" type="number" /> <div> - <label>Transition Duration</label> + <label class="settings-label">Transition Duration</label> <p>Number of seconds each transition between images will take.<br>Set as 0 to disable.</p> </div> <input class="my-auto rounded-input" name="transition_duration" type="number" /> <div> - <label>Max Framerate</label> + <label class="settings-label">Max Framerate</label> <p>Target display framerate.<br>Simple transitions look good as low as 12-15 fps.</p> </div> <input class="my-auto rounded-input" name="max_framerate" type="number" /> - <!--<div> - <label>Auto Transition</label> - <input name="auto_transition" type="checkbox" /> - </div>--> <div> - <label>Display Size</label> + <label class="settings-label">Display Size</label> <p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p> </div> <select class="my-auto rounded-input" name="display_size"> @@ -104,22 +102,22 @@ <option value="fullsize">Original Image</option> </select> <div> - <label>Max Cached Assets</label> + <label class="settings-label">Max Cached Assets</label> <p>Number of assets that can exist at once in RAM.<br>Each additional asset will take ~2x the display size in memory.</p> </div> <input class="my-auto rounded-input" name="max_cache_assets" type="number" /> </div> </fieldset> - <input class="rounded-button ml-auto" type="submit" value="Save Settings" /> + <input class="rounded-btn ml-auto" type="submit" value="Save Settings" /> </form> </div> </main> <footer class="w-full"> <div class="max-w-5xl m-auto"> <div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500"> - <a href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow" ></use></svg><span>Slideshow</span></a> - <a href="/albums" ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a> - <a href="/settings" ><svg class="size-6"><use href="#sprite-settings" ></use></svg><span>Settings</span></a> + <a class="nav-btn" href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow" ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a> + <a class="nav-btn" href="/albums" ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span class="max-[425px]:hidden">Albums</span></a> + <a class="nav-btn" href="/settings" ><svg class="size-6"><use href="#sprite-settings" ></use></svg><span class="max-[425px]:hidden">Settings</span></a> </div> </div> </footer> diff --git a/src/style.css b/src/style.css index f4bf0a0..4760434 100644 --- a/src/style.css +++ b/src/style.css @@ -3,13 +3,6 @@ :root { --font-sans: "Overpass", sans-serif; - --immich-dark-primary: rgb(172 203 250); - --immich-dark-secondary: rgb(33 33 33); - --immich-dark-secondary-border: rgb(33 33 33 / .1); - --selected-bg: rgb(172 203 250 / .1); - --selected-border: rgb(172 203 250 / .1); - --immich-dark-hover-bg: rgb(17 24 39); - --immich-dark-hover-border: rgb(31 41 55); @apply scheme-dark; } @@ -20,93 +13,45 @@ main, #slideshow { overflow: hidden; } -.svgbtn { +.svg-btn { @apply bg-none border-0 p-0 cursor-pointer; } -/* slideshow */ -.carousel-cell { - @apply h-full w-[70vw] m-3 md:w-[80vw] md:m-6; - - img { - @apply align-middle h-full max-w-full object-contain; - } -} - -#slideshow-share, -#slideshow-bottom-controls { - display: flex; - width: 80vw; - margin: auto; - justify-content: right; -} - - -#slideshow-bottom-controls { - margin: 48px auto; - button { - width: 48px; - height: 48px; - margin: auto; - } -} - -/* albums */ -#albums { - height: 100%; - overflow: scroll; - margin-inline: 1rem; +.nav-btn { + @apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full + hover:text-blue-300 hover:fill-blue-300 + data-selected:text-blue-300 data-selected:fill-blue-300 + data-selected:bg-gray-900 + ; } -#album-search { - display: block; - padding: 1rem; - border: 0; - margin: 1rem auto; - width: 100%; - max-width: 768px; - background-color: var(--immich-dark-secondary); - &:focus { outline: 2px solid rgb(55, 65, 81) } +.carousel-cell { + @apply h-full w-[70vw] mx-3 md:w-[80vw] md:mx-6; } -#albums-container { - grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr)); - @apply grid w-max m-auto p-8; +.carousel-img { + @apply align-middle h-full max-w-full object-contain; } -#albums-container .album { - border: 1px solid transparent; - border-bottom: 1px solid var(--selected-border); - border-top: 1px solid var(--selected-border); +.album { @apply flex relative h-40 gap-6 p-3 cursor-pointer + border-y border-slate-800 data-selected:bg-slate-950 data-selected:hover:bg-slate-900 hover:bg-gray-900 ; } -/* settings */ -fieldset { +.rounded-fieldset { @apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4; } - -fieldset h2 { +.fieldset-header { @apply font-bold text-blue-300 fill-blue-300 text-xl; } -fieldset label { - @apply font-medium text-blue-200 +.settings-label { + @apply font-medium text-blue-200; } - .rounded-input { - @apply rounded-2xl bg-zinc-800 p-4 + @apply rounded-2xl bg-zinc-800 p-4; } - -.rounded-button { +.rounded-btn { @apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium; } - -#menu a { - @apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full - hover:text-blue-300 hover:fill-blue-300 - data-selected:text-blue-300 data-selected:fill-blue-300 - data-selected:bg-gray-900 - ; -} diff --git a/webpack.config.js b/webpack.config.js index ba6756e..6204e46 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,15 +10,7 @@ module.exports = { "css-loader", { loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - require("autoprefixer"), - require("postcss-nested"), - require("@tailwindcss/postcss"), - ] - } - } + options: { postcssOptions: { plugins: [ require("@tailwindcss/postcss") ] } }, }, ], }, |