Mixing
Vuetify - Hide Navigation drawer during transition
0
I have a v-navigation-drawer on a couple pages in my web app. I also am using 'animate.css' to transition between views. When I transition between views the navigation drawer is shown even if its not been selected.
Here is a 15 second video showing what happens.
Any ideas on how I could hide the drawer from showing during transition?
Here is my code.. This is one of the views with my drawer.. I've included the navigation drawer as a component and called it side_drawer
<template>
<v-container fill-height>
<v-layout row wrap>
<v-flex xs10 class="mx-auto">
<v-layout row wrap align-right>
<v-flex xs12>
<side_drawer></side_drawer>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-card class="pa-4" id="devIds">
<v-card-title>
<v-icon class="my_dark_purple_text">help_outline</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2">SETUP INSTRUCTIONS</h1>
</v-card-title>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">How do I know my orders are getting to Amazon?</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Once the order has been paid, the order status will
transition to "Open". This should take less than 1 minute. At this point you will be able to see your order on Amazon.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list three-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">The next order status is "Fulfilled". This is when Amazon has shipped your item, provided a tracking number, and we've notified your customer that their order has shipped. Your
order will transition to "Fulfilled" typically in 1 - 5 business days depending on the shipping rate that was selected.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">
Amazon will only accept orders that use the shipping rates you set up here in FBA Shipping.
</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you only sell FBA products, delete any other shipping rates you have set up in Shopify.</div>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you sell FBA products AND non-FBA products, you'll need to set up weight based shipping rates. Please see the setup video here:
<a href="https://youtu.be/L4HOTJm5hQQ" target="_blank" class="my_dark_purple_text" >Weight Based Workaround Video</a>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Make sure your Shopify SKU matches your Amazon SKU</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Ensure your Shopify product SKUs match the SKUs on Amazon (not ASIN or UPC).</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">"Inventory Managed by" should be set to FBA Shipping</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">On your product page make sure to set "Inventory Managed by" to FBA Shipping. You can do this one product at a time
or for all your products at once using Shopify's built-in bulk editor.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Automatic or manual fulfillment your choice</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">You can set orders to be automatically fulfilled in your Shopify checkout settings. If you don't set that up, you'll need to request fulfillment on each order.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">If this setup takes more than 5 minutes please call!</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Total time to setup should be 5 minutes or less, if you're struggling with these instructions please give us a call at 704.489.3578.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import side_drawer from '../components/side_drawer.vue';
import {dataShare} from '../packs/application.js';
export default {
components: {
side_drawer
},
data: function() {
return {
drawer: false
};
}
};
</script>
<style>
.purple_header {
background-color: #E1BEE7 !important;
}
</style>
And then this is the navigation-drawer itself.
<template>
<div>
<v-btn
dark
fab
medium
color="green lighten-1"
class="push_right"
@click="drawer = !drawer">
<v-icon>settings</v-icon>
</v-btn>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
hide-overlay
right>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="title mont">Settings & Help</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list dense>
<v-list-tile @click="sendToCreds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Amazon Credentials</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToSpeeds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Shipping Speeds</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">local_shipping</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToInstructions">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Instructions</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">info</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToFAQ">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">F.A.Q.</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">help</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToSetupVideos">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Setup Videos</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">ondemand_video</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
drawer: false,
};
},
methods: {
goToSetupVideos() {
window.open('https://youtu.be/ehjrrJLG_xs',
'_blank');
},
goToFAQ() {
window.open('http://bytestand.com/fba-shipping-faq/',
'_blank');
},
sendToCreds() {
dataShare.$emit('whereToGo', 'amazon_credentials');
},
sendToSpeeds() {
dataShare.$emit('whereToGo', 'speeds');
},
sendToInstructions() {
dataShare.$emit('whereToGo', 'instructions');
}
}
};
</script>
vue.js vuetify.js
asked Jan 1 at 16:57
ToddTToddT
7621828
add a comment |
0
I have a v-navigation-drawer on a couple pages in my web app. I also am using 'animate.css' to transition between views. When I transition between views the navigation drawer is shown even if its not been selected.
Here is a 15 second video showing what happens.
Any ideas on how I could hide the drawer from showing during transition?
Here is my code.. This is one of the views with my drawer.. I've included the navigation drawer as a component and called it side_drawer
<template>
<v-container fill-height>
<v-layout row wrap>
<v-flex xs10 class="mx-auto">
<v-layout row wrap align-right>
<v-flex xs12>
<side_drawer></side_drawer>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-card class="pa-4" id="devIds">
<v-card-title>
<v-icon class="my_dark_purple_text">help_outline</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2">SETUP INSTRUCTIONS</h1>
</v-card-title>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">How do I know my orders are getting to Amazon?</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Once the order has been paid, the order status will
transition to "Open". This should take less than 1 minute. At this point you will be able to see your order on Amazon.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list three-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">The next order status is "Fulfilled". This is when Amazon has shipped your item, provided a tracking number, and we've notified your customer that their order has shipped. Your
order will transition to "Fulfilled" typically in 1 - 5 business days depending on the shipping rate that was selected.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">
Amazon will only accept orders that use the shipping rates you set up here in FBA Shipping.
</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you only sell FBA products, delete any other shipping rates you have set up in Shopify.</div>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you sell FBA products AND non-FBA products, you'll need to set up weight based shipping rates. Please see the setup video here:
<a href="https://youtu.be/L4HOTJm5hQQ" target="_blank" class="my_dark_purple_text" >Weight Based Workaround Video</a>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Make sure your Shopify SKU matches your Amazon SKU</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Ensure your Shopify product SKUs match the SKUs on Amazon (not ASIN or UPC).</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">"Inventory Managed by" should be set to FBA Shipping</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">On your product page make sure to set "Inventory Managed by" to FBA Shipping. You can do this one product at a time
or for all your products at once using Shopify's built-in bulk editor.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Automatic or manual fulfillment your choice</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">You can set orders to be automatically fulfilled in your Shopify checkout settings. If you don't set that up, you'll need to request fulfillment on each order.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">If this setup takes more than 5 minutes please call!</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Total time to setup should be 5 minutes or less, if you're struggling with these instructions please give us a call at 704.489.3578.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import side_drawer from '../components/side_drawer.vue';
import {dataShare} from '../packs/application.js';
export default {
components: {
side_drawer
},
data: function() {
return {
drawer: false
};
}
};
</script>
<style>
.purple_header {
background-color: #E1BEE7 !important;
}
</style>
And then this is the navigation-drawer itself.
<template>
<div>
<v-btn
dark
fab
medium
color="green lighten-1"
class="push_right"
@click="drawer = !drawer">
<v-icon>settings</v-icon>
</v-btn>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
hide-overlay
right>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="title mont">Settings & Help</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list dense>
<v-list-tile @click="sendToCreds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Amazon Credentials</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToSpeeds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Shipping Speeds</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">local_shipping</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToInstructions">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Instructions</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">info</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToFAQ">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">F.A.Q.</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">help</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToSetupVideos">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Setup Videos</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">ondemand_video</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
drawer: false,
};
},
methods: {
goToSetupVideos() {
window.open('https://youtu.be/ehjrrJLG_xs',
'_blank');
},
goToFAQ() {
window.open('http://bytestand.com/fba-shipping-faq/',
'_blank');
},
sendToCreds() {
dataShare.$emit('whereToGo', 'amazon_credentials');
},
sendToSpeeds() {
dataShare.$emit('whereToGo', 'speeds');
},
sendToInstructions() {
dataShare.$emit('whereToGo', 'instructions');
}
}
};
</script>
vue.js vuetify.js
asked Jan 1 at 16:57
ToddTToddT
7621828
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04
add a comment |
0
0
0
I have a v-navigation-drawer on a couple pages in my web app. I also am using 'animate.css' to transition between views. When I transition between views the navigation drawer is shown even if its not been selected.
Here is a 15 second video showing what happens.
Any ideas on how I could hide the drawer from showing during transition?
Here is my code.. This is one of the views with my drawer.. I've included the navigation drawer as a component and called it side_drawer
<template>
<v-container fill-height>
<v-layout row wrap>
<v-flex xs10 class="mx-auto">
<v-layout row wrap align-right>
<v-flex xs12>
<side_drawer></side_drawer>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-card class="pa-4" id="devIds">
<v-card-title>
<v-icon class="my_dark_purple_text">help_outline</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2">SETUP INSTRUCTIONS</h1>
</v-card-title>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">How do I know my orders are getting to Amazon?</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Once the order has been paid, the order status will
transition to "Open". This should take less than 1 minute. At this point you will be able to see your order on Amazon.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list three-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">The next order status is "Fulfilled". This is when Amazon has shipped your item, provided a tracking number, and we've notified your customer that their order has shipped. Your
order will transition to "Fulfilled" typically in 1 - 5 business days depending on the shipping rate that was selected.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">
Amazon will only accept orders that use the shipping rates you set up here in FBA Shipping.
</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you only sell FBA products, delete any other shipping rates you have set up in Shopify.</div>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you sell FBA products AND non-FBA products, you'll need to set up weight based shipping rates. Please see the setup video here:
<a href="https://youtu.be/L4HOTJm5hQQ" target="_blank" class="my_dark_purple_text" >Weight Based Workaround Video</a>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Make sure your Shopify SKU matches your Amazon SKU</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Ensure your Shopify product SKUs match the SKUs on Amazon (not ASIN or UPC).</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">"Inventory Managed by" should be set to FBA Shipping</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">On your product page make sure to set "Inventory Managed by" to FBA Shipping. You can do this one product at a time
or for all your products at once using Shopify's built-in bulk editor.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Automatic or manual fulfillment your choice</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">You can set orders to be automatically fulfilled in your Shopify checkout settings. If you don't set that up, you'll need to request fulfillment on each order.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">If this setup takes more than 5 minutes please call!</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Total time to setup should be 5 minutes or less, if you're struggling with these instructions please give us a call at 704.489.3578.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import side_drawer from '../components/side_drawer.vue';
import {dataShare} from '../packs/application.js';
export default {
components: {
side_drawer
},
data: function() {
return {
drawer: false
};
}
};
</script>
<style>
.purple_header {
background-color: #E1BEE7 !important;
}
</style>
And then this is the navigation-drawer itself.
<template>
<div>
<v-btn
dark
fab
medium
color="green lighten-1"
class="push_right"
@click="drawer = !drawer">
<v-icon>settings</v-icon>
</v-btn>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
hide-overlay
right>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="title mont">Settings & Help</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list dense>
<v-list-tile @click="sendToCreds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Amazon Credentials</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToSpeeds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Shipping Speeds</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">local_shipping</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToInstructions">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Instructions</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">info</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToFAQ">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">F.A.Q.</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">help</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToSetupVideos">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Setup Videos</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">ondemand_video</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
drawer: false,
};
},
methods: {
goToSetupVideos() {
window.open('https://youtu.be/ehjrrJLG_xs',
'_blank');
},
goToFAQ() {
window.open('http://bytestand.com/fba-shipping-faq/',
'_blank');
},
sendToCreds() {
dataShare.$emit('whereToGo', 'amazon_credentials');
},
sendToSpeeds() {
dataShare.$emit('whereToGo', 'speeds');
},
sendToInstructions() {
dataShare.$emit('whereToGo', 'instructions');
}
}
};
</script>
vue.js vuetify.js
asked Jan 1 at 16:57
ToddTToddT
7621828
I have a v-navigation-drawer on a couple pages in my web app. I also am using 'animate.css' to transition between views. When I transition between views the navigation drawer is shown even if its not been selected.
Here is a 15 second video showing what happens.
Any ideas on how I could hide the drawer from showing during transition?
Here is my code.. This is one of the views with my drawer.. I've included the navigation drawer as a component and called it side_drawer
<template>
<v-container fill-height>
<v-layout row wrap>
<v-flex xs10 class="mx-auto">
<v-layout row wrap align-right>
<v-flex xs12>
<side_drawer></side_drawer>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-card class="pa-4" id="devIds">
<v-card-title>
<v-icon class="my_dark_purple_text">help_outline</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2">SETUP INSTRUCTIONS</h1>
</v-card-title>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">How do I know my orders are getting to Amazon?</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Once the order has been paid, the order status will
transition to "Open". This should take less than 1 minute. At this point you will be able to see your order on Amazon.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list three-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">The next order status is "Fulfilled". This is when Amazon has shipped your item, provided a tracking number, and we've notified your customer that their order has shipped. Your
order will transition to "Fulfilled" typically in 1 - 5 business days depending on the shipping rate that was selected.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">
Amazon will only accept orders that use the shipping rates you set up here in FBA Shipping.
</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you only sell FBA products, delete any other shipping rates you have set up in Shopify.</div>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you sell FBA products AND non-FBA products, you'll need to set up weight based shipping rates. Please see the setup video here:
<a href="https://youtu.be/L4HOTJm5hQQ" target="_blank" class="my_dark_purple_text" >Weight Based Workaround Video</a>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Make sure your Shopify SKU matches your Amazon SKU</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Ensure your Shopify product SKUs match the SKUs on Amazon (not ASIN or UPC).</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">"Inventory Managed by" should be set to FBA Shipping</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">On your product page make sure to set "Inventory Managed by" to FBA Shipping. You can do this one product at a time
or for all your products at once using Shopify's built-in bulk editor.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Automatic or manual fulfillment your choice</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">You can set orders to be automatically fulfilled in your Shopify checkout settings. If you don't set that up, you'll need to request fulfillment on each order.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">If this setup takes more than 5 minutes please call!</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Total time to setup should be 5 minutes or less, if you're struggling with these instructions please give us a call at 704.489.3578.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import side_drawer from '../components/side_drawer.vue';
import {dataShare} from '../packs/application.js';
export default {
components: {
side_drawer
},
data: function() {
return {
drawer: false
};
}
};
</script>
<style>
.purple_header {
background-color: #E1BEE7 !important;
}
</style>
And then this is the navigation-drawer itself.
<template>
<div>
<v-btn
dark
fab
medium
color="green lighten-1"
class="push_right"
@click="drawer = !drawer">
<v-icon>settings</v-icon>
</v-btn>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
hide-overlay
right>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="title mont">Settings & Help</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list dense>
<v-list-tile @click="sendToCreds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Amazon Credentials</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToSpeeds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Shipping Speeds</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">local_shipping</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToInstructions">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Instructions</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">info</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToFAQ">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">F.A.Q.</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">help</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToSetupVideos">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Setup Videos</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">ondemand_video</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
drawer: false,
};
},
methods: {
goToSetupVideos() {
window.open('https://youtu.be/ehjrrJLG_xs',
'_blank');
},
goToFAQ() {
window.open('http://bytestand.com/fba-shipping-faq/',
'_blank');
},
sendToCreds() {
dataShare.$emit('whereToGo', 'amazon_credentials');
},
sendToSpeeds() {
dataShare.$emit('whereToGo', 'speeds');
},
sendToInstructions() {
dataShare.$emit('whereToGo', 'instructions');
}
}
};
</script>
vue.js vuetify.js
vue.js vuetify.js
asked Jan 1 at 16:57
ToddTToddT
7621828
asked Jan 1 at 16:57
ToddTToddT
7621828
asked Jan 1 at 16:57
ToddTToddT
7621828
asked Jan 1 at 16:57
ToddTToddT
7621828
asked Jan 1 at 16:57
ToddTToddT
7621828
7621828
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04
add a comment |
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997281%2fvuetify-hide-navigation-drawer-during-transition%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997281%2fvuetify-hide-navigation-drawer-during-transition%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The drawer is present, but off screen. As your panel slides to the left, the drawer slides on to the screen. Put a v-show on the side-drawer component.
– Jackson Miller
Jan 2 at 8:13
@JacksonMiller thanks man! yep I tried that.. it kills the drawer transition, makes it jumpy. but maybe that's my only alternative..
– ToddT
Jan 2 at 20:04