alicestrt
/
vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

styled popups and took out audio bg function for nodes

master
nglk 3 years ago
parent
13c1c9d049
commit
ef8d0bc192
3 changed files with 14 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      wells/index.html
  2. 9
      wells/static/css/style.css
  3. 8
      wells/static/js/d3_map.js

28
wells/index.html
View File

@ -47,10 +47,6 @@
<div id="colophon">
<a href="#" >Colophon</a>
</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>
<!-- new row should start here -->
@ -70,28 +66,14 @@
<img src="static/images/poem.png">
</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"> -->
<!-- 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>
</div>

9
wells/static/css/style.css
View File

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

8
wells/static/js/d3_map.js
View File

@ -38,7 +38,7 @@ var div = d3.select("body").append("div").style("opacity", 0);
popup(i.id,i.time);
// popup video
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
.call(force.drag);
@ -166,9 +166,9 @@ function popup(name,time) {
// var dada = document.getElementById("text"+name);
// dada.className += " active";
// dada.scrollIntoView();
var audio1 = document.getElementById("audioBG");
audio1.currentTime = time;
audio1.play();
// var audio1 = document.getElementById("audioBG");
// audio1.currentTime = time;
// audio1.play();
};

Write Preview
Loading…
Cancel
Save