Browse Source

added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info
master
JoanaChicau 4 years ago
parent
commit
55d0a7a4ee
  1. 24
      index.html
  2. 5
      narrowstyle.css

24
index.html

@ -19,8 +19,8 @@
<div class="sidetop">
<!-- to add a new event copy paste above — as the ones below. -->
<!-- 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>23rd March'21 18:00 CET: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</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>
</div>
@ -69,10 +69,12 @@
<button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
<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);">
<source src="http://w-i-t-m.net:8001/meander">
<source src="http://w-i-t-m.net:8001/meander">
</audio>
<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>
@ -151,6 +153,20 @@ function fside() {
var element = document.getElementById("side");
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>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->

5
narrowstyle.css

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

Loading…
Cancel
Save