Fixed plus-minus button

build-systems · Apr 17, 2024 · ca450bc · ca450bc
1 parent 2dc28a6
commit ca450bc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/components/ExpandButton.astro b/src/components/ExpandButton.astro
@@ -12,7 +12,12 @@ const { buttonText, buttonLink, id } = Astro.props;
 
 <div>
   <div class="read-more">
-    <button class="plus-minus" id={"expand-button-" + id}>+</button><span
+    <button class="plus-minus" id={"expand-button-" + id}
+      ><svg class="icon">
+        <use xlink:href="/assets/icons.svg#plus"></use>
+      </svg>
+    </button>
+    <span
       ><Button
         text={buttonText}
         link={buttonLink}
@@ -29,6 +34,7 @@ const { buttonText, buttonLink, id } = Astro.props;
 <style>
   .read-more {
     display: flex;
+    align-items: center;
   }
 
   .more-text {
@@ -41,23 +47,32 @@ const { buttonText, buttonLink, id } = Astro.props;
   }
 
   .plus-minus {
+    background: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 1.7rem;
-    height: 1.7rem;
-    font-size: 1.6rem;
     background-color: var(--text-main);
-    color: var(--background-body);
     border-radius: 50%;
+    aspect-ratio: 1/1;
+    height: 26px;
+    padding: 0;
     margin-right: 1rem;
     cursor: pointer;
     border: 0;
   }
 
   .plus-minus:hover {
     background-color: var(--background-body);
-    color: var(--text-main);
+  }
+
+  .icon {
+    height: 26px;
+    width: 26px;
+    fill: var(--background-body);
+  }
+
+  .icon:hover {
+    fill: var(--text-main);
   }
 
   @media (max-width: 1280px) {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -190,13 +190,16 @@ const posts = await getAllPosts();
 
   textsExpandButtons.forEach((text, i) => {
     const button = document.getElementById("expand-button-0" + (i + 1))!;
+    const svgElement = button.querySelector("svg");
+    const useElement = svgElement?.querySelector("use");
+
     button.addEventListener("click", () => {
       if (text.style.height === "max-content") {
         text.style.height = "1px";
-        button.innerHTML = "+";
+        useElement?.setAttribute("xlink:href", "/assets/icons.svg#plus");
       } else {
         text.style.height = "max-content";
-        button.innerHTML = "−";
+        useElement?.setAttribute("xlink:href", "/assets/icons.svg#minus");
       }
     });
   });