p
/
gallery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gallery: make it possible to collapse tag spaces

This commit is contained in:
Přemysl Eric Janouch 2024-01-23 11:30:55 +01:00
parent 5e0e9f8a42
commit 84a94933b3
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/gallery.js
View File

@ -472,13 +472,15 @@ let ViewBar = {
m('ul', ViewModel.paths.map(path => m('ul', ViewModel.paths.map(path =>
m('li', m(ViewBarPath, {path})))), m('li', m(ViewBarPath, {path})))),
m('h2', "Tags"), m('h2', "Tags"),
Object.entries(ViewModel.tags).map(([space, tags]) => [ Object.entries(ViewModel.tags).map(([space, tags]) =>
m("h3", m(m.route.Link, {href: `/tags/${space}`}, space)), m('details[open]', [
m("ul.tags", Object.entries(tags) m('summary', m("h3",
.sort(([t1, w1], [t2, w2]) => (w2 - w1)) m(m.route.Link, {href: `/tags/${space}`}, space))),
.map(([tag, score]) => m("ul.tags", Object.entries(tags)
m(ScoredTag, {space, tagname: tag, score}))), .sort(([t1, w1], [t2, w2]) => (w2 - w1))
]), .map(([tag, score]) =>
m(ScoredTag, {space, tagname: tag, score}))),
])),
]) ])
}, },
} }
@ -609,13 +611,14 @@ let SearchRelated = {
view(vnode) { view(vnode) {
return Object.entries(SearchModel.related) return Object.entries(SearchModel.related)
.sort((a, b) => a[0].localeCompare(b[0])) .sort((a, b) => a[0].localeCompare(b[0]))
.map(([space, tags]) => [ .map(([space, tags]) => m('details[open]', [
m('h2', space), m('summary', m('h2',
m(m.route.Link, {href: `/tags/${space}`}, space))),
m('ul.tags', tags m('ul.tags', tags
.sort((a, b) => (b.score - a.score)) .sort((a, b) => (b.score - a.score))
.map(({tag, score}) => .map(({tag, score}) =>
m(ScoredTag, {space, tagname: tag, score}))), m(ScoredTag, {space, tagname: tag, score}))),
]) ]))
}, },
} }

6
public/style.css
View File

@ -24,13 +24,15 @@ a { color: inherit; }
.header .activity { padding: .25rem .5rem; align-self: center; color: #fff; } .header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
.header .activity.error { color: #f00; } .header .activity.error { color: #f00; }
summary h2, summary h3 { display: inline-block; }
.sidebar { padding: .25rem .5rem; background: var(--shade-color); .sidebar { padding: .25rem .5rem; background: var(--shade-color);
border-right: 1px solid #ccc; overflow: auto; border-right: 1px solid #ccc; overflow: auto;
min-width: 10rem; max-width: 20rem; flex-shrink: 0; } min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
.sidebar input { width: 100%; box-sizing: border-box; margin: .5rem 0; .sidebar input { width: 100%; box-sizing: border-box; margin: .5rem 0;
font-size: inherit; } font-size: inherit; }
.sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; } .sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
.sidebar ul { margin: .5rem 0; padding: 0; } .sidebar ul { margin: 0; padding: 0; }
.sidebar .path { margin: .5rem -.5rem; } .sidebar .path { margin: .5rem -.5rem; }
.sidebar .path li { margin: 0; padding: 0; } .sidebar .path li { margin: 0; padding: 0; }
@ -81,7 +83,7 @@ img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
.viewbar { padding: .25rem .5rem; background: #eee; .viewbar { padding: .25rem .5rem; background: #eee;
border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; } border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }
.viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; } .viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; } .viewbar h3 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.1rem; }
.viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; } .viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
.viewbar ul.tags { padding: 0; list-style-type: none; } .viewbar ul.tags { padding: 0; list-style-type: none; }
.viewbar li { margin: 0; padding: 0; } .viewbar li { margin: 0; padding: 0; }