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>

84
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,10 +197,6 @@ 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)
@@ -210,7 +205,6 @@ Doc setting an image with transparent appbar
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.