Style/layout fixes for mobile

app.js

@@ -121,16 +121,16 @@ handlebars = handlebars.create({
         },
         perRowClass: (numProducts) => {
             if(parseInt(numProducts) === 1){
-                return'col-md-12 product-item';
+                return'col-6 col-md-12 product-item';
             }
             if(parseInt(numProducts) === 2){
-                return'col-md-6 product-item';
+                return'col-6 col-md-6 product-item';
             }
             if(parseInt(numProducts) === 3){
-                return'col-md-4 product-item';
+                return'col-6 col-md-4 product-item';
             }
             if(parseInt(numProducts) === 4){
-                return'col-md-3 product-item';
+                return'col-6 col-md-3 product-item';
             }
 
             return'col-md-6 product-item';

public/stylesheets/admin.css

@@ -20,9 +20,6 @@
   padding-top: 10px;
   height: 45px;
 }
-.searchMenuLocation-side {
-  padding-right: 0;
-}
 .productsWrapper {
   padding-right: 10px;
   padding-left: 10px;

public/stylesheets/admin.min.css

@@ -1 +1 @@
-.btn-outline-primary,.btn-warning{color:#fff!important;background-color:#000;border-color:#000}.btn-outline-danger{color:#fff!important;background-color:#cc4135;border-color:#cc4135}.has-error div,.has-error input,.has-error textarea{border-color:#cc4135}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:20px}.product-price{padding-bottom:0}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}body .popover{display:none!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #cc4135}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#cc4135;border-bottom:none}.footer{padding-top:10px}}
+.btn-outline-primary,.btn-warning{color:#fff!important;background-color:#000;border-color:#000}.btn-outline-danger{color:#fff!important;background-color:#cc4135;border-color:#cc4135}.has-error div,.has-error input,.has-error textarea{border-color:#cc4135}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:20px}.product-price{padding-bottom:0}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}body .popover{display:none!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #cc4135}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#cc4135;border-bottom:none}.footer{padding-top:10px}}

public/stylesheets/less/admin.less

@@ -25,10 +25,6 @@
     height: 45px;
 }
 
-.searchMenuLocation-side {
-    padding-right: 0;
-}
-
 .productsWrapper{
     padding-right: 10px;
     padding-left: 10px;

public/stylesheets/less/style.less

@@ -109,6 +109,15 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0; 
 }
 
+.navbar-brand{
+    color: @secondary-btn-color;
+    letter-spacing: 4px;
+    padding-left: 20px;
+    padding-top: 10px;
+    height: 80px;
+    font-size: 55px;
+}
+
 .navbar-brand>img {
     width: auto;
     height: 100%;
@@ -421,6 +430,16 @@ input.form-control.customerDetails{
     margin-bottom: 0;
 }
 
+.previous a{
+    border-bottom-left-radius: .25rem;
+    border-top-left-radius: .25rem;
+}
+
+.next a{
+    border-bottom-right-radius: .25rem;
+    border-top-right-radius: .25rem;
+}
+
 .image-next{
     position: absolute;
     top: 180px; 
@@ -556,6 +575,7 @@ a {
     .pushy {
         width: calc(100%);
     }
+
     .pushy-right {
         -webkit-transform: translate3d(calc(100%), 0, 0);
         -ms-transform: translate3d(calc(100%), 0, 0);
@@ -600,6 +620,8 @@ a {
     .product-layout{
         padding-top: 0px;
         padding-bottom: 30px;
+        padding-left: 10px;
+        padding-right: 10px;
     }
 
     #btn_search{
@@ -632,4 +654,13 @@ a {
     body{
         margin-bottom: @footer-height;
     }
+
+    .navbar-brand {
+        padding-left: 0px;
+        height: auto;
+    }
+
+    .thumbnail{
+        min-height: 0;
+    }
 }

public/stylesheets/style.css

@@ -81,6 +81,14 @@ input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+.navbar-brand {
+  color: #cc3a2c;
+  letter-spacing: 4px;
+  padding-left: 20px;
+  padding-top: 10px;
+  height: 80px;
+  font-size: 55px;
+}
 .navbar-brand > img {
   width: auto;
   height: 100%;
@@ -217,14 +225,6 @@ input[type=number]::-webkit-outer-spin-button {
 .search-bar {
   margin-top: 10px;
 }
-.searchMenuLocation-side {
-  padding-left: 25px;
-  padding-right: 25px;
-}
-.searchMenuLocation-top {
-  padding-left: 5px;
-  padding-right: 5px;
-}
 .breadcrumb {
   background-color: #f8f9fa;
   margin-top: 10px;
@@ -343,6 +343,14 @@ input.form-control.customerDetails {
 .admin {
   margin-bottom: 0;
 }
+.previous a {
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+.next a {
+  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
 .image-next {
   position: absolute;
   top: 180px;
@@ -499,6 +507,8 @@ a {
   .product-layout {
     padding-top: 0px;
     padding-bottom: 30px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
   #btn_search {
     border-top-right-radius: 4px;
@@ -524,4 +534,11 @@ a {
   body {
     margin-bottom: 100px;
   }
+  .navbar-brand {
+    padding-left: 0px;
+    height: auto;
+  }
+  .thumbnail {
+    min-height: 0;
+  }
 }

views/layouts/layout.hbs

@@ -87,13 +87,12 @@
     {{else}}
     <body>
     {{/if}}
-		<!-- Static navbar -->
         <nav class="navbar navbar-expand-lg mainNavBar">
-            <a class="navbar-brand" href="/">CLOTH</a>
+            <a class="navbar-brand" href="/">{{@root.config.cartTitle}}</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
+                <i class="fa fa-bars" aria-hidden="true"></i>
-            </button>
+            </button> 
-            <div class="collapse navbar-collapse" id="navbarText">
+            <div id="navbarText">
                 <ul class="navbar-nav ml-auto">
                     {{#ifCond @root.config.enableLanguages "!=" false}}
                     <li class="nav-item dropdown">

views/themes/Cloth/checkout-information.hbs

@@ -12,13 +12,13 @@
             {{/if}}
         </ol>
     </nav>
-    <div class="row 1">
+    <div class="row">
         {{#if paymentMessage}}
         <div class="col-sm-12">
             <p class="text-danger text-center">{{paymentMessage}}</p>
         </div>
         {{/if}}
-        <div class="col-md-5">
+        <div class="col-12 col-md-5 bottom-pad-15">
             <div class="card top-marg-15">
                 <div class="card-body customer-details-login">
                     <h5 class="card-heading">{{ @root.__ "Customer details" }}</h5>
@@ -84,7 +84,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-7" id="cart">
+        <div class="col-md-7 d-none" id="cart">
             {{> (getTheme 'cart')}}
             {{#if @root.session.cart}}
             <div class="row">

views/themes/Cloth/checkout-shipping.hbs

@@ -8,7 +8,7 @@
         </ol>
     </nav>
     <div class="row">
-        <div class="col-md-5">
+        <div class="col-12 col-md-5 bottom-pad-15">
             <div class="card top-marg-15 bottom-marg-15">
                 <div class="card-body">
                     <h5 class="card-title">{{ @root.__ "Shipping options" }}</h5>
@@ -26,7 +26,7 @@
             <a href="/checkout/information" class="btn btn-outline-primary pull-left">{{ @root.__ "Return to information" }}</a>
             <a href="/checkout/payment" class="btn btn-outline-primary pull-right">{{ @root.__ "Proceed to payment" }}</a>
         </div>
-        <div id="cart" class="col-md-7">
+        <div id="cart" class="col-md-7 d-none">
             {{> (getTheme 'cart')}}
             <div class="row">
                 {{#if @root.session.cart}}

views/themes/Cloth/front-menu.hbs

@@ -1,6 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light navbarMenuWrapper col-sm-12">
+<nav id="navbarMenu" class="navbar navbar-expand-lg navbar-light bg-light navbarMenuWrapper col-sm-12 collapse navbar-collapse">
-    {{!-- <div class="col-sm-8 navbarMenu1"> --}}
+    <div class="col-sm-8 offset-md-2" id="navbarSupportedContent">
-    <div class="col-sm-8 offset-md-2 collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
             <li class="nav-item {{#unless searchTerm}}active{{/unless}}"><a class="nav-link" href="/">Home</a></li>
             {{#each menu.items}}

views/themes/Cloth/index.hbs

@@ -1,5 +1,5 @@
 {{> themes/Cloth/front-menu}}
-<div class="productsWrapper col-sm-8 offset-sm-2">
+<div class="productsWrapper col-sm-12 col-md-8 offset-md-2">
     {{#if filtered}}
         <div class="product-layout col-sm-12">
             {{#ifCond @root.paginateUrl '==' 'category'}}
@@ -17,7 +17,7 @@
         {{/ifCond}}
         {{#each results}}
             <div class="{{perRowClass ../config.productsPerRow}}">
-                <div class="thumbnail1">
+                <div class="thumbnail">
                     {{#if productPermalink}}
                         <div class="product-wrapper">
                             <a href="/product/{{this.productPermalink}}">

views/themes/Cloth/style.css

@@ -59,16 +59,7 @@
     background-color: #cc4135 !important;
 }
 
-.navbar-brand{
+.navbar-brand-image {
-    color: #cc4135 !important;
-    letter-spacing: 4px;
-    padding-left: 20px !important;
-    padding-top: 0px !important;
-    height: 80px !important;
-    font-size: 55px !important;
-}
-
-.navbar-brand-image, .navbar-brand{
     height: 80px;
     padding-left: 10px;
     padding-top: 10px;
@@ -145,8 +136,4 @@
         background-color: #E74C3C;
         border-bottom: none;
     }
-
-    .footer {
-        padding-top: 10px;
-    }
 }

views/themes/Cloth/style.min.css

@@ -1 +1 @@
-.add-to-cart{color:#fff!important}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:30px}.product-price{padding-bottom:0}.navbarMenuWrapper{padding-top:10px;margin-bottom:5px}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.img-thumbnail{border:0}.pagination .page-link{background-color:#cc4135!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart,.pushy-link{border-color:#e74c3c;background-color:#e74c3c}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #e74c3c}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}.has-error input{border-color:#dc3545}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#e74c3c;border-bottom:none}.footer{padding-top:10px}}
+.add-to-cart{color:#fff!important}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:30px}.product-price{padding-bottom:0}.navbarMenuWrapper{padding-top:10px;margin-bottom:5px}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.img-thumbnail{border:0}.pagination .page-link{background-color:#cc4135!important}.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart,.pushy-link{border-color:#e74c3c;background-color:#e74c3c}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #e74c3c}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}.has-error input{border-color:#dc3545}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#e74c3c;border-bottom:none}}