From ef8d0bc1921585e09ba1f59daf0492df54234d39 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Fri, 4 Dec 2020 14:53:39 +0100
Subject: [PATCH] styled popups and took out audio bg function for nodes

---
 wells/index.html           | 28 +++++-----------------------
 wells/static/css/style.css |  9 +++++----
 wells/static/js/d3_map.js  |  8 ++++----
 3 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/wells/index.html b/wells/index.html
index aa00345..4bf1a2c 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -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>
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 33634a2..dc0e742 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -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;
 }
 
 
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index e364f3c..752abd8 100644
--- a/wells/static/js/d3_map.js
+++ b/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 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();
 };