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

styled a bit more the draggable objects

Browse Source
This commit is contained in:
nglk 2020-11-12 14:00:10 +01:00
parent ef43b8b658
commit ecb1c528d6
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wells/index.html
View File

@ -52,22 +52,22 @@
<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="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="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="400" height="200" 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> <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="400" height="200" 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> <iframe width="400" height="200" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div> </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="showmuharrem"><div class='text_audio'></div><iframe width="400" height="200" 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="shownazim"><div class='text_audio'></div><iframe width="400" height="200" 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="showneyzen"><div class='text_audio'></div><iframe width="400" height="200" 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="showruhisu"><div class='text_audio'></div><iframe width="400" height="200" 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> <div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="400" height="200" 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"> -->
<script src="static/js/d3_map.js"></script> <script src="static/js/d3_map.js"></script>

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

@ -9,6 +9,7 @@
body { body {
overflow: scroll; overflow: scroll;
font-size: .8em;
} }
.container-fluid { .container-fluid {
overflow: hidden; overflow: hidden;
@ -188,7 +189,7 @@ stroke-dasharray:6px;
.thesis { .thesis {
display: none; display: none;
overflow-y: scroll; overflow-y: scroll;
max-height: 500px; max-height: 300px;
max-width: 30%; max-width: 30%;
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: .6em; font-size: .6em;
@ -202,7 +203,7 @@ scrollbar-color: #cdcec9 #bedbbb;
position: fixed; position: fixed;
z-index:4; z-index:4;
background: white; background: white;
left: 40%; left: 60%;
top: 2%; top: 2%;
} }
@ -260,13 +261,15 @@ h2 {
} }
draggable { draggable {
position: absolute; position: absolute;
/* cursor: all-scroll; */
} }
.draggable iframe { .draggable iframe {
padding: 20px; padding: 1em;
} }
#transcriptWrapper { #transcriptWrapper {
@ -289,15 +292,18 @@ draggable {
#showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu { #showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu {
display: none; display: none;
left: 20%; left: 20%;
width: 50% !important; /* width: 10% !important; */
position: fixed; position: fixed;
z-index: 5; z-index: 5;
border: 1px black solid;
} }
.text_audio{ .text_audio{
margin-bottom: 1.2em; margin-bottom: 1.2em;
margin-top: 2em; margin-top: 2em;
font-family:'Vesper Libre', serif; font-family:'Vesper Libre', serif;
font-size: .8em;
padding-left: 1em;
} }
/* Style the close button */ /* Style the close button */
@ -305,6 +311,7 @@ draggable {
float: right; float: right;
cursor: pointer; cursor: pointer;
font-size: 100%; font-size: 100%;
color: red;
} }
/*d3 map*/ /*d3 map*/