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-03-25 22:41:37 +00:00
parent bd1bbc284d
commit dfd489480e
8 changed files with 267 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
firebase.md
View File

@@ -10,18 +10,20 @@ List of errors: <https://firebase.google.com/docs/reference/js/firebase.auth.Aut
You can catch the error and use if/else to capture the specific error.
```javascript
firebase.auth().createUserWithEmailAndPassword(email, password)
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
if (errorCode == "auth/weak-password") {
alert("The password is too weak.");
} else {
alert(errorMessage);
}
console.log(error);
});
});
```
Firebase User object:
@@ -48,7 +50,6 @@ mention using `reauthenticateWithCredential`. This is only needed if using a 3rd
`yarn add @mdi/font -D`
## Controlling layouts
### Spacing
@@ -137,7 +138,6 @@ For example, to break on the medium viewport and have the second layout apply to
Here the second layout does not include the medium layout, hence the medium layout will apply to it.
## App bar
### Gradient as a background colour
@@ -157,8 +157,8 @@ If you want to apply a fade gradient colour on top of the image, you should use
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
></v-img> </template
></v-app-bar>
```
If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.
@@ -201,8 +201,8 @@ export default {
data() {
return {
video: require("../assets/videos/optical.mp4")
};
}
},
};
```
@@ -220,8 +220,8 @@ You can find full props to customise the video:
You can set a gradient to the image to improve visibility:
```javascript
style=" height: 100vh;"
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
style = " height: 100vh;";
overlay = "linear-gradient(45deg,#2a4ae430,#fb949e6b)";
```
## Dynamically hide app bar
@@ -242,7 +242,7 @@ Use the Vuex store to determine when you want to hide the app bar:
state.fullScreen = fullScreen;
}
},
```
```
and create the lifecycle actions in the component that houses the appbar:
@@ -258,13 +258,13 @@ and create the lifecycle actions in the component that houses the appbar:
Then you can wrap the appbar in a `v-if`:
```html
<v-app-bar
<v-app-bar
flat
app
class="hidden-sm-and-down"
color="#EEEEEE"
v-if="!this.$store.getters.fullScreen"
>
></v-app-bar>
```
## Change default font colour
@@ -289,10 +289,10 @@ Then create a new class `fontColor` to apply to the router, and edit the default
Then in `App.vue` apply the `fontColor` class to the `<v-app>`:
```html
<v-app
<v-app
:style="{ background: $vuetify.theme.themes.light.background }"
class="fontColor"
>
></v-app>
```
## Grids
@@ -312,7 +312,7 @@ The grid system applies to `<v-row>` and you can use the following props:
For `<v-col>` only `align-self` is available. To align content on a column, or any other element like a card, you should use the same classes as in the flex system. For example:
```html
<v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
<v-col cols="5" align-self="start" class="d-flex justify-end pr-0"></v-col>
```
## Container filling whole page
@@ -322,6 +322,49 @@ A container should be used whenever you want to use `<v-col>` and `<v-row>`. To
- `fill-height`
- `fluid`.
## Multi column layouts
An example can be found here:
<https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/forms/LoginForm.vue>
You can make use of the above to create dynamic layouts.
One idea (for a login page) might be to use the following nested layout:
### Container
A `<v-container>` with `fill-height` and `fluid` props.
### Row
A `<v-row>`
### Columns
A `<v-col>` with `align-self="stretch"` and `class="d-flex flex-column justify-space-between"`.
`align-self=stretch` allows each child of the column to _stretch_ (<https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)>.
`class="d-flex flex-column justify-space-between"` allows each child of the column to flex - with justify-space-between putting them equally apart top to bottom. It's used to equally space out the _rows_ inside this column. Even though we are not using `<v-row>`.
### Cards
A `<v-card>` with `class="d-flex align-end flex-column"`.
`class="d-flex align-end flex-column"` allows content inside the card to flex. The `align-end` means they will be on the right hand side and flex-column means they are flexing across columns.
To make text align right, you should use the `text-right` class:
`<p class="whiteText font-regular text-right mb-0">`
This is because although the `<p>` element will align to the right becasue of the class from the `<v-card>`, the text inside will align to the left.
We can add `color="rgb(0, 0, 0, 0)"` and `flat` props to the card - allowing it to seamlessly blend in with the background.
We can add mulitple cards to this layout in this column - and control how they are spaced with the props on the column.
We can add `<v-spacer>` and then add additional colums with the same props to add content in a column like manner.
## Helper classes
### Spacing
@@ -344,7 +387,7 @@ There are two types of styles: Typography Display Classes and Style and Weight C
Examples include `.display-2` and `.font-weight-black`.
### Replace Vuetify default font with own
### Replace Vuetify default font with custom
Fonts needed to replace the Roboto default:
@@ -362,3 +405,82 @@ Fonts needed to replace the Roboto default:
If font styles dont exist then substitute them with the closest type.
An example of a stylesheet replacing all of these with the Gilroy font is here:
<https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/scss/_variables.scss>
## Custom colour theme
Creating a custom colour theme for Vuetify is straightforward.
<https://mycolor.space> is a good resource to generate palettes from a colour.
See <https://vuetifyjs.com/en/customization/theme/#customizing> for details on customising a theme.
### Editable colours
You change the `Vuetify` object in `vuetify.js`:
```javascript
export default new Vuetify({
icons: {
iconfont: "mdi"
},
theme: {
themes: {
light: {
primary: "#051937",
secondary: "#374366",
accent: "#d4a418",
background: "#e8e8e8"
}
}
}
});
```
These are the editable colours you can choose for Vuetify
```json
{
"primary": "#1976D2",
"secondary": "#424242",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FFC107"
}
```
These follow the Material style of colours:
<https://material.io/design/color/the-color-system.html#color-theme-creation>
The accent colour in Vuetify isn't really specified in the Material colour design - typically the secondary colour would be used as an accent colour - with shades of the primary used throughout the UI. However in some themes you may wish to use primary and secondary together, and have a seperate accent colour.
<https://material.io/design/color/the-color-system.html#color-theme-creation>
### Colour variants
Vuetify will automatically generate darken and lighten colour variants of the primary and secondary colours in the theme. If you want to control these manually you can do so following the instructions:
<https://vuetifyjs.com/en/customization/theme/#custom-theme-variants>
The variants you can use are:
```json
{
"base": "string",
"lighten5": "string",
"lighten4": "string",
"lighten3": "string",
"lighten2": "string",
"lighten1": "string",
"darken1": "string",
"darken2": "string",
"darken3": "string",
"darken4": "string"
}
```
You can apply these as a class to the object you want to darken/lighten.
For example:
`<v-btn color="primary" class="darken-2">Hello</v-btn>`

14
src/App.vue
View File

@@ -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>

35
src/components/Appbar.vue
View File

@@ -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>

151
src/components/HelloWorld.vue
View File

@@ -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>

6
src/plugins/vuetify.js
View File

@@ -11,7 +11,11 @@ export default new Vuetify({
theme: {
themes: {
light: {
background: "#fff"
primary: "#051937",
secondary: "#374366",
accent: "#d4a418",
// background: "#e7efff",
background: "#e8e8e8"
}
}
}

6
src/router/index.js
View File

@@ -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")
}
];

4
src/views/Home.vue
View File

@@ -5,6 +5,10 @@
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>

40
src/views/forms/LoginForm.vue
View File

@@ -1,12 +1,38 @@
<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-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">
@@ -39,4 +65,8 @@ export default {
.whiteText {
color: white;
}
.title {
font-size: 2.0rem !important;
}
</style>