varia/web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

added script hide sidebar on mobile

Browse Source 
also added other minor adjustments on mobile and updated Read and Repair link and time info
This commit is contained in:
JoanaChicau 2021-03-23 12:20:19 +01:00
parent 3faa1d1315
commit 55d0a7a4ee
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -19,8 +19,8 @@
<div class="sidetop"> <div class="sidetop">
<!-- to add a new event copy paste above — as the ones below. --> <!-- to add a new event copy paste above — as the ones below. -->
<!-- once the event is over remember to move to the sidebottom section--> <!-- once the event is over remember to move to the sidebottom section-->
<p>28th March'21: <a href="https://varia.zone/en/" target="_blank" >Read & Repair</a></p> <p>28th March'21 — 11:00 CET: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank" >Read & Repair</a></p>
<p>23rd March'21 18:00 CET: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</a></p> <p>23rd March'21 — 18:00 CET: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</a></p>
</div> </div>
@ -69,10 +69,12 @@
<button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button> <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
<audio id="audioBG" <audio id="audioBG"
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)" ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);"> preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)" ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
<source src="http://w-i-t-m.net:8001/meander"> <source src="http://w-i-t-m.net:8001/meander">
</audio> </audio>
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px"> <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
<!-- <span id="tracktime"> 00:00 / 0 </span> -->↬ <br><a class="windowlinks" href="http://w-i-t-m.net:8001/meander" target="_blank"> direct link to audio</a> <!-- <span id="tracktime"> 00:00 / 0 </span> -->
<br>
<span class="audio-link"> ↬ <a class="windowlinks" href="http://w-i-t-m.net:8001/meander" target="_blank"> direct link to audio</a></span>
</div> </div>
@ -151,6 +153,20 @@ function fside() {
var element = document.getElementById("side"); var element = document.getElementById("side");
element.classList.toggle("sideminclicked"); element.classList.toggle("sideminclicked");
} }
function fsidemobile(x) {
if (x.matches) { // If media query matches
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
} else {
element.classList.toggle("");
}
}
var x = window.matchMedia("(max-width: 768px)")
fsidemobile(x) // Call listener function at run time
x.addListener(fsidemobile) // Attach listener function on state changes
</script> </script>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined --> <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->

5
narrowstyle.css
View File

@ -350,6 +350,7 @@ button.minimize:hover {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
.audio-stream > input { .audio-stream > input {
@ -466,6 +467,10 @@ content: 'PAUSE';
margin: 6rem 0% 0% 6rem; margin: 6rem 0% 0% 6rem;
} }
.audio-link{
margin: 2rem 0% 0% 0%;
}
.lil-face{ .lil-face{
position: relative; position: relative;
margin: 0% 0% 2rem 1rem; margin: 0% 0% 2rem 1rem;