adding latest
This commit is contained in:
14
src/App.vue
14
src/App.vue
@@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-app
|
||||
:style="{ background: $vuetify.theme.themes.light.background }"
|
||||
class="fontColor"
|
||||
>
|
||||
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
||||
<v-content>
|
||||
<Appbar></Appbar>
|
||||
<transition name="slide">
|
||||
@@ -20,7 +17,7 @@ import Appbar from "@/components/Appbar";
|
||||
export default {
|
||||
name: "App",
|
||||
|
||||
components: { Appbar },
|
||||
components: { Appbar }
|
||||
|
||||
// data: () => {
|
||||
// video: require("./assets/videos/optical.mp4")
|
||||
@@ -30,10 +27,7 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
// font-family: $gilroy, sans-serif, Arial, Helvetica;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -23,21 +23,21 @@
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
>
|
||||
<v-row>
|
||||
<v-col cols="2"></v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="d-flex justify-start">
|
||||
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||
<v-toolbar-title class="font-weight-bold">
|
||||
Savvy Firebase Tutorial
|
||||
<v-toolbar-title class="title">
|
||||
<p class="mb-0 underline">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: 'Login' }" class="routerLink">
|
||||
<span class="mr-3">Sign In</span>
|
||||
<p class="mr-3 mb-0 underline">Sign In</p>
|
||||
</router-link>
|
||||
<span class="mr-3">Register</span>
|
||||
<p class="mb-0 underline">Register</p>
|
||||
</v-col>
|
||||
<v-col cols="2"></v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
</div>
|
||||
@@ -50,12 +50,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .appTitle {
|
||||
// // font-family: $gilroy-bold;
|
||||
// }
|
||||
|
||||
.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);
|
||||
}
|
||||
.underline:hover::after {
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||
},
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs',
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify',
|
||||
},
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/layout/pre-defined',
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,11 @@ export default new Vuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
background: "#fff"
|
||||
primary: "#051937",
|
||||
secondary: "#374366",
|
||||
accent: "#d4a418",
|
||||
// background: "#e7efff",
|
||||
background: "#e8e8e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,6 +24,12 @@ const routes = [
|
||||
name: "Login",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
|
||||
},
|
||||
{
|
||||
path: "/hello",
|
||||
name: "Hello",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
Hello
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
Hello
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-btn color="primary">Hello</v-btn>
|
||||
<v-btn color="secondary">Hello</v-btn>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,25 +1,51 @@
|
||||
<template>
|
||||
<v-container fill-height fluid>
|
||||
<!-- <v-form v-model="valid"> -->
|
||||
<v-row >
|
||||
<v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
|
||||
<v-card color="rgb(0, 0, 0, 0)" flat>
|
||||
<h1 class="whiteText display-2 font-weight-bold">Savvy Firebase Tutorial</h1>
|
||||
<span class="whiteText">Log in or create an account.</span>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="6" align-self="center" class="d-flex justify-start">
|
||||
<v-card color="rgb(0, 0, 0, 0)" flat>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col
|
||||
cols="5"
|
||||
align-self="stretch"
|
||||
class="d-flex flex-column justify-space-between"
|
||||
>
|
||||
<v-card
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
flat
|
||||
class="d-flex align-end flex-column"
|
||||
>
|
||||
<h1 class="whiteText display-2 font-weight-bold">
|
||||
Savvy Firebase Tutorial
|
||||
</h1>
|
||||
<p class="whiteText mb-0">Log in or create an account.</p>
|
||||
</v-card>
|
||||
<v-card
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
flat
|
||||
class="d-flex align-end flex-column"
|
||||
>
|
||||
<h1 class="whiteText title">
|
||||
Getting acquainted with Firebase
|
||||
</h1>
|
||||
<p class="whiteText font-regular text-right mb-0">
|
||||
Additional information can go here, buttons can be added if needed.
|
||||
Additional information can go here, buttons can be added if needed.
|
||||
</p>
|
||||
</v-card>
|
||||
<!-- </div> -->
|
||||
<!-- </v-card> -->
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="6" align-self="center" class="d-flex justify-start">
|
||||
<v-card color="rgb(0, 0, 0, 0)" flat>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
<h1 class="whiteText">Hello</h1>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- </v-form> -->
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -39,4 +65,8 @@ export default {
|
||||
.whiteText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.0rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user