Merge pull request #22 from systemseed/basket

[#155004150] Go to Basket widget styling.
systemseed · Apr 4, 2018 · d1ca7c6 · d1ca7c6
2 parents 0f269c1 + 102fc8b
commit d1ca7c6
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 9 deletions.
diff --git a/frontend-gifts/src/components/GlobalHeader/index.js b/frontend-gifts/src/components/GlobalHeader/index.js
@@ -46,6 +46,18 @@ class GlobalHeader extends React.Component {
           headerLeftText={siteContentSettings.fieldConfigHeaderLeftText.value}
           headerRightText={siteContentSettings.fieldConfigHeaderRightText.value}
         />
+
+        {/* Visible only on the mobile */}
+        <div className="mobile-menu-wrapper">
+          <Button
+            bsStyle="link"
+            className={this.state.isMenuCollapsed ? 'mobile-menu-toggle' : 'mobile-menu-toggle active'}
+            onClick={this.mobileMenuToggle}
+          >
+            <i className="material-icons menu" />
+          </Button>
+        </div>
+
         <Logo />
         {/* <RegionSwitcher /> */}
 
@@ -57,15 +69,6 @@ class GlobalHeader extends React.Component {
         <div className="toolbar">
           <div className="inner">
 
-            {/* Visible only on the mobile */}
-            <Button
-              bsStyle="link"
-              className={this.state.isMenuCollapsed ? 'mobile-menu-toggle' : 'mobile-menu-toggle active'}
-              onClick={this.mobileMenuToggle}
-            >
-              <i className="material-icons menu" />
-            </Button>
-
             {/* Basket DropDown Widget */}
             <BasketWidget />
           </div>

diff --git a/frontend-gifts/src/containers/BasketWidgetContainer/index.js b/frontend-gifts/src/containers/BasketWidgetContainer/index.js
@@ -11,6 +11,7 @@ const BasketWidgetContainer = ({ count }) => (
         <span className="material-icons shopping_basket" />
         <span className="count">{ count }</span>
       </i>
+      <span className="text">Go to Basket</span>
     </Link>
     <BasketWidgetDropDownContainer />
   </div>

diff --git a/frontend-gifts/src/styles/sass/_falcon.scss b/frontend-gifts/src/styles/sass/_falcon.scss
@@ -1,5 +1,43 @@
 // Falcon fixes for the theme.
 
+// General layout customizations.
+$navbar-min-height-mobile: 98px;
+.navbar {
+  @media #{$navbar-collapse} {
+    min-height: $navbar-min-height-mobile;
+    .main-navigation {
+      top: $navbar-min-height-mobile;
+      height: calc(100% - 98px);
+    }
+
+    @media (min-width: $screen-sm-min) {
+      min-height: $navbar-min-height;
+
+      .main-navigation {
+        top: $navbar-min-height;
+        height: calc(100% - 114px);
+      }
+    }
+  }
+}
+.message-bar {
+  top: $navbar-min-height-mobile;
+
+  @media (min-width: $screen-sm-min) {
+    top: $navbar-min-height;
+  }
+}
+.page-content {
+  margin-top: $navbar-min-height-mobile;
+
+  @media (min-width: $screen-sm-min) {
+    margin-top: $navbar-min-height;
+  }
+}
+.site-logo.visible-mobile {
+  padding: 17px 0;
+}
+
 // Make drop-down arrows to open select list.
 .form-element {
   &.form-select:before {
@@ -89,3 +127,107 @@
     }
   }
 }
+
+// Go to Basket widget.
+.toolbar {
+  right: 15px;
+  width: 110px;
+
+  @media (min-width: $screen-xs-min) {
+    right: 20px;
+    width: 130px;
+  }
+
+  .inner {
+    .cart-btn {
+      width: 110px;
+
+      @media (min-width: $screen-xs-min) {
+        width: 130px;
+      }
+
+      &> a {
+        padding-left: 0;
+        padding-right: 0;
+
+        .count {
+          top: -7px;
+        }
+
+        .text {
+          display: inline-block;
+          margin-left: 20px;
+          font-size: 10px;
+        }
+
+        @media (min-width: $screen-sm-min) {
+          .text {
+            font-size: 12px;
+          }
+
+          .shopping_basket {
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Mobile menu.
+.mobile-menu-wrapper {
+  display: inline-block;
+  margin-top: 34px;
+  vertical-align: middle;
+  margin-left: -10px;
+
+  @media (min-width: $screen-sm-min) {
+    margin-right: 20px;
+  }
+
+  .mobile-menu-toggle {
+    display: none;
+    padding: 10px;
+
+    &:after {
+      display: block;
+      font-family:'Material Icons';
+      content:"\e5cd";
+      margin-top: -30px;
+      opacity: 0;
+      @include transform(translateY(30px) scale(0.7));
+      @include transition(transform .3s, opacity .15s);
+    }
+    &.active {
+      > i {
+        opacity: 0;
+        @include transform(translateY(-30px) scale(0.7));
+      }
+      &:after {
+        opacity: 1;
+        @include transform(translateY(0) scale(1));
+      }
+    }
+
+    .material-icons.menu {
+      &:before {
+        font-size: 24px;
+        line-height: 24px;
+
+        @media (min-width: $screen-sm-min) {
+          font-size: 30px;
+          line-height: 30px;
+        }
+      }
+    }
+
+    @media #{$navbar-collapse} {
+      display: table-cell;
+      margin: 0;
+      vertical-align: middle;
+      height: 100%;
+      border: 0;
+      line-height: 30px;
+    }
+  }
+}