web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-04-14 03:03:20 +01:00
parent 08b383fdd4
commit 6c8484420b
8 changed files with 325 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@@ -3,7 +3,6 @@
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
<v-content>
<Appbar></Appbar>
<!-- <vue-page-transition name="fade-in-right"> -->
<vue-page-transition name="fade">
<router-view></router-view>
</vue-page-transition>
@@ -15,9 +14,31 @@
<script>
import Appbar from "@/components/Appbar";
import Welcome from "./views/stripe-appbar/Welcome";
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
import Random from "./views/stripe-appbar/Random"
export default {
name: "App",
components: { Appbar }
components: { Appbar },
data() {
return {
menu: [
{
title: "Welcome",
dropdown: "welcome",
content: Welcome,
secondary: WelcomeSecondary,
element: "span"
},
{
title: "Random",
dropdown: "random",
content: Random
}
]
};
}
};
</script>
@@ -26,4 +47,11 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content {
padding: 20px;
}
.content--secondary {
padding: 20px;
}
</style>

77
src/components/Appbar.vue
View File

@@ -9,43 +9,29 @@
>
<v-row>
<v-spacer></v-spacer>
<v-col cols="4" class="d-flex justify-start align-content-center">
<v-col
cols="4"
class="d-flex justify-start align-center align-content-center"
>
<router-link :to="{ name: 'Home' }" class="routerLink">
<v-toolbar-title class="title">
<p class="mb-0">Savvy Firebase Tutorial</p>
</v-toolbar-title>
</router-link>
</v-col>
<v-col cols="4" class="d-flex justify-end align-self-center">
<router-link
:to="{ name: 'Playground' }"
class="routerLink ma-0 pr-2"
<v-col cols="4" class="d-flex justify-end">
<vsm-menu
ref="header"
:menu="menu"
:screen-offset="250"
:base-width="380"
:base-height="400"
>
<p class="mb-0 underline">
Playground
</p>
</router-link>
<router-link
:to="{ name: 'Backgrounds' }"
class="routerLink ma-0 pr-2"
>
<p class="mb-0 underline">
Backgrounds
</p>
</router-link>
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
<p class="mb-0 underline">
Triangle
</p>
</router-link>
<router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
<p class=" mb-0 underline">
Sign In
</p>
</router-link>
<router-link :to="{ name: 'Login' }" class="routerLink ma-0">
<p class="mb-0 underline">Register</p>
</router-link>
<template #default="data">
<component :is="data.item.content" class="content" />
<component :is="data.item.secondary" class="content--secondary" />
</template>
</vsm-menu>
</v-col>
<v-spacer></v-spacer>
</v-row>
@@ -54,8 +40,37 @@
</template>
<script>
import Welcome from "../views/stripe-appbar/Welcome";
import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
import Random from "../views/stripe-appbar/Random";
export default {
name: "Appbar"
name: "Appbar",
data() {
return {
menu: [
{
title: "Welcome",
dropdown: "welcome",
content: Welcome,
secondary: WelcomeSecondary
},
{
title: "Random",
dropdown: "random",
content: Random
}
]
};
},
methods: {
onOpenDropdown() {
console.log("onOpenDropdown");
},
onCloseDropdown() {
console.log("onCloseDropdown");
}
}
};
</script>

86
src/components/AppbarOld.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div>
<v-app-bar
flat
app
hide-on-scroll
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
v-if="!this.$store.getters.fullScreen"
>
<v-row>
<v-spacer></v-spacer>
<v-col cols="4" class="d-flex justify-start align-content-center">
<router-link :to="{ name: 'Home' }" class="routerLink">
<v-toolbar-title class="title">
<p class="mb-0">Savvy Firebase Tutorial</p>
</v-toolbar-title>
</router-link>
</v-col>
<v-col cols="4" class="d-flex justify-end align-self-center">
<router-link
:to="{ name: 'Playground' }"
class="routerLink ma-0 pr-2"
>
<p class="mb-0 underline">
Playground
</p>
</router-link>
<router-link
:to="{ name: 'Backgrounds' }"
class="routerLink ma-0 pr-2"
>
<p class="mb-0 underline">
Backgrounds
</p>
</router-link>
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
<p class="mb-0 underline">
Triangle
</p>
</router-link>
<router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
<p class=" mb-0 underline">
Sign In
</p>
</router-link>
<router-link :to="{ name: 'Login' }" class="routerLink ma-0">
<p class="mb-0 underline">Register</p>
</router-link>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-app-bar>
</div>
</template>
<script>
export default {
name: "Appbar"
};
</script>
<style lang="scss" scoped>
.routerLink {
text-decoration: none;
color: $mainColor;
}
.underline {
position: relative;
}
.underline::after {
position: absolute;
content: "";
height: 0.1em;
top: 100%;
background: currentColor;
z-index: -1;
left: 0;
right: 0;
transform: scaleX(0);
transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
}
.underline:hover::after {
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transform: scaleX(1);
}
</style>

15
src/components/StripeAppbar.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

28
src/views/stripe-appbar/Random.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<v-container style="width: 300px; height: 300px;">
<v-row>
<v-col>
<v-card flat>
<p class="ma-0 pa-0 headline">Random Content</p>
Random content that doesn't fit.
</v-card>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card flat>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped></style>

21
src/views/stripe-appbar/Welcome.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<v-container>
<v-row>
<v-col>
<v-card flat class="ma-0 pa-0">
<p class="headline">Welcome Pages</p>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.centre-text {
text-align: center;
}
</style>

19
src/views/stripe-appbar/WelcomeSecondary.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<v-container>
<v-row>
<v-col style="width: 300px;">
Welcome Secondary Content
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

88
temp.md
View File

@@ -150,7 +150,6 @@ You can have the appbar be transparent to have a background image fullscreen. To
- with `position: absolute;`
-
## To Do
Image looks good on `left: 50%;`
@@ -198,19 +197,14 @@ Medium: `960px >< 1264px`
When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
Doc setting an image as background without transparent appbar
Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
Doc setting an image with transparent appbar
Rather than change height you need to set top to negative
Rather than change height you need to set top to negative
Have examples of both of these to refer back to^
## Stripe appbar menu
Install with yarn:
@@ -219,9 +213,79 @@ Install with yarn:
Add to `main.js`:
```javascript
import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'
Vue.use(VueStripeMenu)
import Vue from "Vue";
import VueStripeMenu from "vue-stripe-menu";
Vue.use(VueStripeMenu);
// Import build styles
import 'vue-stripe-menu/dist/vue-stripe-menu.css'
import "vue-stripe-menu/dist/vue-stripe-menu.css";
```
You should create Vue components for the content you want to display on hover.
To use these in the appbar component, import the components:
```javascript
import Welcome from "./views/stripe-appbar/Welcome";
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
```
Then you should create a menu object in `data`:
```javascript
data() {
return {
menu: [
{
title: "Welcome",
dropdown: "welcome",
content: Welcome,
secondary: WelcomeSecondary,
element: "span"
},
{
title: "Welcome",
dropdown: "welcome",
content: Welcome,
secondary: WelcomeSecondary
}
]
};
}
```
Then in the html you should create the appbar layout you need:
```html
<vsm-menu ref="header" :menu="menu" :screen-offset="25">
<template #default="data">
<component :is="data.item.content" class="content" />
<component :is="data.item.secondary" class="content--secondary" />
</template>
</vsm-menu>
```
You can use css to control how the components should be rendered:
```css
.content {
padding: 20px;
}
.content--secondary {
padding: 20px;
}
```
To control the width, you should set the `width` in the css in the components themsevles:
```html
<v-container>
<v-row>
<v-col style="width: 300px;">
Welcome Secondary Content
</v-col>
</v-row>
</v-container>
```
To have two menu content sections top and bottom: use `content` and `secondary`.
To have two menu content sections side by side: create the full layout in the Vue component.