From 2ded224d5b4edff66f03ac2cd1a5251c3cd5efad Mon Sep 17 00:00:00 2001 From: Mark Moffat Date: Sat, 17 Feb 2018 14:30:28 +0100 Subject: [PATCH] Added a new theme called "Mono" --- README.md | 2 + app.js | 9 + views/layouts/layout.hbs | 1 + views/themes/Cloth/front-menu.hbs | 4 +- views/themes/Material/front-menu.hbs | 4 +- views/themes/Mono/cart.hbs | 92 +++++++++ views/themes/Mono/checkout.hbs | 5 + views/themes/Mono/front-menu.hbs | 24 +++ views/themes/Mono/index.hbs | 70 +++++++ views/themes/Mono/page.hbs | 8 + views/themes/Mono/pay.hbs | 66 +++++++ views/themes/Mono/payment_complete.hbs | 21 +++ views/themes/Mono/product.hbs | 87 +++++++++ views/themes/Mono/shipping-form.hbs | 27 +++ views/themes/Mono/style.css | 249 +++++++++++++++++++++++++ views/themes/Mono/style.min.css | 1 + 16 files changed, 666 insertions(+), 4 deletions(-) create mode 100644 views/themes/Mono/cart.hbs create mode 100644 views/themes/Mono/checkout.hbs create mode 100644 views/themes/Mono/front-menu.hbs create mode 100644 views/themes/Mono/index.hbs create mode 100644 views/themes/Mono/page.hbs create mode 100644 views/themes/Mono/pay.hbs create mode 100644 views/themes/Mono/payment_complete.hbs create mode 100644 views/themes/Mono/product.hbs create mode 100644 views/themes/Mono/shipping-form.hbs create mode 100644 views/themes/Mono/style.css create mode 100644 views/themes/Mono/style.min.css diff --git a/README.md b/README.md index 1301765..5c9deea 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,8 @@ Admin page Popout cart ![Popout cart](https://mrvautin.com/content/images/2018/02/popout-cart.png) +Great themes +![Great themes](https://mrvautin.com/content/images/2018/02/expresscart-mono-theme.png) ##### CSS diff --git a/app.js b/app.js index 2588a4a..e25d7bc 100644 --- a/app.js +++ b/app.js @@ -92,6 +92,15 @@ handlebars = handlebars.create({ return'col-md-6 col-xl-6 col m6 xl6 product-item'; }, + menuMatch: function(title, search){ + if(!title || !search){ + return''; + } + if(title.toLowerCase().startsWith(search.toLowerCase())){ + return'class="navActive"'; + } + return''; + }, getTheme: function(view){ return`themes/${config.theme}/${view}`; }, diff --git a/views/layouts/layout.hbs b/views/layouts/layout.hbs index 1ffda57..ffd8c44 100644 --- a/views/layouts/layout.hbs +++ b/views/layouts/layout.hbs @@ -24,6 +24,7 @@ + {{#if admin}} diff --git a/views/themes/Cloth/front-menu.hbs b/views/themes/Cloth/front-menu.hbs index b028ae1..88a99d5 100644 --- a/views/themes/Cloth/front-menu.hbs +++ b/views/themes/Cloth/front-menu.hbs @@ -6,8 +6,8 @@
  • Home
    • {{#each menu.items}}
  • + {{#menuMatch this.title @root.searchTerm}}{{/menuMatch}} + {{#menuMatch this.title @root.title}}{{/menuMatch}}> {{this.title}}
    • {{/each}} diff --git a/views/themes/Material/front-menu.hbs b/views/themes/Material/front-menu.hbs index a08c395..6c02787 100644 --- a/views/themes/Material/front-menu.hbs +++ b/views/themes/Material/front-menu.hbs @@ -5,8 +5,8 @@
  • Home
    • {{#each menu.items}}
  • + {{#menuMatch this.title @root.searchTerm}}{{/menuMatch}} + {{#menuMatch this.title @root.title}}{{/menuMatch}}> {{this.title}}
    • {{/each}} diff --git a/views/themes/Mono/cart.hbs b/views/themes/Mono/cart.hbs new file mode 100644 index 0000000..e7fa89d --- /dev/null +++ b/views/themes/Mono/cart.hbs @@ -0,0 +1,92 @@ +
    +
    + {{#if pageCloseBtn}} +
    +
    + +
    +
    + {{/if}} +
    +
    + Cart contents + {{#each session.cart}} +
    +
    + {{#if productImage}} + {{this.title}} product image {{else}} + {{this.title}} product image {{/if}} +
    +
    +

    + {{this.title}} +

    +

    +  {{#each this.options}} {{#if @last}} {{this}} {{else}} {{this}} / {{/if}} {{/each}} +

    +

    + +

    + + + +
    + +
    + + + +
    +

    +
    +
    + {{currencySymbol ../config.currencySymbol}}{{formatAmount this.totalItemPrice}} +
    +
    + {{/each}} + {{#if session.cart}} +
    +
    + {{#ifCond session.shippingCostApplied '===' true}} +
    + Shipping: + {{currencySymbol config.currencySymbol}}{{formatAmount config.flatShipping}} +
    + {{else}} +
    + Shipping: + FREE +
    + {{/ifCond}} +
    + Total: + {{currencySymbol config.currencySymbol}}{{formatAmount session.totalCartAmount}} +
    +
    +
    + {{else}} +
    +
    + Cart empty +
    +
    + {{/if}} +
    +
    +
    + {{#if session.cart}} +
    + +
    + {{#ifCond page '!=' 'pay'}} +
    + {{#ifCond page '==' 'checkout'}} + Pay now + {{else}} + Checkout + {{/ifCond}} +
    + {{/ifCond}} {{/if}} +
    +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/checkout.hbs b/views/themes/Mono/checkout.hbs new file mode 100644 index 0000000..e5ac8bf --- /dev/null +++ b/views/themes/Mono/checkout.hbs @@ -0,0 +1,5 @@ +
    +
    + {{> themes/Mono/cart}} +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/front-menu.hbs b/views/themes/Mono/front-menu.hbs new file mode 100644 index 0000000..6bdc989 --- /dev/null +++ b/views/themes/Mono/front-menu.hbs @@ -0,0 +1,24 @@ + \ No newline at end of file diff --git a/views/themes/Mono/index.hbs b/views/themes/Mono/index.hbs new file mode 100644 index 0000000..0c8d6bd --- /dev/null +++ b/views/themes/Mono/index.hbs @@ -0,0 +1,70 @@ +{{> themes/Mono/front-menu}} +
    + {{#if filtered}} +
    + {{#if menuLink}} +

    Category: {{menuLink.title}}

    + {{else}} +

    Search results: {{searchTerm}}

    + {{/if}} +
    + {{/if}} +
    + {{#ifCond results.length '==' 0}} +
    +

    No products found

    +
    + {{/ifCond}} + {{#each results}} +
    +
    + {{#if productPermalink}} +
    + +
    + {{#if productImage}} + ... + {{else}} + ... + {{/if}} +
    +

    + {{this.productTitle}} +

    +     +
    + {{else}} + +
    + {{#if productImage}} + ... + {{else}} + ... + {{/if}} +
    +

    + {{this.productTitle}} +

    +     + {{/if}} +

    + {{currencySymbol ../config.currencySymbol}}{{formatAmount productPrice}} +

    +

    + Add to cart +

    +
    +
    + {{/each}} +
    +
    + + + + + +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/page.hbs b/views/themes/Mono/page.hbs new file mode 100644 index 0000000..2db9643 --- /dev/null +++ b/views/themes/Mono/page.hbs @@ -0,0 +1,8 @@ +{{> themes/Mono/front-menu}} +
    +
    +
    + {{{page.pageContent}}} +
    +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/pay.hbs b/views/themes/Mono/pay.hbs new file mode 100644 index 0000000..ab3aed4 --- /dev/null +++ b/views/themes/Mono/pay.hbs @@ -0,0 +1,66 @@ +
    +
    + {{#if paymentMessage}} +

    {{paymentMessage}}

    + {{/if}} +
    +
    +
    +
    + Customer details + {{#unless session.customer}} +

    Existing customer

    +
    + +
    +
    + +
    +
    + Forgotten +
    +
    + +
    + {{/unless}} + {{#if session.customer}} +
    + +
    + {{/if}} +
    + {{> themes/Mono/shipping-form}} + {{#if session.customer}} + {{#ifCond config.paymentGateway '==' 'paypal'}} + {{> payments/paypal}} + {{/ifCond}} + {{/if}} + {{#unless session.customer}} +
    +

    Enter a password to create an account for next time

    +
    + +
    +
    +
    + Create account +
    + {{/unless}} +
    + {{#if session.customer}} + {{#ifCond config.paymentGateway '==' 'stripe'}} + {{> partials/payments/stripe}} + {{/ifCond}} + {{#ifCond config.paymentGateway '==' 'authorizenet'}} + {{> partials/payments/authorizenet}} + {{/ifCond}} + {{/if}} +
    +
    +
    +
    +
    + {{> themes/Mono/cart}} +
    +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/payment_complete.hbs b/views/themes/Mono/payment_complete.hbs new file mode 100644 index 0000000..6ab53e4 --- /dev/null +++ b/views/themes/Mono/payment_complete.hbs @@ -0,0 +1,21 @@ +
    +
    +
    + {{#ifCond result.orderStatus '==' 'Paid'}} +

    Your payment has been successfully processed

    + {{else}} +

    Your payment has failed. Please try again or contact us.

    + {{/ifCond}} + {{#if result}} +
    +

    Order ID: {{result._id}}

    +

    Payment ID: {{result.orderPaymentId}}

    +
    + {{/if}} + {{#ifCond result.orderStatus '==' 'Paid'}} +

    Please retain the details above as a reference of payment.

    + {{/ifCond}} + Home +
    +
    +
    \ No newline at end of file diff --git a/views/themes/Mono/product.hbs b/views/themes/Mono/product.hbs new file mode 100644 index 0000000..aa0cc6c --- /dev/null +++ b/views/themes/Mono/product.hbs @@ -0,0 +1,87 @@ +{{> themes/Mono/front-menu}} +
    +
    +
    +
    +

    {{result.productTitle}}

    +

    {{currencySymbol config.currencySymbol}}{{result.productPrice}}

    + {{#if productOptions}} +

    Options

    +
    + {{#each productOptions}} + {{#ifCond this.optType '==' "select"}} + {{this.optName}} + + {{/ifCond}} + {{#ifCond this.optType '==' "radio"}} + {{#each this.optOptions}} + {{this.optName}} +
    + +
    + {{/each}} + {{/ifCond}} + {{#ifCond this.optType '==' "checkbox"}} +
    + +
    + {{/ifCond}} + {{/each}} +
    + {{/if}} +
    +

    Quantity

    +
    + + + +
    + +
    + + + +
    +
    +
    + +
    +
    + {{{productDescription}}} +
    +
    +
    +
    + {{#if result.productImage}} +
    +
    + ... +
    +
    + {{else}} +
    + ... +
    + {{/if}} + {{#ifCond images.length '>' 1}} +
    + {{#each images}} +
    + +
    + {{/each}} +
    + {{/ifCond}} +
    +
    +
    + \ No newline at end of file diff --git a/views/themes/Mono/shipping-form.hbs b/views/themes/Mono/shipping-form.hbs new file mode 100644 index 0000000..25f9fef --- /dev/null +++ b/views/themes/Mono/shipping-form.hbs @@ -0,0 +1,27 @@ +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    \ No newline at end of file diff --git a/views/themes/Mono/style.css b/views/themes/Mono/style.css new file mode 100644 index 0000000..0e06b8b --- /dev/null +++ b/views/themes/Mono/style.css @@ -0,0 +1,249 @@ +@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"; + +a { + color: #000; +} + +.row .col { + padding: 0; +} + +fieldset { + border: none; +} + +.pagelayout-wrapper{ + padding-top: 30px; + padding-bottom: 30px; +} + +.search-bar-input, #frm_search, .search-bar-input .btn{ + padding-top: 10px; + height: 45px; +} + +#frm_search{ + color: #000; + padding-left: 10px; +} + +input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){ + border-bottom: 1px solid #000; + -webkit-box-shadow: 0 1px 0 0 #000; + box-shadow: 0 1px 0 0 #000; +} + +input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { + color: #000; +} + +.searchMenuLocation-side { + padding-right: 0; +} + +.productsWrapper{ + padding-right: 10px; + padding-left: 10px; +} + +.cart-body{ + padding: 0; +} + +.searchBarWrapper{ + padding-right: 0; + padding-left: 0; +} + +.content-body { + margin-bottom: 100px; +} + +.footer{ + padding-top: 0; +} + +.footer h4{ + padding-top: 25px; + font-size: 20px; +} + +.product-price { + padding-bottom: 0; +} + +.title-image-container { + height: auto; + margin-right: 20px; + margin-left: 20px; +} + +.thumbnail-image{ + padding: 20px; +} + +.image-next{ + right: 5px; +} + +.image-prev{ + left: 5px; +} + +.navbar{ + -webkit-box-shadow: none; +} + +.navbarMenuWrapper{ + background-color: #f5f5f5; +} + +.navbarMenu>ul>li>a:hover{ + color: #000 !important; +} + +.navbarMenu{ + padding-right: 0; + padding-left: 0; +} + +.navbarMenu ul li{ + width: 100%; + margin-bottom: 5px; +} + +.navbarMenu ul li a{ + color: #000; + font-size: 18px; +} + +.product_wrapper>a:hover{ + color: #000 !important; +} + +.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a{ + margin-bottom: 0; + height: 100px !important; +} + +#navbar>.navbar-nav>li>a{ + padding-top: 35px; +} + +#pager{ + margin-bottom: 20px; +} + +.pagination>li>a{ + color: #000; + background-color: #fff !important; +} + +.pagination>li>a:hover{ + color: #000; +} + +.pag-active a{ + color: #000 !important; +} + +.navbar-brand{ + color: #000 !important; + letter-spacing: 4px; + padding-left: 20px !important; + padding-top: 20px !important; + height: 100px !important; + font-size: 55px !important; +} + +.navbar-brand-image, .navbar-brand{ + height: 80px; + padding-left: 10px; + padding-top: 10px; +} + +.navbar-default .badge { + background-color: #000; +} + +#btn_search{ + margin-top: 15px; +} + +.pushy-link, #empty-cart{ + border-color: #000; + background-color: #000; +} + +.pushy-link:hover, .pushy-link:focus, .pushy-link:active, .pushy-link:active:hover, +#empty-cart:hover, #empty-cart:focus, #empty-cart:active, #empty-cart:active:hover{ + border-color: #000; + background-color: #000; +} + +.navActive>a{ + color: #000; + margin-bottom: 0px; + border-left: 5px solid #000; +} + +.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a { + background-color: #fff; +} + +.navbar-default .navbar-nav>li>a { + color: #838b8f; + font-size: 20px; +} + +.body_text{ + padding-top: 30px !important; +} + +.product-option-text { + padding-top: 15px; + padding-bottom: 0; +} + +@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: 0px; + padding-right: 0px; + } + + .navbarMenuOuter{ + padding-left: 0; + padding-right: 0; + } + + .navActive>a { + color: #fff !important; + } + + .navbarMenu { + padding-right: 7.5px; + padding-left: 7.5px; + } + + .navActive>a{ + color: white !important; + background-color: #000; + border-bottom: none; + } + + .footer { + padding-top: 10px; + } +} \ No newline at end of file diff --git a/views/themes/Mono/style.min.css b/views/themes/Mono/style.min.css new file mode 100644 index 0000000..44343e5 --- /dev/null +++ b/views/themes/Mono/style.min.css @@ -0,0 +1 @@ +@import url(https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css);a{color:#000}.row .col{padding:0}fieldset{border:none}.pagelayout-wrapper{padding-top:30px;padding-bottom:30px}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}#frm_search{color:#000;padding-left:10px}input:not([type]):focus:not([readonly]),input[type=date]:not(.browser-default):focus:not([readonly]),input[type=datetime-local]:not(.browser-default):focus:not([readonly]),input[type=datetime]:not(.browser-default):focus:not([readonly]),input[type=email]:not(.browser-default):focus:not([readonly]),input[type=number]:not(.browser-default):focus:not([readonly]),input[type=password]:not(.browser-default):focus:not([readonly]),input[type=search]:not(.browser-default):focus:not([readonly]),input[type=tel]:not(.browser-default):focus:not([readonly]),input[type=text]:not(.browser-default):focus:not([readonly]),input[type=time]:not(.browser-default):focus:not([readonly]),input[type=url]:not(.browser-default):focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]){border-bottom:1px solid #000;-webkit-box-shadow:0 1px 0 0 #000;box-shadow:0 1px 0 0 #000}input:not([type]):focus:not([readonly])+label,input[type=date]:not(.browser-default):focus:not([readonly])+label,input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,input[type=datetime]:not(.browser-default):focus:not([readonly])+label,input[type=email]:not(.browser-default):focus:not([readonly])+label,input[type=number]:not(.browser-default):focus:not([readonly])+label,input[type=password]:not(.browser-default):focus:not([readonly])+label,input[type=search]:not(.browser-default):focus:not([readonly])+label,input[type=tel]:not(.browser-default):focus:not([readonly])+label,input[type=text]:not(.browser-default):focus:not([readonly])+label,input[type=time]:not(.browser-default):focus:not([readonly])+label,input[type=url]:not(.browser-default):focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label{color:#000}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.cart-body{padding:0}.searchBarWrapper{padding-right:0;padding-left:0}.content-body{margin-bottom:100px}.footer{padding-top:0}.footer h4{padding-top:25px;font-size:20px}.product-price{padding-bottom:0}.title-image-container{height:auto;margin-right:20px;margin-left:20px}.thumbnail-image{padding:20px}.image-next{right:5px}.image-prev{left:5px}.navbar{-webkit-box-shadow:none}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#000!important}.navbarMenu{padding-right:0;padding-left:0}.navbarMenu ul li{width:100%;margin-bottom:5px}.navbarMenu ul li a{color:#000;font-size:18px}.product_wrapper>a:hover{color:#000!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}#pager{margin-bottom:20px}.pagination>li>a{color:#000;background-color:#fff!important}.pagination>li>a:hover{color:#000}.pag-active a{color:#000!important}.navbar-brand{color:#000!important;letter-spacing:4px;padding-left:20px!important;padding-top:20px!important;height:100px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#000}#btn_search{margin-top:15px}#empty-cart,.pushy-link{border-color:#000;background-color:#000}#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:#000;background-color:#000}.navActive>a{color:#000;margin-bottom:0;border-left:5px solid #000}#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}.body_text{padding-top:30px!important}.product-option-text{padding-top:15px;padding-bottom:0}@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:#000;border-bottom:none}.footer{padding-top:10px}} \ No newline at end of file