diff --git a/src/components/gate/SignInComponent.vue b/src/components/gate/SignInComponent.vue
index 5bbec9e..effa62c 100644
--- a/src/components/gate/SignInComponent.vue
+++ b/src/components/gate/SignInComponent.vue
@@ -47,7 +47,7 @@
<router-link class="text-decoration-none" :to="{name:'SignUpPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign Up</router-link>
</v-hover>
</v-col>-->
- <v-col cols="12" class="pt-0 mt-n1">
+ <v-col cols="12" >
Forgot your password?
<v-hover v-slot:default="{ hover }">
<router-link class="text-decoration-none" :to="{name:'forgot-password'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Forgot Password</router-link>
diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
index 3d77af4..8ce7555 100644
--- a/src/components/layout/Layout.vue
+++ b/src/components/layout/Layout.vue
@@ -258,6 +258,7 @@
</HeroContainer>
<div></div>
<router-view />
+
</div>
</template>
diff --git a/src/components/retailer/layout/Layout.vue b/src/components/retailer/layout/Layout.vue
index d167c62..4bcee4e 100644
--- a/src/components/retailer/layout/Layout.vue
+++ b/src/components/retailer/layout/Layout.vue
@@ -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: {
diff --git a/src/components/retailer/layout/footer/FooterComponent.scss b/src/components/retailer/layout/footer/FooterComponent.scss
index b86cf5a..4bcbd6c 100644
--- a/src/components/retailer/layout/footer/FooterComponent.scss
+++ b/src/components/retailer/layout/footer/FooterComponent.scss
@@ -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;
-}
\ No newline at end of file
+//
\ No newline at end of file
diff --git a/src/components/retailer/layout/footer/FooterComponent.vue b/src/components/retailer/layout/footer/FooterComponent.vue
index e75cdbd..ea18db7 100644
--- a/src/components/retailer/layout/footer/FooterComponent.vue
+++ b/src/components/retailer/layout/footer/FooterComponent.vue
@@ -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"
+ md="12"
+ sm="12"
+ lg="12"
+ xl="12"
+
>
- <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 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-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"
- 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"
- >
- <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>
- </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" />
+
diff --git a/src/components/retailer/layout/header/Header.scss b/src/components/retailer/layout/header/Header.scss
index 4fd4f34..5bf6e48 100644
--- a/src/components/retailer/layout/header/Header.scss
+++ b/src/components/retailer/layout/header/Header.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
@@ -103,4 +103,8 @@ margin-bottom: 0px !important;
}
.me-header-search-field .theme--dark.v-label {
color:#1d1d1d;
-}
\ No newline at end of file
+}
+.v-menu__content,.v-list{
+ border-radius: 0px !important;
+ top: 64px !important;
+}
diff --git a/src/components/retailer/layout/header/Header.vue b/src/components/retailer/layout/header/Header.vue
index 48a1295..b672553 100644
--- a/src/components/retailer/layout/header/Header.vue
+++ b/src/components/retailer/layout/header/Header.vue
@@ -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;
},
diff --git a/src/routes/retailer/boxed-products-ordering.vue b/src/routes/retailer/boxed-products-ordering.vue
index f1144ce..aec8d99 100644
--- a/src/routes/retailer/boxed-products-ordering.vue
+++ b/src/routes/retailer/boxed-products-ordering.vue
@@ -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>