panels wip

master
km0 3 years ago
parent 055b47e92b
commit 101c1cbd45

@ -7,7 +7,7 @@
<script src="labels.js" defer></script> <script src="labels.js" defer></script>
<script src="picture.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" /> <link rel="stylesheet" href="style.css" />
<title>Concrete Label</title> <title>Concrete Label</title>
@ -27,8 +27,12 @@
</form> </form>
</div> </div>
</main> </main>
<button id="show-info">?</button> <nav>
<button id="show-transcription">...</button>
<button id="show-info">?</button>
</nav>
<aside class="info" id="info-panel"> <aside class="info" id="info-panel">
<button class="close">X</button>
<h1 class="title">Concrete 🎏 Label</h1> <h1 class="title">Concrete 🎏 Label</h1>
<p> <p>
How could computer read concrete & visual poetry? How does computer navigate through How could computer read concrete & visual poetry? How does computer navigate through
@ -45,5 +49,9 @@
Everything happen in your browser. Everything happen in your browser.
</p> </p>
</aside> </aside>
<aside class="transcription" id="transcription-panel">
<button class="close">X</button>
<h1 class="title">Label Transcription</h1>
</aside>
</body> </body>
</html> </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; display: none;
} }
.info { .info,
.transcription {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -177,21 +178,20 @@ body {
transition: transform 0.4s ease-out; transition: transform 0.4s ease-out;
} }
.transcription.active,
.info.active { .info.active {
transform: translateX(0); transform: translateX(0);
transition: transform 0.4s ease-in; transition: transform 0.4s ease-in;
} }
.transcription .title,
.info .title { .info .title {
margin: 0; margin: 0;
} }
#show-info { #show-info,
position: absolute; #show-transcription,
top: 24px; .close {
right: 24px;
z-index: 100;
background: none; background: none;
display: inline-block; display: inline-block;
@ -206,18 +206,39 @@ body {
cursor: pointer; cursor: pointer;
} }
#show-transcription:hover,
#show-info:hover { #show-info:hover {
border: 1px solid tomato; border: 1px solid tomato;
background-color: tomato; background-color: tomato;
color: white; color: white;
} }
#show-info.active { .close {
position: absolute;
right: 24px;
top: 24px;
color: white; color: white;
} }
#show-info:hover.active { .close:hover {
border: 1px solid white; border: 1px solid white;
background-color: white; background-color: white;
color: #111; 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