feat: beautify homepage & add carousel

alirezapiran7 · Oct 25, 2020 · a6194ff · a6194ff
1 parent b380d3b
commit a6194ff
Show file tree

Hide file tree

Showing 26 changed files with 248 additions and 74 deletions.
diff --git a/client/app/components/BrandList/index.js b/client/app/components/BrandList/index.js
@@ -16,9 +16,9 @@ const BrandList = props => {
     <div className='brand-list'>
       <h2>Shop By Brand</h2>
       <hr />
-      <Row>
+      <Row className='flex-sm-row'>
         {brands.map((brand, index) => (
-          <Col xs='6' md='4' lg='3' key={index} className='mb-3'>
+          <Col xs='6' md='4' lg='3' key={index} className='mb-3 px-2'>
             <div className='brand-box'>
               <Link to={`/shop/brand/${brand.slug}`} className='d-block'>
                 <h4>{brand.name}</h4>

diff --git a/client/app/components/CarouselSlider/helpers.js b/client/app/components/CarouselSlider/helpers.js
@@ -0,0 +1,29 @@
+export const responsiveOneItemCarousel = {
+  desktop: {
+    breakpoint: {
+      max: 3000,
+      min: 1024
+    },
+    items: 1,
+    slidesToSlide: 1,
+    partialVisibilityGutter: 0
+  },
+  mobile: {
+    breakpoint: {
+      max: 464,
+      min: 0
+    },
+    items: 1,
+    slidesToSlide: 1,
+    partialVisibilityGutter: 0
+  },
+  tablet: {
+    breakpoint: {
+      max: 1024,
+      min: 200
+    },
+    items: 1,
+    slidesToSlide: 1,
+    partialVisibilityGutter: 0
+  }
+};
diff --git a/client/app/components/CarouselSlider/index.js b/client/app/components/CarouselSlider/index.js
@@ -0,0 +1,59 @@
+/**
+ *
+ * Carousel
+ *
+ */
+
+import React from 'react';
+
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+const CarouselSlider = props => {
+  const {
+    swipeable,
+    draggable,
+    showDots,
+    infinite,
+    autoPlay,
+    keyBoardControl,
+    autoPlaySpeed,
+    ssr,
+    responsive,
+    children
+  } = props;
+
+  return (
+    <Carousel
+      swipeable={swipeable}
+      draggable={draggable}
+      showDots={showDots}
+      infinite={infinite}
+      autoPlay={autoPlay}
+      keyBoardControl={keyBoardControl}
+      autoPlaySpeed={autoPlaySpeed}
+      ssr={ssr}
+      responsive={responsive}
+      customTransition='all 1s'
+      transitionDuration={500}
+      containerClass='carousel-container'
+      dotListClass='carousel-dot-list-style'
+      itemClass='carousel-slider-item'
+    >
+      {children}
+    </Carousel>
+  );
+};
+
+CarouselSlider.defaultProps = {
+  swipeable: false,
+  draggable: false,
+  showDots: false,
+  infinite: true,
+  autoPlay: false,
+  keyBoardControl: true,
+  ssr: false,
+  autoPlaySpeed: 2000
+};
+
+export default CarouselSlider;
diff --git a/client/app/containers/Homepage/banners.json b/client/app/containers/Homepage/banners.json
@@ -0,0 +1,14 @@
+[
+  {
+    "imageUrl": "../images/banners/banner-3.jpg",
+    "link": "",
+    "title": "",
+    "content": "<p></p>\n"
+  },
+  {
+    "imageUrl": "../images/banners/banner-4.jpg",
+    "link": "",
+    "title": "",
+    "content": "<p></p>\n"
+  }
+]
diff --git a/client/app/containers/Homepage/index.js b/client/app/containers/Homepage/index.js
@@ -7,13 +7,49 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { Row, Col } from 'reactstrap';
+
 import actions from '../../actions';
+import banners from './banners.json';
+import CarouselSlider from '../../components/CarouselSlider';
+import { responsiveOneItemCarousel } from '../../components/CarouselSlider/helpers';
 
 class Homepage extends React.PureComponent {
-  componentDidMount() {}
-
   render() {
-    return <h3>Homepage</h3>;
+    return (
+      <div className='homepage'>
+        <Row className='flex-row'>
+          <Col xs='12' lg='6' className='order-lg-2 mb-3 px-3 px-md-2'>
+            <div className='home-carousel'>
+              <CarouselSlider
+                swipeable={true}
+                showDots={true}
+                infinite={true}
+                autoPlay={false}
+                slides={banners}
+                responsive={responsiveOneItemCarousel}
+              >
+                {banners.map((item, index) => (
+                  <img key={index} src={item.imageUrl} />
+                ))}
+              </CarouselSlider>
+            </div>
+          </Col>
+          <Col xs='12' lg='3' className='order-lg-1 mb-3 px-3 px-md-2'>
+            <div className='d-flex flex-column h-100 justify-content-between'>
+              <img src='../images/banners/banner-2.jpg' className='mb-3' />
+              <img src='../images/banners/banner-5.jpg' />
+            </div>
+          </Col>
+          <Col xs='12' lg='3' className='order-lg-3 mb-3 px-3 px-md-2'>
+            <div className='d-flex flex-column h-100 justify-content-between'>
+              <img src='../images/banners/banner-2.jpg' className='mb-3' />
+              <img src='../images/banners/banner-6.jpg' />
+            </div>
+          </Col>
+        </Row>
+      </div>
+    );
   }
 }
 

diff --git a/client/app/containers/NavigationMenu/index.js b/client/app/containers/NavigationMenu/index.js
@@ -29,18 +29,19 @@ class NavigationMenu extends React.PureComponent {
 
     return (
       <div className='navigation-menu'>
-        <Container>
-          <div className='menu-header'>
-            <h1 className='logo'>MERN Store</h1>
-            {isMenuOpen && (
-              <Button
-                ariaLabel='close the menu'
-                icon={<CloseIcon />}
-                onClick={toggleMenu}
-              />
-            )}
-          </div>
-          <div className='menu-body'>
+        <div className='menu-header'>
+          {isMenuOpen && (
+            <Button
+              ariaLabel='close the menu'
+              icon={<CloseIcon />}
+              onClick={toggleMenu}
+            />
+          )}
+        </div>
+        <div className='menu-body'>
+          <Container>
+            <h3 className='menu-title'>Shop By Category</h3>
+
             <nav role='navigation'>
               <ul className='menu-list'>
                 {categories.map((link, index) => (
@@ -57,8 +58,8 @@ class NavigationMenu extends React.PureComponent {
                 ))}
               </ul>
             </nav>
-          </div>
-        </Container>
+          </Container>
+        </div>
       </div>
     );
   }

diff --git a/client/app/containers/ProductPage/index.js b/client/app/containers/ProductPage/index.js
@@ -53,8 +53,8 @@ class ProductPage extends React.PureComponent {
         {isLoading ? (
           <LoadingIndicator />
         ) : Object.keys(product).length > 0 ? (
-          <Row>
-            <Col xs='12' md='5' lg='5' className='mb-3'>
+          <Row className='flex-row'>
+            <Col xs='12' md='5' lg='5' className='mb-3 px-3 px-md-2'>
               <div className='item-image'>
                 <img src={'/images/placeholder-image.png'} />
                 {product.inventory <= 0 && !shopFormErrors['quantity'] ? (
@@ -64,7 +64,7 @@ class ProductPage extends React.PureComponent {
                 )}
               </div>
             </Col>
-            <Col xs='12' md='7' lg='7' className='mb-3'>
+            <Col xs='12' md='7' lg='7' className='mb-3 px-3 px-md-2'>
               <div className='product-container'>
                 <div className='item-box'>
                   <div className='item-details'>

diff --git a/client/app/styles/core/_brand.scss b/client/app/styles/core/_brand.scss
@@ -11,20 +11,20 @@
 
 .brand-list {
   .brand-box {
+    height: 100%;
     padding: 10px;
     border: $border-default;
-    height: 100%;
+    border-radius: $border-radius-default;
+    @include transition();
 
     .brand-link {
       display: block;
     }
 
     &:hover {
+      background-color: $secondary-bg;
       border-color: $border-hover-color;
-      -moz-transition: border-color $layout-transition-speed ease-in-out;
-      -webkit-transition: border-color $layout-transition-speed ease-in-out;
-      -ms-transition: border-color $layout-transition-speed ease-in-out;
-      transition: border-color $layout-transition-speed ease-in-out;
+      @include transition();
     }
 
     .brand-desc {

diff --git a/client/app/styles/core/_button.scss b/client/app/styles/core/_button.scss
@@ -4,7 +4,8 @@ input[type='submit'],
 input[type='reset'],
 button[type='button'],
 button[type='submit'],
-button[type='reset'] {
+button[type='reset'],
+button {
   border: none;
   background: transparent;
   color: $font-custom-color !important;
@@ -116,9 +117,10 @@ button[type='reset'] {
   }
 }
 
-// body.user-is-tabbing textarea {
-//   box-shadow: none;
-// }
+body.user-is-tabbing button:focus {
+  box-shadow: none;
+  outline: 1px dotted;
+}
 
 // danger button
 .input-btn {

diff --git a/client/app/styles/core/_cart.scss b/client/app/styles/core/_cart.scss
@@ -78,10 +78,10 @@
     border-bottom: $border-default;
     text-align: right;
     padding-right: 5px;
-    @include flex();
     align-items: center;
     justify-content: flex-end;
     height: 50px;
+    @include flex();
   }
 
   .empty-cart {

diff --git a/client/app/styles/core/_checkbox.scss b/client/app/styles/core/_checkbox.scss
@@ -15,8 +15,11 @@ input[type='checkbox'] {
 }
 
 body.user-is-tabbing input[type='checkbox']:focus + label {
-  outline: 2px solid $outline-color !important;
-  outline: 2px auto -webkit-focus-ring-color !important;
+  // outline: 2px solid $outline-color !important;
+  // outline: 2px auto -webkit-focus-ring-color !important;
+
+  box-shadow: none;
+  outline: 1px dotted;
 }
 
 input[type='checkbox'] + label {

diff --git a/client/app/styles/core/_dashboard.scss b/client/app/styles/core/_dashboard.scss
@@ -79,15 +79,11 @@
         text-transform: capitalize;
         color: $font-custom-color !important;
         font-weight: $font-weight-bold-one;
-      }
-
-      a.active-link {
-        font-weight: $font-weight-bold-two;
-        background-color: $white;
 
-        // &:hover {
-        //   color: $font-hover-color !important;
-        // }
+        &.active-link {
+          font-weight: $font-weight-bold-two;
+          background-color: $white;
+        }
       }
     }
   }

diff --git a/client/app/styles/core/_homepage.scss b/client/app/styles/core/_homepage.scss
@@ -1,5 +1,2 @@
-.homepage {
-  .title {
-    font-size: $font-size-heading-x-large !important;
-  }
-}
+// .homepage {
+// }
diff --git a/client/app/styles/core/_layout.scss b/client/app/styles/core/_layout.scss
@@ -43,10 +43,10 @@ body {
 }
 
 .wrapper {
-  padding: 60px 0px;
+  padding: 170px 0px 25px;
 
-  @include media-breakpoint-down(sm) {
-    padding: 200px 0px;
+  @include media-breakpoint-up(md) {
+    padding: 25px 0px;
   }
 }
 
@@ -90,6 +90,11 @@ a {
   }
 }
 
+body.user-is-tabbing a:focus {
+  box-shadow: none;
+  outline: 1px dotted;
+}
+
 h1,
 h2,
 h3,
@@ -159,6 +164,7 @@ h6,
 body.user-is-tabbing *:focus {
   // outline: 2px solid $outline-color !important;
   // outline: 2px auto -webkit-focus-ring-color !important;
+  // outline: 1px dotted !important;
   outline: none;
   box-shadow: $outline-box-shadow;
   border-radius: $border-radius-default;