diff options
| -rw-r--r-- | index.shtml | 1 | ||||
| -rw-r--r-- | libs/music/player | 3 | ||||
| -rw-r--r-- | panel.css | 12 | ||||
| -rw-r--r-- | panel.js | 20 |
4 files changed, 31 insertions, 5 deletions
diff --git a/index.shtml b/index.shtml index c0f4696..4d13cc6 100644 --- a/index.shtml +++ b/index.shtml @@ -101,6 +101,7 @@ document.addEventListener("DOMContentLoaded", swonload); <li><a id="aboutlk" href="#about" onclick="contsw('about');">About</a></li> <li><a id="linkslk" href="#links" onclick="contsw('links');">Links</a></li> <li><a href="javascript:showthemesw()">Themes</a></li> + <li><a href="javascript:togglepanel()" id="paneltoggle" style="display:none;">«</a></li> </ul> </div> <div id="content" class="TText"> diff --git a/libs/music/player b/libs/music/player index 3ec6f29..43e1d91 100644 --- a/libs/music/player +++ b/libs/music/player @@ -129,7 +129,8 @@ All tracks on this site are available for download. You can simply right click t <li><ul id="plists"></ul></li> <li><a href="//filestorage.chrisoft.org/music/" target="_blank">Downloads</a></li> <li><a href="javascript:NSUI.showHelp()">Help</a></li> - <li><a>TSOP 2.7.1</a></li> + <li><a href="https://cgit.chrisoft.org/web.git/tree/libs/music">TSOP 2.7.1</a></li> + <li><a href="javascript:togglepanel()" id="paneltoggle">«</a></li> </ul> </div> <div id="content"> @@ -26,6 +26,11 @@ padding-left:1.5em; padding-top:0.5em; padding-bottom:0.5em; } +#panel li a#paneltoggle { +text-align:right; +padding:0.1em; +padding-right:0.3em; +} #panel li span { display:block; padding-left:1.5em; @@ -49,6 +54,12 @@ padding-top:0.5em; #content { margin-left: 16em; } +#content.expanded { +margin-left: 1em; +} +#panel.collapsed { +left:-15em; +} #content p{text-indent:2em;} #content .block h2{font-weight:normal;} #content .block h3{font-weight:normal;} @@ -68,4 +79,5 @@ padding: 1em; #panel{left:-15em;} #content{margin-left:1em;} #footer,div.footer{width:calc(100% - 1em);left:1em;} + #panel li a#paneltoggle{display:none;} } @@ -38,14 +38,26 @@ function setupevents() { if(!fold) {document.getElementById("panel").style.left="-15em";fold=true;} - } + } + document.getElementById("panel").classList.remove("collapsed"); + document.getElementById("content").classList.remove("expanded"); } function unsetevents() { window.ontouchstart=undefined; window.ontouchmove=undefined; window.ontouchend=undefined; - document.getElementById("panel").onmouseenter=undefined; - document.getElementById("panel").onmouseleave=undefined; - document.getElementById("panel").style.left=null; + const p=document.getElementById("panel"); + p.onmouseenter=undefined; + p.onmouseleave=undefined; + p.style.left=null; + if (!p.classList.contains("collapsed")) + document.getElementById("paneltoggle").innerHTML="«"; +} +function togglepanel() +{ + let c = document.getElementById("panel").classList.toggle("collapsed"); + if (c) document.getElementById("content").classList.add("expanded"); + else document.getElementById("content").classList.remove("expanded"); + document.getElementById("paneltoggle").innerHTML=c?"»":"«"; } |