Fixed layout of components (#19)

Author: dusanradovanovic

package.json

@@ -10,8 +10,10 @@
     "@types/react-router-dom": "^5.1.5",
     "constate": "^2.0.0",
     "css-reset-and-normalize": "^2.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "node-sass": "^4.13.0",
     "react": "^16.13.1",
+    "react-axe": "^3.5.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-script-hook": "^1.1.1",
@@ -40,9 +42,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "eslint-plugin-jsx-a11y": "^6.3.0",
-    "react-axe": "^3.4.1"
   }
 }

src/App.tsx

@@ -21,33 +21,27 @@ const App: React.FC = () => {
     <Router>
       <AppStateProvider>
         <div className="app">
-          <header role="banner" id="app-header">
-          <div className="app__header">
+          <header className="app__header">
             <AppHeader />
-          </div>
           </header>
-          <nav role="navigation" id="app-navmenu">
-          <div className="app__navmenu">
+          <nav className="app__navmenu">
             <NavMenu />
-          </div>
           </nav>
-          <main role="main">
-          <div className="app__main">
+          <main className="app__main">
             <Switch>
               {routes.map(route => (
                 <Route key={route.path} {...route} />
               ))}
             </Switch>
-          </div>
           </main>
           <footer id="app-footer" role="contentinfo" aria-label="app-footer">
             <div className="app__footer">
               <AppFooter />
             </div>
-            <div className="app__compareoverlay">
-              <CompareOverlay />
-            </div>
           </footer>
+          <aside className="app__compareoverlay">
+            <CompareOverlay />
+          </aside>
         </div>
       </AppStateProvider>
     </Router>

src/CompareOverlay.scss

@@ -10,17 +10,18 @@ $animLength: 0.2s;
   position: fixed;
   width: 100%;
   height: $overlayHeight;
-  bottom: -$overlayHeight;
+  bottom: -$overlayHeight - 10px;
   background-color: white;
   box-shadow: 0 0 10px hsla(0, 0, 0, 0.3);
   transition: bottom 0.1s ease-out;
   padding-left: $maxScrollWidth;
   padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
+  z-index: 10;
   display: flex;
   align-items: center;
   flex-direction: row;
 
-  &.--showing {
+  &--visible {
     bottom: 0;
   }
 

src/CompareOverlay.tsx

@@ -29,7 +29,7 @@ export const CompareOverlay: React.FC = (props) => {
   };
 
   return (
-    <div className={`compareoverlay ${isShowingOverlay ? '--showing' : ''}`}>
+    <div className={`compareoverlay ${isShowingOverlay ? 'compareoverlay--visible' : ''}`}>
       <div className="compareoverlay__products">
         {compareProducts.map(product => (
           <div key={product.id} className="compareoverlay__product">
@@ -41,7 +41,7 @@ export const CompareOverlay: React.FC = (props) => {
               <div className="compareoverlay__productprice">{product.meta.display_price.without_tax.formatted}</div>
             </div>
             <div className="compareoverlay__removeproduct">
-              <button className="epbtn --small" aria-label="Remove Product" onClick={() => handleRemoveProduct(product)}>
+              <button className="epbtn --small" aria-label="Remove product from comparison" onClick={() => handleRemoveProduct(product)}>
                 <svg fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
                   <path d="M6 18L18 6M6 6l12 12"></path>
                 </svg>

src/CompareProducts.scss

@@ -4,7 +4,7 @@
 
   margin-top: 60px;
 
-  h1 {
+  #{$block}__title {
     text-align: center;
     font-weight: bold;
     font-size: 26px;

src/CompareProducts.tsx

@@ -15,7 +15,7 @@ export const CompareProducts: React.FC = () => {
 
   return (
     <div className="compareproducts">
-      <h1>Products comparison</h1>
+      <h1 className="compareproducts__title">Products comparison</h1>
       {compareProducts.length === 0
       ? (
         <div className="compareproducts__noproducts">