From 1221bc295d341e6701470d0231543921af8abab7 Mon Sep 17 00:00:00 2001
From: maste9 <maste9@users.noreply.github.com>
Date: Thu, 17 Feb 2022 20:51:26 +0100
Subject: [PATCH] Fixed the Show/Hide button

---
 index.html | 13 ++++++++-----
 style.css  | 38 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 2f53983..92290ac 100644
--- a/index.html
+++ b/index.html
@@ -94,9 +94,10 @@
 	      const myCW = document.createElement('summary');
 	      const myButton = document.createElement('button');
 	      myButton.addEventListener("click", showHide);
-	      myButton.textContent = "\u{1F648}";
+	      myButton.title = "Show/Hide Content";
+	  //    myButton.textContent = "\u{1F648}";
 	      myCW.textContent = obj.spoiler_text;
-	      myButton.classList.toggle("show");
+	      myButton.classList.add("hide");
 				     
 	      myHeader.appendChild(myCW);
 	      myHeader.appendChild(myButton);
@@ -139,7 +140,7 @@
       function populateFooter(item, obj){
 	  const footer = document.createElement('footer');
 	  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);
 	  item.appendChild(footer);
       }
@@ -159,11 +160,13 @@
 	    
 	    if( section.style.display == "none" ){
 		section.style.display = "block";
-		button.classList.toggle("hide");
+		button.classList.add("show");
+		button.classList.remove("hide");
 	    }
 	    else {
 		section.style.display = "none";
-		button.classList.toggle("show");
+		button.classList.add("hide");
+		buttom.classList.remove("show");
 	    }
 	}
 
diff --git a/style.css b/style.css
index 6761a30..40d4438 100644
--- a/style.css
+++ b/style.css
@@ -39,19 +39,55 @@ article a {
 article header {
     width:100%;
     grid-area: header;
-    text-align:right;
+    display:grid;
+    grid-template-areas:
+	"cw button";
+    grid-template-columns: 3fr 1fr;
+
 }
 
 article header summary {
+    grid-area: cw;
     font-weight: 300;
     width:100%;
 
 }
 
 article header time {
+    width:100%;
+
     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 {
     grid-area: profile;
     text-align:center;