panels wip

master
km0 3 years ago
parent 055b47e92b
commit 101c1cbd45

@ -7,7 +7,7 @@
<script src="labels.js" defer></script>
<script src="picture.js" defer></script>
<script src="panel.js" defer></script>
<script src="panels.js" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Concrete Label</title>
@ -27,8 +27,12 @@
</form>
</div>
</main>
<nav>
<button id="show-transcription">...</button>
<button id="show-info">?</button>
</nav>
<aside class="info" id="info-panel">
<button class="close">X</button>
<h1 class="title">Concrete 🎏 Label</h1>
<p>
How could computer read concrete & visual poetry? How does computer navigate through
@ -45,5 +49,9 @@
Everything happen in your browser.
</p>
</aside>
<aside class="transcription" id="transcription-panel">
<button class="close">X</button>
<h1 class="title">Label Transcription</h1>
</aside>
</body>
</html>

@ -1,14 +0,0 @@
const showInfo = document.getElementById("show-info");
const infoPanel = document.getElementById("info-panel");
showInfo.addEventListener("click", (e) => {
if (infoPanel.classList.contains("active")) {
infoPanel.classList.remove("active");
showInfo.classList.remove("active");
showInfo.innerHTML = "?";
} else {
infoPanel.classList.add("active");
showInfo.classList.add("active");
showInfo.innerHTML = "X";
}
});

@ -0,0 +1,19 @@
const showInfo = document.getElementById("show-info");
const infoPanel = document.getElementById("info-panel");
showInfo.addEventListener("click", (e) => {
infoPanel.classList.add("active");
infoPanel.querySelector(".close").addEventListener("click", (e) => {
infoPanel.classList.remove("active");
});
});
const showTranscription = document.getElementById("show-transcription");
const transcriptionPanel = document.getElementById("transcription-panel");
showTranscription.addEventListener("click", (e) => {
transcriptionPanel.classList.add("active");
transcriptionPanel.querySelector(".close").addEventListener("click", (e) => {
transcriptionPanel.classList.remove("active");
});
});

@ -157,7 +157,8 @@ body {
display: none;
}
.info {
.info,
.transcription {
position: absolute;
right: 0;
bottom: 0;
@ -177,21 +178,20 @@ body {
transition: transform 0.4s ease-out;
}
.transcription.active,
.info.active {
transform: translateX(0);
transition: transform 0.4s ease-in;
}
.transcription .title,
.info .title {
margin: 0;
}
#show-info {
position: absolute;
top: 24px;
right: 24px;
z-index: 100;
#show-info,
#show-transcription,
.close {
background: none;
display: inline-block;
@ -206,18 +206,39 @@ body {
cursor: pointer;
}
#show-transcription:hover,
#show-info:hover {
border: 1px solid tomato;
background-color: tomato;
color: white;
}
#show-info.active {
.close {
position: absolute;
right: 24px;
top: 24px;
color: white;
}
#show-info:hover.active {
.close:hover {
border: 1px solid white;
background-color: white;
color: #111;
}
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 24px;
text-align: right;
pointer-events: none;
}
nav > * {
pointer-events: all;
}

Loading…
Cancel
Save