summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTim Keller <tjk@tjkeller.xyz>2025-06-11 23:00:13 -0500
committerTim Keller <tjk@tjkeller.xyz>2025-06-11 23:00:13 -0500
commit1d74f99994ed4827ba1c6157f92a8de28ecdaca3 (patch)
treef382b2a8625945698df831e47409d40b7e4c5cca
parent0d1dc1eee6b4abe21622c8510d892cfabc08adc3 (diff)
downloadimmich-frame-1d74f99994ed4827ba1c6157f92a8de28ecdaca3.tar.xz
immich-frame-1d74f99994ed4827ba1c6157f92a8de28ecdaca3.zip
start to simplify a bit with tailwind
Diffstat
-rw-r--r--public/index.html34
-rw-r--r--src/albums.js9
-rw-r--r--src/style.css89
3 files changed, 23 insertions, 109 deletions
diff --git a/public/index.html b/public/index.html
index df128f2..fab37f6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<script src="/main.js" defer></script>
</head>
-<body>
+<body class="fill-white">
<header></header>
<main>
<div id="slideshow" style="display:none">
@@ -21,40 +21,40 @@
<div class="carousel-cell"><img src="" /></div>
</template>
<div id="slideshow-bottom-controls">
- <button id="prevSlide"><svg alt="Previous Slide"><use href="#sprite-skip_previous"></use></svg></button>
- <button id="playPause"><svg alt="Pause"><use href="#sprite-pause"></use></svg></button>
- <button id="nextSlide"><svg alt="Next Slide"><use href="#sprite-skip_next"></use></svg></button>
+ <button id="prevSlide"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
+ <button id="playPause"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button>
+ <button id="nextSlide"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button>
</div>
</div>
<div id="albums" style="display:none">
- <input id="album-search" placeholder="Search your albums" />
+ <input class="rounded-2xl" id="album-search" placeholder="Search your albums" />
<div id="albums-container"></div>
<template id="album-template">
- <div class="album">
- <svg class="album-selector p24" alt="Select Album"><use href="#sprite-check_circle"></use></svg>
- <img class="album-thumb hover:invert" />
- <div class="album-desc-grid">
+ <div class="album group border border-blue-950 cursor-pointer data-selected:bg-slate-950 data-selected:hover:bg-slate-900 hover:bg-gray-900">
+ <svg class="opacity-0 group-hover:opacity-50 group-data-selected:opacity-100 group-data-selected:fill-blue-300 self-center size-6" alt="Select Album"><use href="#sprite-check_circle"></use></svg>
+ <img class="aspect-square object-cover rounded-2xl group-hover:shadow-md" />
+ <div class="flex justify-between self-center text-lg">
<div>
- <span class="album-name font-bold"></span>
+ <span class="album-name font-bold group-hover:text-blue-300"></span>
<div class="album-info">
<span><span class="album-assets-count"></span> items</span>
<span class="album-shared">&bull; Shared</span>
</div>
</div>
</div>
- <svg class="album-open p24" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg>
+ <svg class="opacity-0 group-hover:opacity-100 absolute bottom-4 right-4 size-6" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg>
</div>
</template>
</div>
<div id="settings" style="display:none">
</div>
</main>
- <footer>
- <div id="bottom-container">
- <div id="menu">
- <a href="/slideshow"><svg><use href="#sprite-slideshow"></use></svg><span>Slideshow</span></a>
- <a href="/albums"> <svg><use href="#sprite-photo_album"></use></svg><span>Albums</span></a>
- <a href="/settings"> <svg><use href="#sprite-settings"></use></svg><span>Settings</span></a>
+ <footer class="w-full">
+ <div class="max-w-5xl m-auto">
+ <div id="menu" class="flex w-full p-4 gap-4 box-border border-t border-gray-500">
+ <a href="/slideshow" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-slideshow"></use></svg><span>Slideshow</span></a>
+ <a href="/albums" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a>
+ <a href="/settings" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-settings"></use></svg><span>Settings</span></a>
</div>
</div>
</footer>
diff --git a/src/albums.js b/src/albums.js
index 19602df..529a02e 100644
--- a/src/albums.js
+++ b/src/albums.js
@@ -8,8 +8,8 @@ export default async function initAlbums(albumsPageContainer) {
async function createAlbum(res) {
console.log(res.albumName, res.id, res.startDate, res.endDate, res.assetCount, res.shared)
const albumClone = albumTemplate.content.cloneNode(true)
- albumClone.querySelector(".album").dataset.key = res.id
- albumClone.querySelector(".album-thumb").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
+ albumClone.firstElementChild.dataset.key = res.id
+ albumClone.querySelector("img").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
albumClone.querySelector(".album-name").textContent = res.albumName
albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString()
if (!res.shared)
@@ -33,7 +33,10 @@ export default async function initAlbums(albumsPageContainer) {
return
console.log(album)
- album.classList.toggle("selected")
+ if (album.dataset.selected)
+ delete album.dataset.selected
+ else
+ album.dataset.selected = "1"
})
return true
diff --git a/src/style.css b/src/style.css
index f370f2c..1b0109f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,8 +11,6 @@
--immich-dark-hover-border: rgb(31 41 55);
}
-.font-bold { font-weight: 700 }
-
body {
background: black;
color-scheme: dark;
@@ -33,17 +31,6 @@ main, #slideshow {
overflow: hidden;
}
-svg {
- fill: white;
- width: 100%;
- height: 100%;
-
- &.p24 {
- width: 24px;
- height: 24px;
- }
-}
-
/* slideshow */
#slideshow-carousel {
height: 100%
@@ -107,7 +94,6 @@ svg {
#album-search {
display: block;
padding: 1rem;
- border-radius: 1rem;
border: 0;
margin: 1rem auto;
width: 100%;
@@ -133,57 +119,6 @@ svg {
border: 1px solid transparent;
border-bottom: 1px solid var(--selected-border);
border-top: 1px solid var(--selected-border);
- /*border-bottom: 1px solid var(--immich-dark-hover-border);*/
-
- .album-selector {
- opacity: 0;
- border-radius: 50%;
- align-self: center
- }
-
- &.selected {
- background: var(--selected-bg);
- }
-
- &:hover {
- cursor: pointer;
- background: var(--immich-dark-hover-bg);
- border: 1px solid var(--immich-dark-hover-border);
-
- .album-selector { opacity: .5 }
- .album-thumb {
- box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
- }
- .album-name { color: var(--immich-dark-primary) }
- .album-open { opacity: 1 }
- }
-
-
- &.selected .album-selector {
- opacity: 1;
- fill: var(--immich-dark-primary);
- background: black;
- }
- }
-
- .album-thumb {
- aspect-ratio: 1/1;
- object-fit: cover;
- border-radius: 1rem;
- }
-
- .album-desc-grid {
- display: flex;
- justify-content: space-between;
- align-self: center;
- font-size: 18px;
- }
-
- .album-open {
- position: absolute;
- bottom: 1rem;
- right: 1rem;
- opacity: 0;
}
}
@@ -192,7 +127,6 @@ svg {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
width: 100%;
- .album-info { font-size-adjust: .4; }
}
}
@@ -203,42 +137,19 @@ svg {
}
}
-footer {
- width: 100%;
-}
-
-#bottom-container {
- max-width: 1024px;
- margin: auto;
-}
-
#menu {
a {
display: flex;
- color: white;
align-items: center;
justify-content: center;
text-decoration: none;
width: 100%;
gap: 1rem;
- &:hover {
- color: var(--immich-dark-primary);
-
- svg{ fill: var(--immich-dark-primary) }
- }
-
- svg { height: 24px; width: 24px }
span {
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
}
}
- display: flex;
- width: 100%;
- padding: 1rem;
- gap: 2ex;
- box-sizing: border-box;
- border-top: 1px solid rgb(55, 65, 81);
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-02 20:25:47 +0000