adds toggle functionality, improves class names, fixes dialog box pos…

…itioning in desktop
LBuchananCates · Nov 8, 2023 · 15ce192 · 15ce192
1 parent 82f25cd
commit 15ce192
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/furniture-article.css b/furniture-article.css
@@ -63,14 +63,14 @@ main {
   letter-spacing: 0.122px;
 }
 
-.article__content-desktop {
+.article {
   display: flex;
   flex-direction: column;
   gap: 32px;
   padding: 36px 32px 20px;
 }
 
-.author__section {
+.author {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -109,7 +109,12 @@ main {
   z-index: 2;
 }
 
-dialog {
+.active {
+  position: absolute;
+  right: 2rem;
+}
+
+.share-options {
   background-color: var(--brand-primary);
   border-radius: 0 0 10px 10px;
   border: none;
@@ -119,7 +124,7 @@ dialog {
   bottom: 0;
 }
 
-dialog p {
+.share-options p {
   display: inline;
   color: var(--brand-secondary);
   text-transform: uppercase;
@@ -171,20 +176,30 @@ dialog p {
     letter-spacing: 0.25px;
   }
 
-  .author__section {
+  .author {
     justify-content: space-between;
   }
 
-  /* .triangle {
+  .share-options {
+    margin: 0;
+    border-radius: 10px;
+    width: fit-content;
+    padding: 18px 36px;
+    /* this code is needed because despite being absolutely positioned, setting right does not behave as expected */
+    bottom: 5rem;
+    left: 34.5rem;
+  }
+
+  .triangle {
     position: absolute;
     display: flex;
     width: 0px;
     height: 0px;
     border-style: solid;
-    border-width: 30px 30px 0 30px;
+    border-width: 32px 32px 0px 32px;
     border-color: hsl(217, 19%, 35%) transparent transparent transparent;
     transform: rotate(0deg);
     bottom: -1.5rem;
     left: 6rem;
-  } */
+  }
 }
diff --git a/furniture-article.js b/furniture-article.js
@@ -3,7 +3,9 @@ const shareOptionsDialog = document.getElementById("share-options");
 shareButton.addEventListener("click", function () {
   if (shareOptionsDialog.open) {
     shareOptionsDialog.close();
+    shareButton.classList.toggle("active");
   } else {
     shareOptionsDialog.show();
+    shareButton.classList.toggle("active");
   }
 });
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
 <body>
   <main>
     <section class="image__section">
-      <!-- <img src="./images/drawers.jpg" alt="drawers" /> -->
       <img
         src="./images/drawers-img.png"
         alt="drawers"
@@ -23,7 +22,7 @@
         class="desktop-drawers-img"
       />
     </section>
-    <div class="article__content-desktop">
+    <div class="article">
       <section class="article__section">
         <h1 class="article__header">
           Shift the overall look and feel by adding these wonderful touches to
@@ -35,7 +34,7 @@ <h1 class="article__header">
           you make any room feel complete.
         </p>
       </section>
-      <section class="author__section">
+      <section class="author">
         <div class="author__items">
           <img src="./images/michelle-avatar.svg" alt="michelle-avatar" />
           <div class="author__details">
@@ -58,6 +57,7 @@ <h1 class="article__header">
               <img src="./images/icon-pinterest.svg" alt="pinterest-icon" />
             </div>
           </div>
+          <div class="triangle"></div>
         </dialog>
       </section>
     </div>