summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/gallery.js37
-rw-r--r--public/style.css13
2 files changed, 27 insertions, 23 deletions
diff --git a/public/gallery.js b/public/gallery.js
index 19d63bb..ca1e511 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -8,6 +8,8 @@ function call(method, params) {
})
}
+const loading = (window.location.hostname !== 'localhost') ? 'lazy' : undefined
+
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
let BrowseModel = {
@@ -85,18 +87,13 @@ let BrowseView = {
oncreate(vnode) { vnode.dom.focus() },
view(vnode) {
- const loading = undefined
- if (window.location.hostname !== 'localhost')
- loading = 'lazy'
-
return m('.browser[tabindex=0]', {
// Trying to force the oncreate on path changes.
key: BrowseModel.path,
}, BrowseModel.entries.map(e => {
return m(m.route.Link, {href: `/view/${e.sha1}`},
- m('img', {src: `/thumb/${e.sha1}`,
- width: e.thumbW, height: e.thumbH, title: e.name,
- loading}))
+ m('img.thumbnail', {src: `/thumb/${e.sha1}`,
+ width: e.thumbW, height: e.thumbH, title: e.name, loading}))
}))
},
}
@@ -244,8 +241,8 @@ let SimilarThumbnail = {
view(vnode) {
const info = vnode.attrs.info
return m(m.route.Link, {href: `/view/${info.sha1}`},
- m('img', {src: `/thumb/${info.sha1}`,
- width: info.thumbW, height: info.thumbH}))
+ m('img.thumbnail', {src: `/thumb/${info.sha1}`,
+ width: info.thumbW, height: info.thumbH, loading}))
},
}
@@ -324,22 +321,24 @@ let DuplicatesThumbnail = {
const info = vnode.attrs.info
return [
m(m.route.Link, {href: `/similar/${info.sha1}`},
- m('img', {src: `/thumb/${info.sha1}`,
- width: info.thumbW, height: info.thumbH})),
- info.occurences,
+ m('img.thumbnail', {src: `/thumb/${info.sha1}`,
+ width: info.thumbW, height: info.thumbH, loading})),
+ (info.occurences != 1) ? ` ×${info.occurences}` : [],
]
},
}
let DuplicatesList = {
- view(vnode) {
- if (DuplicatesModel.entries.length == 0)
- return "No duplicates"
+ // See BrowseView.
+ oncreate(vnode) { vnode.dom.focus() },
- return m('.duplicates', {}, DuplicatesModel.entries.map(group =>
- m('.row', group.map(entry =>
- m(DuplicatesThumbnail, {info: entry}))),
- ))
+ view(vnode) {
+ let children = (DuplicatesModel.entries.length == 0)
+ ? "No duplicates"
+ : DuplicatesModel.entries.map(group =>
+ m('.row', group.map(entry =>
+ m(DuplicatesThumbnail, {info: entry}))))
+ return m('.duplicates[tabindex=0]', {}, children)
},
}
diff --git a/public/style.css b/public/style.css
index d18735d..978e01b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -32,9 +32,13 @@ ul.sidebar li.child a {
.browser { overflow: auto; display: flex; flex-wrap: wrap;
align-content: flex-start; justify-content: center; align-items: center;
- gap: 10px; padding: 9px; }
+ gap: 3px; padding: 9px; }
.browser:focus-visible { outline: 0; box-shadow: none; }
-.browser img { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); }
+
+img.thumbnail { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
+ margin: 3px; border: 0px solid #000;
+ background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%)
+ 50% / 20px 20px; }
.view { display: flex; flex-grow: 1; overflow: hidden;
justify-content: center; align-items: center; }
@@ -52,8 +56,9 @@ ul.sidebar li.child a {
.similar { padding: .5rem; flex-grow: 1; overflow: auto; }
.similar h2 { margin: 1em 0 0.5em 0; padding: 0; font-size: 1.2rem; }
-.similar .row { display: flex; }
+.similar .row { display: flex; margin: .5rem 0; }
.similar .row ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
.duplicates { padding: .5rem; flex-grow: 1; overflow: auto; }
-.duplicates .row { display: flex; }
+.duplicates .row { display: flex; margin: .5rem 0;
+ align-items: center; gap: 3px; }