bug/issue 350 Fix website shelf collapse/expand event (#351)

* fix: add css rule pointer-events * fix: add css grid (#353) * fix: remove invalid h2 within inline element Co-authored-by: hutchgrant <[email protected]> Co-authored-by: Owen Buckley <[email protected]>
ProjectEvergreen · May 13, 2020 · 43258ff · 43258ff
1 parent 35771ea
commit 43258ff
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/www/components/shelf/shelf.css b/www/components/shelf/shelf.css
@@ -15,6 +15,23 @@
     }
   }
 
+  & .list-wrap > a {
+    display: grid;
+    grid-template-columns: auto 20px;
+    align-items: center;
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    @media (max-width: 768px) {
+      padding-left:10px;
+      padding-right:10px;
+    }
+
+  }
+
   & h2 {
     display: block;
     font-size: 1.5em;
@@ -65,11 +82,13 @@
     }
   }
 
-  & span > svg {
-    margin-top:5px;
-    float:right;
-    margin-left: auto;
-    height:20px;
+  & span {
+    pointer-events: none;
+    > svg {
+      margin-top:10px;
+      margin-left: auto;
+      height:20px;
+    }
   }
 
   & .hidden {

diff --git a/www/components/shelf/shelf.js b/www/components/shelf/shelf.js
@@ -128,7 +128,7 @@ class Shelf extends LitElement {
 
       return html`
         <li class="list-wrap">
-          <a href="${item.link}" @click="${this.handleClick}"><h2 id="${id}">${item.label} <span>${chevron}</span></h2></a>
+          <a id="${id}" href="${item.link}" @click="${this.handleClick}"><span>${item.label}</span><span>${chevron}</span></a>
           <hr>
           ${renderListItems(children, selected)}
         </li>