Style/layout fixes for mobile
Mark Moffat
parent
5adcdfb5c1
commit
ee5400716c
8
app.js
8
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';
|
||||
|
|
|
|||
|
|
@ -20,9 +20,6 @@
|
|||
padding-top: 10px;
|
||||
height: 45px;
|
||||
}
|
||||
.searchMenuLocation-side {
|
||||
padding-right: 0;
|
||||
}
|
||||
.productsWrapper {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -25,10 +25,6 @@
|
|||
height: 45px;
|
||||
}
|
||||
|
||||
.searchMenuLocation-side {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.productsWrapper{
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -87,13 +87,12 @@
|
|||
{{else}}
|
||||
<body>
|
||||
{{/if}}
|
||||
<!-- Static navbar -->
|
||||
<nav class="navbar navbar-expand-lg mainNavBar">
|
||||
<a class="navbar-brand" href="/">CLOTH</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<a class="navbar-brand" href="/">{{@root.config.cartTitle}}</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-light bg-light navbarMenuWrapper col-sm-12">
|
||||
{{!-- <div class="col-sm-8 navbarMenu1"> --}}
|
||||
<div class="col-sm-8 offset-md-2 collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<nav id="navbarMenu" class="navbar navbar-expand-lg navbar-light bg-light navbarMenuWrapper col-sm-12 collapse navbar-collapse">
|
||||
<div class="col-sm-8 offset-md-2" 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}}
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
|
|
|
|||
|
|
@ -59,16 +59,7 @@
|
|||
background-color: #cc4135 !important;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
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{
|
||||
.navbar-brand-image {
|
||||
height: 80px;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
|
|
@ -145,8 +136,4 @@
|
|||
background-color: #E74C3C;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -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}}
|
||||
Loading…
Reference in New Issue