beautify reshuffle

master
Angeliki 6 years ago
parent b490667627
commit e552613abf

@ -14,8 +14,9 @@
</head> </head>
<body> <body>
<button onclick="piles()">piles</button> Filter by:
<button onclick="groups()">groups</button> <button onclick="piles()">workshop</button>
<button onclick="groups()">type</button>
<!-- draggable archive --> <!-- draggable archive -->
@ -54,13 +55,26 @@
<!-- div extracts --> <!-- 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 images -->
<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 group_photos pile3"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
@ -96,6 +110,7 @@
<!-- metadata for each workshop --> <!-- metadata for each workshop -->
<div class="draggable scaleable-wrapper box_metadata group_metadata pile1"> <div class="draggable scaleable-wrapper box_metadata group_metadata pile1">
<h2>Workshop 1</h2>
<li>Actions:<li> <li>Actions:<li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading extracts</li>
@ -107,7 +122,7 @@
<li>Location: Leeszaal<li> <li>Location: Leeszaal<li>
</div> </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> <li>Actions:<li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading extracts</li>
@ -119,7 +134,7 @@
<li>Location: Fine Arts<li> <li>Location: Fine Arts<li>
</div> </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> <li>Actions:<li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading extracts</li>
@ -131,7 +146,7 @@
<li>Location: Leeszaal<li> <li>Location: Leeszaal<li>
</div> </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> <li>Actions:<li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading extracts</li>
@ -143,7 +158,7 @@
<li>Location: Leeszaal<li> <li>Location: Leeszaal<li>
</div> </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> <li>Actions:<li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading extracts</li>
@ -164,41 +179,41 @@
</div> </div>
</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> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php group_menu pileM">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
</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> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content"> <div class="drag-content">
(main page) (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> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </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> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </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> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </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> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </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> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
(thesis) (thesis)
@ -216,36 +231,43 @@ groups()
function piles(){ 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){ $(".pile1").each(function(i){
$(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]}) $(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){ $(".pile2").each(function(i){
$(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]}) $(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){ $(".pile3").each(function(i){
$(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]}) $(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){ $(".pile4").each(function(i){
$(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]}) $(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){ $(".pile5").each(function(i){
$(this).css({"top":i*distance+pile5_position[1],"left":i*distance+pile5_position[0]}) $(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(){ function groups(){
var group_vowels_position=[1000,100] var group_vowels_position=[800,100]
$(".group_vowels").each(function(i){ $(".group_vowels").each(function(i){
$(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]}) $(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]}) $(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){ $(".group_metadata").each(function(i){
$(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]}) $(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> </script>

Loading…
Cancel
Save