t1meshift
/
expressCart
mirror of https://github.com/t1meshift/expressCart.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Style/layout fixes for mobile

master
Mark Moffat 2019-12-28 16:13:20 +10:30
parent 5adcdfb5c1
commit ee5400716c
14 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app.js
View File

@ -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';

3
public/stylesheets/admin.css
View File

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

2
public/stylesheets/admin.min.css vendored
View File

@ -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}}

4
public/stylesheets/less/admin.less
View File

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

31
public/stylesheets/less/style.less
View File

@ -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;
}
}

33
public/stylesheets/style.css
View File

@ -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;
}
}

2
public/stylesheets/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
views/layouts/layout.hbs
View File

@ -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>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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 id="navbarText">
<ul class="navbar-nav ml-auto">
{{#ifCond @root.config.enableLanguages "!=" false}}
<li class="nav-item dropdown">

6
views/themes/Cloth/checkout-information.hbs
View File

@ -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">

4
views/themes/Cloth/checkout-shipping.hbs
View File

@ -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}}

5
views/themes/Cloth/front-menu.hbs
View File

@ -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}}

4
views/themes/Cloth/index.hbs
View File

@ -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}}">

15
views/themes/Cloth/style.css
View File

@ -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;
}
}

2
views/themes/Cloth/style.min.css vendored
View File

@ -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}}