From d5ea7d3378886dd95d919491a1c44cf4580fc584 Mon Sep 17 00:00:00 2001
From: Angeliki <diakaggel@gmail.com>
Date: Wed, 5 Jun 2019 21:12:48 +0200
Subject: [PATCH] finalized reshuffle

---
 amplification.php     | 202 +++++++++++++++++++++++++++---------------
 diary.php             |   4 +
 styles/stylesheet.css |  12 ---
 3 files changed, 136 insertions(+), 82 deletions(-)

diff --git a/amplification.php b/amplification.php
index 9da47ae..b44b104 100644
--- a/amplification.php
+++ b/amplification.php
@@ -17,102 +17,143 @@
 <button onclick="piles()">piles</button> 
 <button onclick="groups()">groups</button> 
 
-<!--   <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
- -->
 
 <!-- draggable archive -->
-<!-- metadata for each workshop -->
-<div class="draggable scaleable-wrapper box_metadata">
-  <li>Actions:<li>
-    <ul>
-      <li>Reading extracts</li>
-      <li>Discussion on public voice</li>
-      <li>Transcribing vowels</li>
-    </ul>
-  <li>Outcome: Score of vowels<li>
-  <li>Date: 23/5/2019<li>
-  <li>Location: Leeszaal<li>
-</div>
 
 <!-- div vowels -->
 
-  <div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
+  <div id="resize" class="draggable ui-draggable-handle group_vowels pile1"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
 
-  <div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
+ 
 
-  <div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div>
+  <div id="resize" class="draggable ui-draggable-handle group_vowels pile1"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div>
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 116px; left: 1176px;"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile2"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 156px; left: 1216px;"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div>
   
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 196px; left: 1256px;"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div>
   
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 236px; left: 1296px;"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
  
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 276px; left: 1336px;"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div>
   
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 316px; left: 1376px;"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div>
   
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 356px; left: 1416px;"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div>
  
 
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 396px; left: 1456px;"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
   
-  <div id="img" class="draggable  ui-draggable-handle" style="top: 436px; left: 1496px;"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
-
-
+  <div id="img" class="draggable  ui-draggable-handle group_vowels pile5"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
 
 
 
 <!-- div extracts -->
 <div>
-  <div class="draggable ui-draggable-handle" style="top: 1300px; left: 900px; line-height: 0 !important;"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
+  <div class="draggable ui-draggable-handle group_extracts pile1"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
 
-  <div class="draggable ui-draggable-handle" style="top: 1400px; left: 1000px; line-height: 0 !important;"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
+  <div class="draggable ui-draggable-handle group_extracts pile1"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
 
-  <div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
+  <div class="draggable ui-draggable-handle group_extracts pile1"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
 </div>
 
 <!-- div images -->
-<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile3"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 264px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile2" ><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 100px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile2"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 125px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 385px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 16px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 228px;z-index: -1;"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile2"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 337px; left: 506px;"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 140px; left: 206px;"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable  ui-draggable-handle" style="top: 310px; left: 560px;"><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div>
+<div id="img" class="draggable  ui-draggable-handle group_photos pile4" ><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
 
-<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
+<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
 
+<div id="img" class="draggable  ui-draggable-handle group_photos pile5"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
 
-<div id="img" class="draggable  ui-draggable-handle" style="top: 410px; left: 430px;"><a href="images/meeting-20190508_leeszaal.jpg" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></a></div>
 
-<div id="img" class="draggable  ui-draggable-handle" style="top: 440px; left: 200px;"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
+<!-- metadata for each workshop -->
+<div class="draggable scaleable-wrapper box_metadata group_metadata pile1">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 28/3/2019<li>
+  <li>Location: Leeszaal<li>
+</div>
+
+<div class="draggable scaleable-wrapper box_metadata group_metadata pile2">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 29/3/2019<li>
+  <li>Location: Fine Arts<li>
+</div>
+
+<div class="draggable scaleable-wrapper box_metadata group_metadata pile3">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 08/5/2019<li>
+  <li>Location: Leeszaal<li>
+</div>
 
+<div class="draggable scaleable-wrapper box_metadata group_metadata pile4">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 23/5/2019<li>
+  <li>Location: Leeszaal<li>
+</div>
 
+<div class="draggable scaleable-wrapper box_metadata group_metadata pile5">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 30/5/2019<li>
+  <li>Location: Leeszaal<li>
+</div>
 
 
 <!-- draggable menu-->
@@ -135,24 +176,24 @@
    (audio archive)
   </div>
 </div>
-<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
+<div class="draggable scaleable-wrapper" style="top: 100%; right: 335px;">
   <h2 ><a href="index.php">About</a></h2> 
   <div class="drag-content">
    (main page)
   </div>
   </div>
 
-<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
+<div class="draggable scaleable-wrapper" style="top: 80%; left: 70%;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
-<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 85%; left: 81%;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
+<div class="draggable scaleable-wrapper" style="top: 90%; left: 80%;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
+<div class="draggable scaleable-wrapper" style="top: 75%; left: 79%;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
 
@@ -168,47 +209,68 @@
 
 <!-- reshuffle -->
 <script>
-var distance=100
+var distance=20
 groups()
-piles()
+
 
 
 function piles(){
- var pile1_position=[20,100]
-$(".pile1").each(function(i){
-    $(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]})
-})
 
-var pile2_position=[600,200]
-$(".pile2").each(function(i){
-    $(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
-})
+     var pile1_position=[300,300]
+    $(".pile1").each(function(i){
+        $(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]})
+    })
+
+    var pile2_position=[300,1800]
+    $(".pile2").each(function(i){
+        $(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
+    })
+
+    var pile3_position=[1000,1250]
+    $(".pile3").each(function(i){
+        $(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
+    })
+
+    var pile4_position=[1900,2300]
+    $(".pile4").each(function(i){
+        $(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]})
+    })
+
+
+    var pile5_position=[1300,300]
+    $(".pile5").each(function(i){
+        $(this).css({"top":i*distance+pile5_position[1],"left":i*distance+pile5_position[0]})
+    })
+
+    var pile6_position=[1600,1800]
+    $(".pile6").each(function(i){
+        $(this).css({"top":i*distance+pile6_position[1],"left":i*distance+pile6_position[0]})
+    })
+
+    
 
-var pile3_position=[300,300]
-$(".pile3").each(function(i){
-    $(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
-})
+    
 
  }
 
 function groups(){
  
-  var group_vowels_position=[20,100]
+  var group_vowels_position=[1000,100]
   $(".group_vowels").each(function(i){
       $(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]})
   })
 
-  var group_photos_position=[300,100]
+  var group_photos_position=[20,100]
   $(".group_photos").each(function(i){
       $(this).css({"top":i*distance+group_photos_position[1],"left":i*distance+group_photos_position[0]})
   })
 
-  var group_extracts_position=[300,100]
+  var group_extracts_position=[50,1000]
   $(".group_extracts").each(function(i){
       $(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
   })
 
-  var group_metadata_position=[300,100]
+  var group_metadata_position=[800,1000]
   $(".group_metadata").each(function(i){
       $(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
   })
diff --git a/diary.php b/diary.php
index 57586c0..e14b74f 100644
--- a/diary.php
+++ b/diary.php
@@ -54,6 +54,10 @@
 
 <!-- end draggable menu-->
 
+
+ <div id="resize" class="draggable ui-draggable-handle"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
+
+
 <div class="draggable" style="position:absolute; top:6%; left:5%;width:1800px;">
   <audio controls >
               <source src="audio/20190122-track-extracts.mp3" type="audio/mpeg">
diff --git a/styles/stylesheet.css b/styles/stylesheet.css
index e677bbe..dc849cc 100644
--- a/styles/stylesheet.css
+++ b/styles/stylesheet.css
@@ -643,30 +643,18 @@ li, #angela, #judith, #laurie, #dana, #katalin {
 
 /*reshuffle piles*/
 .group_vowels {
-  width:200px;
-  height:400px;
-  border-style:solid;
   position:absolute;
 }
 
 .group_photos {
-  width:200px;
-  height:400px;
-  border-style:solid;
   position:absolute;
 }
 
 
 .group_extracts {
-  width:200px;
-  height:400px;
-  border-style:solid;
   position:absolute;
 }
 
 .group_metadata {
-  width:200px;
-  height:400px;
-  border-style:solid;
   position:absolute;
 }
\ No newline at end of file