git.iko.soy/webring
on master help sign in
Displaying categories in the sidebar
commite9834eea2cf0cc52f2a4f1ef9a2bb626fb3fcccd authorDevine Lu Linvega <aliceffekt@gmail.com> dateMon 29 Jul 2019, 08:46 (7 years ago) parent580b66a
2 files changed+49−20
compare with master
unifiedsplit
links/main.css+19−12 scripts/wiki.js+30−8
links/main.css+19−12
@@ -9,24 +9,29 @@ body div p a:hover { text-decoration: underline; }
99body div p b { font-weight: normal; font-family: 'input_mono_medium' }
1010body div p.readme { max-width:500px; }
1111
12+body #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px; overflow: hidden; height: calc(100vh - 75px);}
13+body #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
14+body #sidebar > * li { text-transform: lowercase; }
15+body #sidebar > * li.selected { background: white; color:black; }
16+body #sidebar > * li:hover { cursor: pointer; }
17+body #sidebar > * li span.right { color:#555; float:right; }
18+body #sidebar > * li span.right:after { content: " msgs"; }
19+body #sidebar #channels li:before, body #sidebar #categories li:before { content:'/'; }
20+body #sidebar #users li:before { content:'@'; }
21+
22+@media only screen and (min-width:200px) and (max-width: 800px) {
23+ body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
24+ body #hallway #sidebar #channels { margin-top: 30px; }
25+}
26+
1227/* Hallway */
1328
1429body #hallway #entries { width: calc(100vw - 300px) !important; }
15−body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px; }
1630
1731body #hallway #pagination { margin: 10px; text-align: center; }
1832body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }
1933body #hallway #pagination span.selected { background: white; color:black; }
2034
21−body #hallway #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
22−body #hallway #sidebar > * li { text-transform: lowercase; }
23−body #hallway #sidebar > * li.selected { background: white; color:black; }
24−body #hallway #sidebar > * li:hover { cursor: pointer; }
25−body #hallway #sidebar > * li span.right { color:#555; float:right; }
26−body #hallway #sidebar > * li span.right:after { content: " msgs"; }
27−body #hallway #sidebar #channels li:before { content:'/'; }
28−body #hallway #sidebar #users li:before { content:'@'; }
29−
3035body #hallway .entry { line-height: 16px; display: block; position: relative; padding-left:100px; }
3136body #hallway .entry .date { color: #555;display: block;float:right; margin-left:20px; padding-bottom: 16px;}
3237body #hallway .entry .author { font-family: 'input_mono_medium'; position: absolute;left: 0px; }
@@ -45,10 +50,8 @@ body #hallway ul li:last-child { border-bottom:0px; }
4550
4651@media only screen and (min-width:200px) and (max-width: 800px) {
4752 body #hallway #entries { width: 100% !important;margin-top: 30px; }
48− body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
4953 body #hallway #showbar { position: absolute;top: 0px;width: 92%;height: 50px; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11,4 L11,18 M4,4 L 4,18 M18,4 L18,18' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat: no-repeat;background-position: right;background-size: 25px; }
5054 body #hallway #hidebar { position: absolute;top: 0px;width: 100%;height: 50px;background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M5,5 L17,17 M17,5 L5,17' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat: no-repeat;background-position: left;background-size: 25px; }
51− body #hallway #sidebar #channels { margin-top: 30px; }
5255}
5356
5457/* Portal */
@@ -73,3 +76,7 @@ body #portal ul li a:hover { text-decoration: underline; }
7376 body #portal ul { columns: 1 !important; }
7477 body #portal ul li span.counter { display: inline }
7578}
79+
80+/* Wiki */
81+
82+
scripts/wiki.js+30−8
@@ -3,20 +3,42 @@
33function Wiki (sites) {
44 const feeds = {}
55 this.sites = sites
6− this.el = document.createElement('div')
7− this.el.id = 'wiki'
6+ this._el = document.createElement('div')
7+ this._el.id = 'wiki'
8+ this._sidebar = document.createElement('div')
9+ this._sidebar.id = 'sidebar'
10+ this._categories = document.createElement('ul')
11+ this._categories.id = 'categories'
12+ this._names = document.createElement('div')
13+ this._names.id = 'names'
814
915 this.index = {}
16+ this.categories = {}
1017
1118 this.install = (host) => {
1219 console.log('Wiki', 'Installing..')
1320 this.fetch()
14− host.appendChild(this.el)
21+ this._el.appendChild(this._names)
22+ this._sidebar.appendChild(this._categories)
23+ this._el.appendChild(this._sidebar)
24+ host.appendChild(this._el)
1525 }
1626
1727 this.start = () => {
1828 console.log('Wiki', 'Starting..')
19− this.el.innerHTML = 'hello.'
29+ // this.el.innerHTML = 'hello.'
30+ }
31+
32+ this.refresh = () => {
33+ console.log(Object.keys(this.index).length + ' terms')
34+
35+ // Cats
36+
37+ let html = ''
38+ for (const id in this.categories) {
39+ html += `<li>${id} <span class='right'>${this.categories[id].length}</span></li>`
40+ }
41+ this._categories.innerHTML = `${html}`
2042 }
2143
2244 this.fetch = () => {
@@ -32,15 +54,15 @@ function Wiki (sites) {
3254 }
3355 }
3456
35− this.refresh = () => {
36− console.log(Object.keys(this.index).length + ' terms')
37− }
38−
3957 this.add = (name, value, cat, origin) => {
4058 if (!this.index[name]) {
4159 this.index[name] = []
4260 }
4361 this.index[name].push({ value, cat, origin })
62+ if (!this.categories[cat]) {
63+ this.categories[cat] = []
64+ }
65+ this.categories[cat].push({ value, cat, origin })
4466 }
4567
4668 this.parse = (site, content) => {