varia/voicegardens
14
0
Fork 0
Code Issues Releases Activity

mobile

Browse Source
This commit is contained in:
Cristina Cochior 2020-02-11 14:42:00 +01:00
parent 6b1bcb3326
commit 9bbe194e19
2 changed files with 111 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
voicegardens/static/styles.css
View File

@ -14,6 +14,41 @@ img.button {
width: 4%; width: 4%;
} }
/* Button style */
.record {
position:fixed;
top:20px;
left:20px;
}
.record:hover {
top:22px;
left:22px;
}
.stop {
position:fixed;
top:100px;
left:20px;
}
.stop:hover {
top:102px;
left:22px;
}
.leaf {
position:fixed;
top:180px;
left:20px;
}
.leaf:hover {
top:182px;
left:22px;
}
.about { .about {
width: 3% !important; width: 3% !important;
position:fixed; position:fixed;
@ -47,3 +82,70 @@ h1 {
padding: 3em 2em 0 10em; padding: 3em 2em 0 10em;
float: left; float: left;
} }
/* Other displays */
@media screen and (max-width: 770px) {
img.button {
width: 10%;
}
.about {
width: 7% !important;
top: unset;
right: 25vw;
bottom: 2vh;
left: unset;
}
.about:hover {
top: unset;
right: 25vw;
bottom: 4vh;
left: unset;
}
.leaf {
top: unset;
bottom: 3vh;
left: 55vw;
}
.leaf:hover {
top: unset;
bottom: 5vh;
left: 55vw;
}
.stop {
top: unset;
bottom: 3vh;
left: 40vw;
}
.record {
top: unset;
bottom: 3vh;
left: 25vw;
}
.record:hover {
top: unset;
bottom: 5vh;
left: 25vw;
}
.about-text {
height: 100vh;
padding: 1em;
width: 100%;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5em;
overflow: scroll;
}
h1 {
line-height: 1em;
}
}

43
voicegardens/static/voicegardens.js
View File

@ -113,28 +113,8 @@ function sendToArchive() {
}); });
} }
function record_enlarge() { function goToAbout() {
recordButton.position(22, 22); window.location.href = "/about";
}
function record_minimise() {
recordButton.position(20, 20);
}
function stop_enlarge() {
stopButton.position(22, 102);
}
function stop_minimise() {
stopButton.position(20, 100);
}
function leaf_enlarge() {
leafButton.position(22, 182);
}
function leaf_minimise() {
leafButton.position(20, 180);
} }
function gardenShapes() { function gardenShapes() {
@ -190,25 +170,20 @@ function setupRecording() {
recording = new p5.SoundFile(); recording = new p5.SoundFile();
recordButton = createImg("../static/images/RECORD-COLOR.png"); recordButton = createImg("../static/images/RECORD-COLOR.png");
recordButton.position(20, 20);
recordButton.mousePressed(record); recordButton.mousePressed(record);
recordButton.class("button"); recordButton.class("button record");
recordButton.mouseOver(record_enlarge);
recordButton.mouseOut(record_minimise);
stopButton = createImg("../static/images/STOP-BW.png"); stopButton = createImg("../static/images/STOP-BW.png");
stopButton.position(20, 100);
stopButton.mousePressed(stop); stopButton.mousePressed(stop);
stopButton.class("button"); stopButton.class("button stop");
stopButton.mouseOver(stop_enlarge);
stopButton.mouseOut(stop_minimise);
leafButton = createImg("../static/images/GARDEN-BW.png"); leafButton = createImg("../static/images/GARDEN-BW.png");
leafButton.position(20, 180); leafButton.class("button leaf");
leafButton.class("button");
leafButton.mouseOver(leaf_enlarge);
leafButton.mouseOut(leaf_minimise);
leafButton.mousePressed(gardenShapes); leafButton.mousePressed(gardenShapes);
aboutButton = createImg("../static/images/ABOUT-BW.png");
aboutButton.mousePressed(goToAbout);
aboutButton.class("button about");
} }
class GeneratedShape { class GeneratedShape {