flexible and draggable objects. Complete example of diagram in full page
This commit is contained in:
parent
bbd1c8bcbd
commit
ef43b8b658
7
static/js/bootstrap.min.js
vendored
Normal file
7
static/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
static/js/d3.v3.min.js
vendored
Normal file
5
static/js/d3.v3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
static/js/jquery-3.2.1.slim.min.js
vendored
Normal file
4
static/js/jquery-3.2.1.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
static/js/popper.min.js
vendored
Normal file
5
static/js/popper.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
152
wells/index-fixed.html
Normal file
152
wells/index-fixed.html
Normal file
@ -0,0 +1,152 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||
<title>VVVW</title>
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<script src="static/js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
|
||||
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
<script src="static/js/jquery-1.12.4.js"></script>
|
||||
<script src="static/js/jquery-ui.js"></script>
|
||||
<script src="static/js/d3.v3.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="bg">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="map_area">
|
||||
<script src="static/js/d3_map.js"></script>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p id="legend_title">Map legend</p>
|
||||
|
||||
<div class="map_legend">
|
||||
<div class="box1"></div> <p>Folklore literature</p>
|
||||
<div class="box2"></div> <p>Islamic Mysticism</p>
|
||||
<div class="box3"></div> <p>Contemporary poets</p>
|
||||
<div class="box4"></div> <p>Contemporary musicians</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="scrollable">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div w3-include-html="thesis.html" class="thesis">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="media_area">
|
||||
<!-- <p>Related media</p> -->
|
||||
<div id="showdadaloglu"><div class='text_audio'>Bio</div>
|
||||
<!-- <audio id="audiodadaloglu" controls>
|
||||
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio> -->
|
||||
<img src="static/images/poem.png">
|
||||
</div>
|
||||
|
||||
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" 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="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" 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 id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" 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"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="play-stop">
|
||||
<div id="tracktime">0:0 / 22:39</div>
|
||||
<a id="mBtn" onclick="PSFunction()">(Play)</a>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
|
||||
</div>
|
||||
<div class="main_audio">
|
||||
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
|
||||
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- scripts for mouse events -->
|
||||
<script>
|
||||
var audio = document.getElementById("audioBG");
|
||||
var btn = document.getElementById("mBtn");
|
||||
|
||||
function PSFunction() {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
btn.innerHTML = "(Pause)";
|
||||
} else {
|
||||
audio.pause();
|
||||
btn.innerHTML = "(Play)";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function includeHTML() {
|
||||
var z, i, elmnt, file, xhttp;
|
||||
/* Loop through a collection of all HTML elements: */
|
||||
z = document.getElementsByTagName("*");
|
||||
for (i = 0; i < z.length; i++) {
|
||||
elmnt = z[i];
|
||||
/*search for elements with a certain atrribute:*/
|
||||
file = elmnt.getAttribute("w3-include-html");
|
||||
if (file) {
|
||||
/* Make an HTTP request using the attribute value as the file name: */
|
||||
xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
||||
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
||||
/* Remove the attribute, and call this function once more: */
|
||||
elmnt.removeAttribute("w3-include-html");
|
||||
includeHTML();
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
/* Exit the function: */
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
includeHTML();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
131
wells/index.html
131
wells/index.html
@ -2,10 +2,10 @@
|
||||
<head>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||
<title>VVVW</title>
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<script src="static/js/d3.v3.min.js"></script>
|
||||
<script src="static/js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
|
||||
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
@ -13,89 +13,80 @@
|
||||
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
<script src="static/js/jquery-1.12.4.js"></script>
|
||||
<script src="static/js/jquery-ui.js"></script>
|
||||
<script src="static/js/d3.v3.min.js"></script>
|
||||
<script src="static/js/draggable.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="bg">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<!-- background audio -->
|
||||
<div class="col-md-9" style="position: static;">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="play-stop">
|
||||
<div id="tracktime">0:0 / 22:39</div>
|
||||
<a id="mBtn" onclick="PSFunction()">(Play)</a>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
|
||||
</div>
|
||||
<div class="main_audio">
|
||||
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
|
||||
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- map area -->
|
||||
<div class="map_area">
|
||||
<div w3-include-html="thesis.html" class="thesis draggable" id="showthesis">
|
||||
</div>
|
||||
<!-- <p>Related media</p> -->
|
||||
<div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div>
|
||||
<!-- <audio id="audiodadaloglu" controls>
|
||||
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio> -->
|
||||
<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">×</span><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" 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="560" height="280" 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="560" height="280" 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="560" height="280" 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="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" 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="560" height="280" 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="560" height="280" 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"> -->
|
||||
<script src="static/js/d3_map.js"></script>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p id="legend_title">Map legend</p>
|
||||
|
||||
<div class="map_legend">
|
||||
<div class="box1"></div> <p>Folklore literature</p>
|
||||
<div class="box2"></div> <p>Islamic Mysticism</p>
|
||||
<div class="box3"></div> <p>Contemporary poets</p>
|
||||
<div class="box4"></div> <p>Contemporary musicians</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="scrollable">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div w3-include-html="thesis.html" class="thesis">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="media_area">
|
||||
<!-- <p>Related media</p> -->
|
||||
<div id="showdadaloglu"><div class='text_audio'>Bio</div>
|
||||
<!-- <audio id="audiodadaloglu" controls>
|
||||
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio> -->
|
||||
<img src="static/images/poem.png">
|
||||
</div>
|
||||
|
||||
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" 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="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" 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 id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
||||
|
||||
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" 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"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="play-stop">
|
||||
<div id="tracktime">0:0 / 22:39</div>
|
||||
<a id="mBtn" onclick="PSFunction()">(Play)</a>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
|
||||
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
|
||||
</div>
|
||||
<div class="main_audio">
|
||||
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
|
||||
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
<p id="legend_title">Map legend</p>
|
||||
|
||||
<div class="map_legend">
|
||||
<div class="box1"></div> <p>Folklore literature</p>
|
||||
<div class="box2"></div> <p>Islamic Mysticism</p>
|
||||
<div class="box3"></div> <p>Contemporary poets</p>
|
||||
<div class="box4"></div> <p>Contemporary musicians</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -5,9 +5,11 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
|
||||
* {
|
||||
border: 0px black solid;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
.container-fluid {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -28,6 +30,8 @@
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: 20px;
|
||||
z-index: -1 !important;
|
||||
position: relative;
|
||||
}
|
||||
.media_area {
|
||||
margin-top: 10px;
|
||||
@ -59,6 +63,10 @@ background: grey;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main_audio {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Node styling */
|
||||
|
||||
@ -66,6 +74,7 @@ cursor: pointer;
|
||||
fill: #92817a ;
|
||||
font-size: 18px;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
@ -74,13 +83,14 @@ cursor: pointer;
|
||||
fill: #bedbbb;
|
||||
font-size: 18px;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.group4 {
|
||||
fill: #8db956;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
font-size: 18px;
|
||||
|
||||
z-index: 4;
|
||||
|
||||
}
|
||||
|
||||
@ -88,6 +98,7 @@ cursor: pointer;
|
||||
fill: #707070;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
font-size: 18px;
|
||||
z-index: 3;
|
||||
|
||||
|
||||
}
|
||||
@ -97,6 +108,8 @@ svg{
|
||||
height:100%;
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
path{
|
||||
fill: transparent;
|
||||
@ -160,21 +173,25 @@ stroke-dasharray:6px;
|
||||
padding-left: 5px;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
display: inline;
|
||||
font-size: 15px;
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
#legend_title {
|
||||
font-family: 'Vesper Libre', serif;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
font-size: .8em;
|
||||
padding-left: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* text area */
|
||||
/* with position:fixed and svg {position:relative} the text can overlay the map */
|
||||
.thesis {
|
||||
display: none;
|
||||
overflow-y: scroll;
|
||||
max-height:450px;
|
||||
max-height: 500px;
|
||||
max-width: 30%;
|
||||
scroll-behavior: smooth;
|
||||
font-size: 1em;
|
||||
font-size: .6em;
|
||||
border: 1px black solid;
|
||||
padding: 2em;
|
||||
margin-right: 10px;
|
||||
@ -182,7 +199,11 @@ margin-top: 20px;
|
||||
line-height: 1.6em;
|
||||
font-family: 'Vesper Libre', serif;
|
||||
scrollbar-color: #cdcec9 #bedbbb;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
z-index:4;
|
||||
background: white;
|
||||
left: 40%;
|
||||
top: 2%;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
@ -204,12 +225,14 @@ h2 {
|
||||
|
||||
|
||||
.play-stop {
|
||||
position: absolute;
|
||||
bottom: 1.6em;
|
||||
/* position: absolute; */
|
||||
/* bottom: 1em; */
|
||||
z-index: 1;
|
||||
margin-left: calc( 50% - 1.8em );
|
||||
padding-left: 2em;
|
||||
/* margin-left: calc( 50% - 1.8em );
|
||||
margin-top: 5em; */
|
||||
overflow: hidden;
|
||||
font-size: 1.2em;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
font-family:'Walter Turncoat', cursive;
|
||||
color: #AEB10A;
|
||||
@ -267,6 +290,8 @@ draggable {
|
||||
display: none;
|
||||
left: 20%;
|
||||
width: 50% !important;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.text_audio{
|
||||
@ -275,6 +300,12 @@ draggable {
|
||||
font-family:'Vesper Libre', serif;
|
||||
}
|
||||
|
||||
/* Style the close button */
|
||||
.topleft {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*d3 map*/
|
||||
.link {
|
||||
|
||||
7
wells/static/js/d3_map.js
vendored
7
wells/static/js/d3_map.js
vendored
@ -1,14 +1,14 @@
|
||||
var width = 500,
|
||||
var width = 700,
|
||||
height = 350
|
||||
|
||||
var svg = d3.select(".map_area").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`);
|
||||
.attr("viewBox", `${-width/1.3} ${-height/1.6} ${width*2.3} ${height*2.3}`);
|
||||
|
||||
var force = d3.layout.force()
|
||||
.gravity(0.009)
|
||||
.distance(250)
|
||||
.distance(300)
|
||||
.charge(-30)
|
||||
.size([width, height]);
|
||||
|
||||
@ -109,6 +109,7 @@ d3.json("/static/js/group1.json", function(error, json) {
|
||||
function popup(name,time) {
|
||||
$("#show"+name).fadeIn()
|
||||
console.log("around")
|
||||
$("#showthesis").fadeIn()
|
||||
var dada = document.getElementById("text"+name);
|
||||
dada.className += " active";
|
||||
dada.scrollIntoView();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user