diff options
| -rw-r--r-- | public/gallery.js | 30 | ||||
| -rw-r--r-- | public/style.css | 8 |
2 files changed, 24 insertions, 14 deletions
diff --git a/public/gallery.js b/public/gallery.js index c7d21a1..5df58e6 100644 --- a/public/gallery.js +++ b/public/gallery.js @@ -64,6 +64,17 @@ let Header = { }, } +let Thumbnail = { + view(vnode) { + const e = vnode.attrs.info + if (!e.thumbW || !e.thumbH) + return m('.thumbnail.missing', {...vnode.attrs, info: null}) + return m('img.thumbnail', {...vnode.attrs, info: null, + src: `/thumb/${e.sha1}`, width: e.thumbW, height: e.thumbH, + loading}) + }, +} + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - let BrowseModel = { @@ -144,10 +155,9 @@ let BrowseView = { 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.thumbnail', {src: `/thumb/${e.sha1}`, - width: e.thumbW, height: e.thumbH, title: e.name, loading})) + }, BrowseModel.entries.map(info => { + return m(m.route.Link, {href: `/view/${info.sha1}`}, + m(Thumbnail, {info, title: info.name})) })) }, } @@ -289,8 +299,7 @@ let SimilarThumbnail = { view(vnode) { const info = vnode.attrs.info return m(m.route.Link, {href: `/view/${info.sha1}`}, - m('img.thumbnail', {src: `/thumb/${info.sha1}`, - width: info.thumbW, height: info.thumbH, loading})) + m(Thumbnail, {info})) }, } @@ -363,8 +372,7 @@ let DuplicatesThumbnail = { const info = vnode.attrs.info return [ m(m.route.Link, {href: `/similar/${info.sha1}`}, - m('img.thumbnail', {src: `/thumb/${info.sha1}`, - width: info.thumbW, height: info.thumbH, loading})), + m(Thumbnail, {info})), (info.occurences != 1) ? ` ×${info.occurences}` : [], ] }, @@ -416,8 +424,7 @@ let OrphansReplacement = { return [ ` → `, m(m.route.Link, {href: `/view/${info.sha1}`}, - m('img.thumbnail', {src: `/thumb/${info.sha1}`, - width: info.thumbW, height: info.thumbH, loading})), + m(Thumbnail, {info})), `${info.tags} tags`, ] }, @@ -429,8 +436,7 @@ let OrphansRow = { return m('.row', [ // It might not load, but still allow tag viewing. m(m.route.Link, {href: `/view/${info.sha1}`}, - m('img.thumbnail', {src: `/thumb/${info.sha1}`, - width: info.thumbW, height: info.thumbH, loading})), + m(Thumbnail, {info})), `${info.tags} tags`, m(OrphansReplacement, {info: info.replacement}), ]) diff --git a/public/style.css b/public/style.css index 0df44d9..888fd6a 100644 --- a/public/style.css +++ b/public/style.css @@ -46,10 +46,14 @@ ul.sidebar li.child a { gap: 3px; padding: 9px; } .browser:focus-visible { outline: 0; box-shadow: none; } -img.thumbnail { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); - margin: 3px; border: 0px solid #000; +img.thumbnail { display: block; background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 20px 20px; } +img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); + margin: 3px; border: 0px solid #000; } +.thumbnail.missing { width: 128px; height: 128px; position: relative; } +.thumbnail.missing::after { content: '?'; font-size: 64px; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .view { display: flex; flex-grow: 1; overflow: hidden; justify-content: center; align-items: center; } |