homer77
/
tootkomm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

A button to toggle them all...

This commit is contained in:
maste9 2022-02-18 22:37:24 +01:00
parent 1221bc295d
commit c88eb64396
2 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -14,7 +14,10 @@
<main id="comments"> <main id="comments">
<link rel="stylesheet" href="fontawesome/css/all.css"> <link rel="stylesheet" href="fontawesome/css/all.css">
<link rel="stylesheet" href="style.css?v=1.21"> <link rel="stylesheet" href="style.css?v=1.22">
<header>
<h1>Comments from the Fediverse</h1>
<button onclick="showHideAll()" class="hide" title="Show/Hide all statuses"></button></header>
</main> </main>
@ -166,7 +169,33 @@
else { else {
section.style.display = "none"; section.style.display = "none";
button.classList.add("hide"); button.classList.add("hide");
buttom.classList.remove("show"); button.classList.remove("show");
}
}
function showHideAll(){
button = event.srcElement;
commentArea = document.getElementById('comments');
articles = commentArea.querySelectorAll('article section');
if( button.classList.contains("hide") ) {
for( article of articles ) {
article.style.display = "block";
button.classList.add("show");
button.classList.remove("hide");
article.parentNode.querySelector("button").classList.add("show");
article.parentNode.querySelector("button").classList.remove("hide");
}
}
else {
for( article of articles ) {
article.style.display = "none";
button.classList.add("hide");
button.classList.remove("show");
article.parentNode.querySelector("button").classList.add("hide");
article.parentNode.querySelector("button").classList.remove("show");
}
} }
} }

35
style.css
View File

@ -9,6 +9,31 @@ html {
text-decoration: none; text-decoration: none;
} }
#comments > header {
display:grid;
grid-template-areas:
"title button";
grid-template-columns: 4fr 1fr;
width:40em;
background: #282c37;
padding: 0.5em 0.25em 0.5em 0.25em;
}
#comments > header > h1 {
grid-area: title;
color: #b4b5ba;
text-shadow:2px 2px #424553;
font-size: 1em;
font-variant:oblique;
font-weight:thin;
padding-left:1em;
}
#comments > header > button {
grid-area:button;
}
time { time {
display:inline-block; display:inline-block;
font-size: 0.7em; font-size: 0.7em;
@ -59,7 +84,7 @@ article header time {
padding-right:1em; padding-right:1em;
} }
article header button { header button {
grid-area: button; grid-area: button;
width: 2em; width: 2em;
height: 1.5em; height: 1.5em;
@ -70,20 +95,20 @@ article header button {
color:#b4b5ba; color:#b4b5ba;
} }
article header button.show { header button.show {
font-size: 2em; font-size: 2em;
} }
article header button.show:before { header button.show:before {
content: "\1F648"; content: "\1F648";
} }
article header button.hide { header button.hide {
font-size: 2em; font-size: 2em;
} }
article header button.hide:before { header button.hide:before {
content: "\1F649"; content: "\1F649";
} }