8750383 · webring · git.iko.soy

git.iko.soy/webring

Merge pull request #202 from drisc/master

Added mobile friendly layout

commit8750383dfdc3f30f898c0197ce207927cfa346a9 authorЛu Лinveгa <aliceffekt@gmail.com> dateThu 25 Jul 2019, 11:53 (7 years ago) parentb94b094 fd74605

2 files changed+18

compare with master

unifiedsplit

links/main.css+8 scripts/hallway.js+10

links/main.css+8

@@ -43,6 +43,14 @@ body #hallway p { padding-left: 60px;background-image: url(../icon.white.svg);ba

4343body #hallway ul { max-width: 100%; }

4444body #hallway ul li:last-child { border-bottom:0px; }

4545

46+@media only screen and (min-width:200px) and (max-width: 800px) {

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

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

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

52+}

53+

4654/* Portal */

4755

4856body #portal #icon { display: block;width: 30px;height: 30px;background-image: url(../icon.white.svg);background-size: cover;background-repeat: no-repeat;position: absolute;bottom: 15px;right:15px;background-position: center;padding:0px }

scripts/hallway.js+10

@@ -40,7 +40,9 @@ function Hallway (sites) {

4040 ${[...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>`, '')}

4141 </div>

4242 </div>

43+ <a id='showbar' onclick="toggleVisibility('sidebar');"></a>

4344 <div id='sidebar'>

45+ <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>

4446 <ul id='channels'>

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

4648 ${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`, '')}

@@ -184,6 +186,14 @@ function Hallway (sites) {

184186 }

185187}

186188

189+function toggleVisibility (id) {

190+ var e = document.getElementById(id);

191+ if(e.style.display == 'block')

192+ e.style.display = 'none';

193+ else

194+ e.style.display = 'block';

195+ }

196+

187197function escapeHtml (unsafe) {

188198 return unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''')

189199}