6283183 · webring · git.iko.soy

git.iko.soy/webring

on master help sign in

add in semantic html to the hallway

6283183ckipp017 years ago

hallway.html+1−1

compare with master

unifiedsplit

@@ -4,7 +4,7 @@

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width, initial-scale=1.0">

6 <link rel="stylesheet" type="text/css" href="links/fonts.css"/>

7− <link rel="stylesheet" type="text/css" href="links/main.css"/>

7+ <link rel="stylesheet" type="text/css" href="links/main2.css"/>

8 <script src="scripts/hallway.js"></script>

9 <script src="scripts/sites.js"></script>

10 <title>Hallway</title>

links/main2.css+36

@@ -6,6 +6,7 @@ body > div > ul { padding-bottom: 15px; margin-bottom:15px; }

6body div p { display:block; padding:0px 5px; line-height: 20px;}

7body footer { border-top: 2px solid white; padding-top: 15px; margin-top: 15px;}

8body footer a { text-decoration: underline; }

9+body .selected { background: white; color:black; }

10/* portal */

11/* portal */

11body #portal main,

12body #portal main,

@@ -19,7 +20,42 @@ body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none

19body #portal ul li a:visited { color:#ccc; text-decoration: none;}

20body #portal ul li a:visited { color:#ccc; text-decoration: none;}

20body #portal ul li a:hover { text-decoration: underline; }

21body #portal ul li a:hover { text-decoration: underline; }

23+/* hallway */

24+

25+body #hallway #entries { display: flex; margin-top: 35px; }

26+body #hallway #entries > div { flex-grow: 1; }

27+body #entries aside { min-width: 200px; padding: 0 15px; line-height: 16px; display: none; }

28+body #entries aside ul { margin-bottom: 15px; }

29+body #entries aside #channels li:before, body #sidebar #categories li:before { content:'/'; }

30+body #entries aside #users li:before { content:'@'; }

31+body #entries aside span.right { color: #555; float: right; }

32+body #entries aside li { text-transform: lowercase; cursor: pointer; }

33+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; }

34+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; }

35+body #hallway .entry { line-height: 16px; display: block; position: relative; padding-left:100px; }

36+body #hallway .entry .date { color: #555;display: block;float:right; margin-left:20px; padding-bottom: 16px;}

37+body #hallway .entry .author { font-family: 'input_mono_medium'; position: absolute;left: 0px; }

38+body #hallway .entry .body { display: block;border-bottom: 1px solid #333;padding-bottom: 10px;margin-bottom: 10px; }

39+body #hallway .entry .body a { text-decoration: underline; }

40+body #hallway .entry .body .channel { display: inline-block;border-radius: 1px;font-family: 'input_mono_medium';color: #777; }

41+body #hallway .entry .body .user { display: inline-block;border-radius: 1px;font-family: 'input_mono_medium';color: #777; }

42+body #hallway .entry .body .user.local::before { content:'@';color: #777; }

43+body #hallway .entry .body .user.external::before { content:'^';color: #777; }

44+body #hallway .entry .body .tag { display: inline-block;border-radius: 1px;font-family: 'input_mono_medium';color: #777; }

45+body #hallway .entry.highlight .author { color:#555; }

46+body #hallway .entry:hover .author { color:#ccc; }

47+body #hallway .entry:hover .date { color:#ccc; }

48+body #hallway .entry:hover .body { color:#ccc; border-bottom-color: #555 }

49+body #hallway #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; border-top: 2px solid white; padding-top: 15px; margin-top: 15px; max-width: calc(100% - 300px); min-height: 45px; line-height: 15px;}

50+

51+body #hallway #pagination { margin: 10px; text-align: center; }

52+body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }

53+

22@media (min-width: 630px) {

54@media (min-width: 630px) {

23 body #portal ul { columns: 3;}

55 body #portal ul { columns: 3;}

56+ body #hallway #entries { margin-top: 0; }

57+ body #hallway #entries aside { display: block; }

58+ body #hallway #showbar { display: none; }

59+ body #hallway #hidebar { display: none; }

24}

60}

scripts/hallway.js+31−30

@@ -14,24 +14,21 @@ function Hallway (sites) {

14 this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }

15 this.cache = null

17− this._entries = document.createElement('div')

17+ this._main = document.createElement('main')

18− this._entries.id = 'entries'

18+ this._main.id = 'entries'

19− this._sidebar = document.createElement('div')

20− this._sidebar.id = 'sidebar'

21− this._footer = document.createElement('p')

19+ this._footer = document.createElement('footer')

22 this._footer.id = 'footer'

20 this._footer.id = 'footer'

23− this._footer.innerHTML = `The <strong>Hallway</strong> is a decentralized forum, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-hallway">feed:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.`

21+ this._footer.innerHTML = `<p>The <strong>Hallway</strong> is a decentralized forum, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-hallway">feed:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.</p>`

25 this.install = function (host) {

23 this.install = function (host) {

26− this._el.appendChild(this._entries)

24+ this._el.appendChild(this._main)

27− this._el.appendChild(this._sidebar)

28 this._el.appendChild(this._footer)

25 this._el.appendChild(this._footer)

29 host.appendChild(this._el)

26 host.appendChild(this._el)

30 this.findFeeds()

27 this.findFeeds()

31 }

28 }

33 this.start = function () {

30 this.start = function () {

34− this._entries.innerHTML = 'Loading..'

31+ this._main.innerHTML = 'Loading..'

35 this.fetchFeeds()

32 this.fetchFeeds()

36 }

33 }

@@ -43,27 +40,31 @@ function Hallway (sites) {

43 const tags = this.findTags(localEntries)

40 const tags = this.findTags(localEntries)

44 const relevantEntries = localEntries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))

41 const relevantEntries = localEntries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))

46− this._entries.innerHTML = `

43+ const mainHtml = `

47− <ul>

44+ <div><ul>

48− ${localEntries.filter((val) => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter))).filter((_, id) => id < Number(this.finder.page) * 20 && id >= (Number(this.finder.page) - 1) * 20).reduce((acc, val) => acc + this.templateEntry(val) + '\n', '')}

45+ ${localEntries.filter((val) => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter))).filter((_, id) => id < Number(this.finder.page) * 20 && id >= (Number(this.finder.page) - 1) * 20).reduce((acc, val) => acc + this.templateEntry(val) + '\n', '')}

49− </ul>

46+ </ul>

50− <div id='pagination'>

47+ <div id='pagination'>

51− ${[...Array(Math.ceil(relevantEntries.length / 20)).keys()].reduce((acc, num) => `${acc}<span class='${Number(hallway.finder.page) === num + 1 ? 'selected' : ''}' onclick='filter("${this.finder.filter}^${num + 1}")'>${num + 1}</span>`, '')}

48+ ${[...Array(Math.ceil(relevantEntries.length / 20)).keys()].reduce((acc, num) => `${acc}<span class='${Number(hallway.finder.page) === num + 1 ? 'selected' : ''}' onclick='filter("${this.finder.filter}^${num + 1}")'>${num + 1}</span>`, '')}

52− </div>

49+ </div>

53− <a id='showbar' onclick="toggleVisibility('sidebar');"></a>`

50+ <a id='showbar' onclick="toggleVisibility('aside');"></a></div>`

54−

51+

55− this._sidebar.innerHTML = `

52+ const aside = `

53+ <aside id='aside'>

56− <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>

54+ <a id='hidebar' onclick="toggleVisibility('aside');"></a>

57− <ul id='channels'>

55+ <ul id='channels'>

58− <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${localEntries.length}</span></a></li>

56+ <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${localEntries.length}</span></a></li>

59− ${Object.keys(channels).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}'><a href='#${val}'>${val} <span class='right'>${channels[val]}</span></a></li>\n`, '')}

57+ ${Object.keys(channels).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}'><a href='#${val}'>${val} <span class='right'>${channels[val]}</span></a></li>\n`, '')}

60− </ul>

58+ </ul>

61− <ul id='users'>

59+ <ul id='users'>

62− ${Object.keys(users).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>${val} <span class='right'>${users[val]}</span></li>\n`, '')}

60+ ${Object.keys(users).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>${val} <span class='right'>${users[val]}</span></li>\n`, '')}

63− </ul>

61+ </ul>

64− <ul id='tags'>

62+ <ul id='tags'>

65− ${Object.keys(tags).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>#${val} <span class='right'>${tags[val]}</span></li>\n`, '')}

63+ ${Object.keys(tags).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>#${val} <span class='right'>${tags[val]}</span></li>\n`, '')}

66− </ul>`

64+ </ul>

65+ </aside>`

66+

67+ this._main.innerHTML = `${mainHtml}${aside}`

68 if (feeds) {

69 if (feeds) {

69 this.cache = feeds

70 this.cache = feeds