Browse Source

styled popups and took out audio bg function for nodes

master
nglk 4 years ago
parent
commit
ef8d0bc192
  1. 28
      wells/index.html
  2. 9
      wells/static/css/style.css
  3. 8
      wells/static/js/d3_map.js

28
wells/index.html

@ -47,10 +47,6 @@
<div id="colophon"> <div id="colophon">
<a href="#" >Colophon</a> <a href="#" >Colophon</a>
</div> </div>
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div>
</div> </div>
</div> </div>
<!-- new row should start here --> <!-- new row should start here -->
@ -70,28 +66,14 @@
<img src="static/images/poem.png"> <img src="static/images/poem.png">
</div> </div>
<!-- <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="300" height="80" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allowfullscreen="false" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="300" height="150" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="360" height="80" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="false"></iframe></div>
<div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> -->
<!-- <img src="static/images/test_small.jpeg" alt="poem"> --> <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon -->
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div>
<script src="static/js/d3_map.js"></script> <script src="static/js/d3_map.js"></script>
</div> </div>

9
wells/static/css/style.css

@ -107,8 +107,6 @@ z-index: 4;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 20px; font-size: 20px;
z-index: 3; z-index: 3;
} }
svg{ svg{
@ -193,6 +191,7 @@ stroke-dasharray:6px;
/* text area */ /* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */ /* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis { .thesis {
text-align: left !important;
display: none; display: none;
overflow-y: scroll; overflow-y: scroll;
max-height: 300px; max-height: 300px;
@ -205,7 +204,7 @@ margin-right: 10px;
margin-top: 20px; margin-top: 20px;
line-height: 1.6em; line-height: 1.6em;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #bedbbb; scrollbar-color: #d81159 #dbf6f9;
position: fixed; position: fixed;
z-index:4; z-index:4;
background: white; background: white;
@ -299,7 +298,7 @@ h2 {
/* pop up */ /* pop up */
#showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu { .show {
display: none; display: none;
left: 20%; left: 20%;
/* width: 10% !important; */ /* width: 10% !important; */
@ -335,12 +334,14 @@ h2 {
display: none; display: none;
left: 20%; left: 20%;
/* background-image: url("../images/poster1.png"); */ /* background-image: url("../images/poster1.png"); */
background-color: white;
word-wrap: break-word; word-wrap: break-word;
background-size: 100%; background-size: 100%;
width: 50%; width: 50%;
height: auto; height: auto;
border: 1px solid black; border: 1px solid black;
padding: 2%; padding: 2%;
z-index: 5;
} }

8
wells/static/js/d3_map.js

@ -38,7 +38,7 @@ var div = d3.select("body").append("div").style("opacity", 0);
popup(i.id,i.time); popup(i.id,i.time);
// popup video // popup video
div.transition().duration(100).style("opacity", 1); div.transition().duration(100).style("opacity", 1);
div.html("<div class='draggable' id='show"+i.id+"'><div class='text_audio'>"+i.bio+"</div><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>") div.html("<div class='draggable' class='show' id='show"+i.id+"'><div class='text_audio'>"+i.bio+"</div><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>")
}) })
.on("dblclick",connectedNodes)// Added code .on("dblclick",connectedNodes)// Added code
.call(force.drag); .call(force.drag);
@ -166,9 +166,9 @@ function popup(name,time) {
// var dada = document.getElementById("text"+name); // var dada = document.getElementById("text"+name);
// dada.className += " active"; // dada.className += " active";
// dada.scrollIntoView(); // dada.scrollIntoView();
var audio1 = document.getElementById("audioBG"); // var audio1 = document.getElementById("audioBG");
audio1.currentTime = time; // audio1.currentTime = time;
audio1.play(); // audio1.play();
}; };

Loading…
Cancel
Save