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

Fixed the Show/Hide button

This commit is contained in:
maste9 2022-02-17 20:51:26 +01:00
parent e3af41ea2e
commit 1221bc295d
2 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -94,9 +94,10 @@
const myCW = document.createElement('summary'); const myCW = document.createElement('summary');
const myButton = document.createElement('button'); const myButton = document.createElement('button');
myButton.addEventListener("click", showHide); myButton.addEventListener("click", showHide);
myButton.textContent = "\u{1F648}"; myButton.title = "Show/Hide Content";
// myButton.textContent = "\u{1F648}";
myCW.textContent = obj.spoiler_text; myCW.textContent = obj.spoiler_text;
myButton.classList.toggle("show"); myButton.classList.add("hide");
myHeader.appendChild(myCW); myHeader.appendChild(myCW);
myHeader.appendChild(myButton); myHeader.appendChild(myButton);
@ -139,7 +140,7 @@
function populateFooter(item, obj){ function populateFooter(item, obj){
const footer = document.createElement('footer'); const footer = document.createElement('footer');
const stats = document.createElement('ul'); const stats = document.createElement('ul');
stats.innerHTML = `<li class="replies fa-solid fa-retweet">${obj.replies_count}</li><li class="favs fa-solid fa-star">${obj.favourites_count}</li><li class="boosts fa-solid fa-share">${obj.reblogs_count}</li>`; stats.innerHTML = `<li class="replies fa-solid fa-retweet" title="Replies">${obj.replies_count}</li><li class="favs fa-solid fa-star" title="Favorites">${obj.favourites_count}</li><li class="boosts fa-solid fa-share" title="Boosts">${obj.reblogs_count}</li>`;
footer.appendChild(stats); footer.appendChild(stats);
item.appendChild(footer); item.appendChild(footer);
} }
@ -159,11 +160,13 @@
if( section.style.display == "none" ){ if( section.style.display == "none" ){
section.style.display = "block"; section.style.display = "block";
button.classList.toggle("hide"); button.classList.add("show");
button.classList.remove("hide");
} }
else { else {
section.style.display = "none"; section.style.display = "none";
button.classList.toggle("show"); button.classList.add("hide");
buttom.classList.remove("show");
} }
} }

38
style.css
View File

@ -39,19 +39,55 @@ article a {
article header { article header {
width:100%; width:100%;
grid-area: header; grid-area: header;
text-align:right; display:grid;
grid-template-areas:
"cw button";
grid-template-columns: 3fr 1fr;
} }
article header summary { article header summary {
grid-area: cw;
font-weight: 300; font-weight: 300;
width:100%; width:100%;
} }
article header time { article header time {
width:100%;
padding-right:1em; padding-right:1em;
} }
article header button {
grid-area: button;
width: 2em;
height: 1.5em;
background: #313543;
border:solid thin #b4b5ba;
border-radius: 10px;
color:#b4b5ba;
}
article header button.show {
font-size: 2em;
}
article header button.show:before {
content: "\1F648";
}
article header button.hide {
font-size: 2em;
}
article header button.hide:before {
content: "\1F649";
}
article aside { article aside {
grid-area: profile; grid-area: profile;
text-align:center; text-align:center;