Merge branch 'dev' of git.treelet.net:crane/retailer-vue into beta
This commit is contained in:
rakesh
commit
fee2391422
|
|
@ -1 +1 @@
|
|||
{"branch_name":"beta","last_commit_date":"2022-01-19T13:22:40.000Z","last_commit_author":"rakesh","last_commit_hash":"08860a919b3eb1d3fa8d0232e03853b7a2d4f2a8"}
|
||||
{"branch_name":"beta","last_commit_date":"2022-01-19T13:27:47.000Z","last_commit_author":"rakesh","last_commit_hash":"fdf968604d43560620597491e03aedf8c63bc17e"}
|
||||
|
|
@ -258,6 +258,7 @@
|
|||
</HeroContainer>
|
||||
<div></div>
|
||||
<router-view />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-flex flex-column height-100">
|
||||
<v-navigation-drawer
|
||||
v-model="showMenu"
|
||||
v-if="showMenu"
|
||||
|
|
@ -47,12 +47,16 @@
|
|||
<v-content>
|
||||
<router-view class="pa-4" />
|
||||
</v-content>
|
||||
<FooterComponent />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Header from "@/components/retailer/layout/header/Header";
|
||||
import FooterComponent from "@/components/retailer/layout/footer/FooterComponent"
|
||||
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
|
||||
const { mapFields } = createHelpers({
|
||||
|
|
@ -64,7 +68,8 @@ export default {
|
|||
name: "Layout",
|
||||
|
||||
components: {
|
||||
Header
|
||||
Header,
|
||||
FooterComponent
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,57 +1,10 @@
|
|||
.footer-component-border {
|
||||
background: #FFFFFF!important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.10)!important;
|
||||
.footer-background-color{
|
||||
background-color: #fbfbf5 !important;
|
||||
border-top: 4px solid #91abc3;
|
||||
border-bottom: 4px solid #91abc3;
|
||||
}
|
||||
.text-decoration-none:hover{
|
||||
color: #2850da;
|
||||
|
||||
.footer-fontcolor-black-darken {
|
||||
color: #1D1D1D!important;
|
||||
}
|
||||
|
||||
.footer-component-lighten-5 {
|
||||
color: #dcdddd !important;
|
||||
}
|
||||
|
||||
a.footer-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.footer-fontcolor-black-darken {
|
||||
color: rgba(0, 0, 0, 0.50) !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************* Override the Vuetify classes values ***** */
|
||||
|
||||
.footerpage_page_footer.v-footer {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.footerpage_email_textbox .v-input__slot {
|
||||
border: 1px solid rgba(0, 0, 0, 0.10) !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
.footerpage_submit_email_btn.v-btn {
|
||||
border-top-left-radius: 0px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
}
|
||||
|
||||
.footerpage_min_height {
|
||||
min-height: 1.5625rem !important;
|
||||
}
|
||||
|
||||
.footerpage_word_break.v-list-item__title {
|
||||
white-space: unset !important; //for word break
|
||||
}
|
||||
|
||||
.footer-list_subheader {
|
||||
height: 1.875rem !important;
|
||||
padding: 0 0.5rem !important;
|
||||
}
|
||||
|
||||
.footerpage_email_textbox.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
|
||||
min-height: 0.625rem !important;
|
||||
height: 2.3125rem !important;
|
||||
}
|
||||
//
|
||||
|
|
@ -1,152 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-footer class="py-sm-0 px-sm-0 pb-0 px-0 page-footer footer-component-border">
|
||||
<v-row
|
||||
align="center"
|
||||
justify="center"
|
||||
class="d-flex flex-column-reverse flex-sm-row pa-0 ma-0"
|
||||
>
|
||||
|
||||
<v-footer class="py-sm-0 px-sm-0 pb-0 px-0 my-4" >
|
||||
<v-row>
|
||||
<v-col
|
||||
class="primary pb-md-3 px-sm-10 px-md-6 pt-md-12 pt-sm-4 pt-6 pl-lg-12 pr-lg-12"
|
||||
class="footer-background-color "
|
||||
cols="12"
|
||||
md="8"
|
||||
sm="8"
|
||||
lg="8"
|
||||
xl="9"
|
||||
>
|
||||
<v-container class="pb-0 mb-0">
|
||||
<v-row class>
|
||||
<v-col cols="12" lg="3" md="3" sm="6">
|
||||
<v-list class="transparent-background py-1" flat>
|
||||
<v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">ACCOUNT</v-subheader>
|
||||
<v-list-item-group>
|
||||
<v-list-item
|
||||
class="px-2 footerpage_min_height"
|
||||
href="#"
|
||||
v-for="(acc,index) in accountLinks"
|
||||
:key="index"
|
||||
>
|
||||
<v-list-item-title class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1">{{acc}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="3" md="3" sm="6">
|
||||
<v-list class="transparent-background py-1" flat>
|
||||
<v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">COMPANY</v-subheader>
|
||||
<v-list-item-group>
|
||||
<v-list-item
|
||||
class="px-2 footerpage_min_height"
|
||||
href="#"
|
||||
v-for="(company,index) in companyLinks"
|
||||
:key="index"
|
||||
>
|
||||
<v-list-item-title
|
||||
class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
|
||||
>{{company}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="3" md="3" sm="6">
|
||||
<v-list class="transparent-background py_1" flat>
|
||||
<v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">HELP</v-subheader>
|
||||
<v-list-item-group>
|
||||
<v-list-item
|
||||
class="px-2 footerpage_min_height"
|
||||
href="#"
|
||||
v-for="(help,index) in helpLinks"
|
||||
:key="index"
|
||||
>
|
||||
<v-list-item-title
|
||||
class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
|
||||
>{{help}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="3" md="3" sm="6">
|
||||
<v-list class="transparent-background py-1" flat>
|
||||
<v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">CONNECT</v-subheader>
|
||||
<v-list-item-group>
|
||||
<v-list-item
|
||||
class="px-2 footerpage_min_height"
|
||||
href="#"
|
||||
v-for="(connect,index) in connectLinks"
|
||||
:key="index"
|
||||
>
|
||||
<v-list-item-title
|
||||
class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
|
||||
>{{connect}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row class="d-flex flex-column-reverse flex-sm-row mt-md-5 mt-sm-5 pa-0 ma-0">
|
||||
<v-col
|
||||
md="auto"
|
||||
md="12"
|
||||
sm="12"
|
||||
lg="auto"
|
||||
class="white--text pr-sm-0 pl-md-4 pb-sm-1 pt-1 pt-sm-1 pt-md-3 mr-md-3 mr-lg-4"
|
||||
lg="12"
|
||||
xl="12"
|
||||
|
||||
>
|
||||
<div v-html="copyrightString" class="d-inline-block caption"></div>
|
||||
</v-col>
|
||||
<v-col
|
||||
md="auto"
|
||||
sm="12"
|
||||
lg="auto"
|
||||
class="white--text pl-md-0 ml-sm-0 ml-md-0 pt-sm-1 pr-sm-1 pt-md-3 pb-1"
|
||||
>
|
||||
<div v-html="termsCondString" class="d-inline-block caption text-decoration-none"></div>
|
||||
<div v-html="privacyPolicyString" class="d-inline-block caption text-decoration-none"></div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-container class="text-center">
|
||||
<div class="pt-2" v-html="customerService"></div>
|
||||
<div class="pt-2" v-html="stayInTouch"></div>
|
||||
<div class="pt-2" v-html="copyrightString"></div>
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-col md="4" sm="4" lg="4" xl="3" class="d-sm-flex white">
|
||||
<v-img
|
||||
:src="require('@/assets/Whiplash Panel@2x.png')"
|
||||
></v-img>
|
||||
<!-- <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
|
||||
<div class="pa-md-1">
|
||||
<v-col md="12" sm="12" xl="12" lg="12">
|
||||
<span
|
||||
class="primary--text h3 font-weight-regular text-uppercase"
|
||||
>{{stayInTouch}}</span>
|
||||
<p
|
||||
class="footer-fontcolor-black-darken body mb-0 pt-4 mt-md-4 mt-sm-4 pt-sm-0"
|
||||
>Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
|
||||
</v-col>
|
||||
<v-col md="12" sm="12" xl="12" lg="12" class="pb-0 pt-2 pt-sm-3">
|
||||
<v-row no-gutters>
|
||||
<v-col md="12" sm="12" xl="12" lg="12">
|
||||
<v-text-field
|
||||
label="Your Email"
|
||||
id="emailTextBox"
|
||||
class="footerpage_email_textbox fontsize-14 regular-font"
|
||||
single-line
|
||||
solo
|
||||
flat
|
||||
tile
|
||||
>
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body"
|
||||
slot="append"
|
||||
>SUBMIT</v-btn>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</div>
|
||||
</v-row> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-footer>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -154,32 +27,14 @@ export default {
|
|||
name: "FooterComponent",
|
||||
data() {
|
||||
return {
|
||||
listSubHeaderColor: "red",
|
||||
accountLinks: ["My Account", "Shipping & Delivery", "Order Status"],
|
||||
companyLinks: [
|
||||
"About Crane",
|
||||
"In the Workshop",
|
||||
"Post Script Blog",
|
||||
"Etiquette",
|
||||
"Careers"
|
||||
],
|
||||
helpLinks: ["Retail Locator", "Crane Concierge", "Returns", "FAQs"],
|
||||
connectLinks: [
|
||||
"Facebook",
|
||||
"Instagram",
|
||||
"Pininterest",
|
||||
"",
|
||||
"1.800.268.2281",
|
||||
"customerservice@crane.com"
|
||||
],
|
||||
copyrightString: "© 2019 Crane stationary LLC",
|
||||
stayInTouch: "LET'S STAY IN TOUCH",
|
||||
termsCondString:
|
||||
"<a href='#' class='white--text footer-link'> Terms & Conditions </a>",
|
||||
privacyPolicyString:
|
||||
"  <a href='#' class='white--text footer-link'> Privacy & Policy </a>"
|
||||
customerService:
|
||||
"<div class='fontsize-16 title-color-black whyte-book-font' >Retail Customer Service <a href='tel:1-877-478-4849' class=' fontsize-16 text-decoration-none title-color-black whyte-book-font'> 1-877-478-4849 </a></div>",
|
||||
stayInTouch:
|
||||
" <a href='mailto:retailerportal@crane.com' class=' fontsize-16 text-decoration-none title-color-black whyte-book-font'> FEEDBACK OR QUESTIONS? </a> ",
|
||||
copyrightString: "<div class='fontsize-16 title-color-black whyte-book-font' >© 2021 Crane Stationery</div>",
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style src="./FooterComponent.scss" lang="scss"/>
|
||||
<style src="./FooterComponent.scss" lang="scss" />
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
outline: none !important;
|
||||
}
|
||||
.meheader-category-text{
|
||||
color:#ffffff;
|
||||
color:#111;
|
||||
}
|
||||
.meheader-category-text:hover{
|
||||
color: #CCB7FF !important;
|
||||
color: #2850da;
|
||||
}
|
||||
.memodule-header-autocomplete.v-select.v-select--is-menu-active
|
||||
.v-input__icon--append
|
||||
|
|
@ -104,3 +104,7 @@ margin-bottom: 0px !important;
|
|||
.me-header-search-field .theme--dark.v-label {
|
||||
color:#1d1d1d;
|
||||
}
|
||||
.v-menu__content,.v-list{
|
||||
border-radius: 0px !important;
|
||||
top: 64px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
contain
|
||||
></v-img>
|
||||
</v-col>
|
||||
|
||||
<v-col class="d-flex justify-center">
|
||||
<v-img
|
||||
class="ml-md-2 cursor-pointer d-md-none d-lg-none"
|
||||
|
|
@ -76,10 +77,46 @@
|
|||
</v-toolbar-items>
|
||||
</div> -->
|
||||
</v-col>
|
||||
|
||||
<v-col class="d-flex justify-end pr-0">
|
||||
<!--<v-btn icon @click="goToShopping()">
|
||||
<!-- <v-btn icon @click="goToShopping()">
|
||||
<v-icon>mdi-shopping-outline</v-icon>
|
||||
</v-btn>-->
|
||||
</v-btn> -->
|
||||
<div class="mt-3 mr-5 d-none d-md-block">
|
||||
<v-menu offset-y v-if="userAuth">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<div color="primary" >
|
||||
<span v-bind="attrs" v-on="on" class="text-uppercase cursor-pointer" > Welcome,</span>
|
||||
<span class="text-uppercase cursor-pointer pl-2">{{ userName}}</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<v-list class="pr-10 d-none d-md-block">
|
||||
<v-list-item class="pr-10">
|
||||
<v-list-item-title
|
||||
@click="goTohomePage()"
|
||||
class="cursor-pointer meheader-category-text"
|
||||
>Retailer Portal</v-list-item-title
|
||||
>
|
||||
</v-list-item>
|
||||
<v-list-item >
|
||||
<v-list-item-title
|
||||
@click="goToAddressBook()"
|
||||
class="cursor-pointer meheader-category-text"
|
||||
>Address Book</v-list-item-title
|
||||
>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title
|
||||
@click="goToLogout()"
|
||||
class="cursor-pointer meheader-category-text"
|
||||
>Logout</v-list-item-title
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
class="header-buttons"
|
||||
|
|
@ -129,7 +166,6 @@
|
|||
:width="searchInputWidth"
|
||||
height="64"
|
||||
>
|
||||
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
autofocus
|
||||
|
|
@ -150,6 +186,7 @@
|
|||
</template>
|
||||
</v-text-field>
|
||||
</v-navigation-drawer>
|
||||
|
||||
</v-col>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
|
@ -163,6 +200,7 @@ import {
|
|||
getCategoryOne,
|
||||
} from "@/services/util.service";
|
||||
import humps from "lodash-humps";
|
||||
|
||||
export default {
|
||||
name: "Header",
|
||||
// components: { SubMenu },
|
||||
|
|
@ -201,6 +239,9 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
userName:function(){
|
||||
return this.$store.state.accountOne.one.firstname;
|
||||
},
|
||||
userAuth: function () {
|
||||
return this.$store.state.auth.userAuth;
|
||||
},
|
||||
|
|
@ -245,6 +286,11 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
goToAddressBook(){
|
||||
return this.$router.push({ name : "AddressBook"})
|
||||
},
|
||||
|
||||
pageName() {
|
||||
return this.$route.name;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -54,7 +54,11 @@
|
|||
<v-hover v-slot:default="{ hover }">
|
||||
<router-link
|
||||
class="text-decoration-none whyteTmin10-font"
|
||||
:to="{ name: '' }"
|
||||
|
||||
to
|
||||
@click.native="goToLink('http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.pdf')"
|
||||
target="_blank"
|
||||
:class="hover ? 'primary--text':'black--text'"
|
||||
>
|
||||
<div
|
||||
:class="hover ? 'primary--text' : 'black--text'"
|
||||
|
|
@ -102,6 +106,14 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "BoxedProductsOrdering",
|
||||
methods:{
|
||||
goToLink(pageLink) {
|
||||
// window.location.replace(pageLink);
|
||||
//} else {
|
||||
window.open(pageLink, "_blank");
|
||||
//}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue