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

styled a bit more the draggable objects

master
nglk 4 years ago
parent
ef43b8b658
commit
ecb1c528d6
2 changed files with 19 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      wells/index.html
  2. 15
      wells/static/css/style.css

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*/

Write Preview
Loading…
Cancel
Save