diff options
| -rw-r--r-- | public/gallery.js | 37 | ||||
| -rw-r--r-- | public/style.css | 13 |
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; } |