beautify reshuffle

master
Angeliki 6 years ago
parent b490667627
commit e552613abf

@ -14,8 +14,9 @@
</head>
<body>
<button onclick="piles()">piles</button>
<button onclick="groups()">groups</button>
Filter by:
<button onclick="piles()">workshop</button>
<button onclick="groups()">type</button>
<!-- draggable archive -->
@ -54,13 +55,26 @@
<!-- div extracts -->
<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 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 group_extracts pile0"><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 pile0"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-00.jpg" target="_blank"><img src="images/volkskrant-00.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-01.jpg" target="_blank"><img src="images/volkskrant-01.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-02.jpg" target="_blank"><img src="images/volkskrant-02.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-03.jpg" target="_blank"><img src="images/volkskrant-03.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 group_photos pile3"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
@ -96,6 +110,7 @@
<!-- metadata for each workshop -->
<div class="draggable scaleable-wrapper box_metadata group_metadata pile1">
<h2>Workshop 1</h2>
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
@ -107,7 +122,7 @@
<li>Location: Leeszaal<li>
</div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile2">
<div class="draggable scaleable-wrapper box_metadata group_metadata pile2"><h2>Workshop 2</h2>
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
@ -119,7 +134,7 @@
<li>Location: Fine Arts<li>
</div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile3">
<div class="draggable scaleable-wrapper box_metadata group_metadata pile3"><h2>Workshop 3</h2>
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
@ -131,7 +146,7 @@
<li>Location: Leeszaal<li>
</div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile4">
<div class="draggable scaleable-wrapper box_metadata group_metadata pile4"><h2>Workshop 4</h2>
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
@ -143,7 +158,7 @@
<li>Location: Leeszaal<li>
</div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile5">
<div class="draggable scaleable-wrapper box_metadata group_metadata pile5"><h2>Workshop 5</h2>
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
@ -164,41 +179,41 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2>
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="player.php group_menu pileM">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 100%; right: 335px;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div>
</div>
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 80%; left: 70%;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 85%; left: 81%;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 90%; left: 80%;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 75%; left: 79%;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content">
(thesis)
@ -216,36 +231,43 @@ groups()
function piles(){
var pile1_position=[300,300]
var pileM_position=[1800,900]
$(".pileM").each(function(i){
$(this).css({"top":i*60+pileM_position[1],"left":i*20+pileM_position[0]})
})
var pile0_position=[30,2500]
$(".pile0").each(function(i){
$(this).css({"top":pile0_position[1],"left":i*300+pile0_position[0]})
})
var pile1_position=[30,300]
$(".pile1").each(function(i){
$(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]})
})
var pile2_position=[300,1800]
var pile2_position=[100,1400]
$(".pile2").each(function(i){
$(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
})
var pile3_position=[1000,1250]
var pile3_position=[900,850]
$(".pile3").each(function(i){
$(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
})
var pile4_position=[1900,2300]
var pile4_position=[1600,1600]
$(".pile4").each(function(i){
$(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]})
})
var pile5_position=[1300,300]
var pile5_position=[1000,100]
$(".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]})
})
@ -255,7 +277,7 @@ function piles(){
function groups(){
var group_vowels_position=[1000,100]
var group_vowels_position=[800,100]
$(".group_vowels").each(function(i){
$(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]})
})
@ -270,11 +292,16 @@ function groups(){
$(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
})
var group_metadata_position=[800,1000]
var group_metadata_position=[1000,1000]
$(".group_metadata").each(function(i){
$(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
})
var group_menu_position=[1800,900]
$(".group_menu").each(function(i){
$(this).css({"top":i*60+group_menu_position[1],"left":i*20+group_menu_position[0]})
})
}
</script>

Loading…
Cancel
Save