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-29 05:11:20 +01:00
parent 2fb62006b7
commit 9da6579cba
5 changed files with 162 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
firebase.md
View File

@@ -322,6 +322,16 @@ A container should be used whenever you want to use `<v-col>` and `<v-row>`. To
- `fill-height`
- `fluid`.
To make content fill the width of the element it is in, you can use the following css:
```css
.full-width {
width: 100%;
}
```
`width` sets the element to the percentage of its parent. So to have a textbox fill the width of the v-card element it is in you should set the `<v-card>`, `<v-form>` and `<v-text-field>` to `width: 100%;`. As long as the parent elements have 100%, you can set the text input to be a percentage of this, say 50%.
## Multi column layouts
An example can be found here:
@@ -513,7 +523,7 @@ You can change the background colour, and the highlight colour (when clicked) wi
></v-text-field>
```
To change the placeholder colour you should use a custom class that overwrites this colour:
To change the placeholder (text) colour you should use a custom class that overwrites this colour:
```css
.white-placeholder ::v-deep input::placeholder {
@@ -522,7 +532,7 @@ To change the placeholder colour you should use a custom class that overwrites t
}
```
To change the label colour:
To change the label (text) colour:
```css
.white-placeholder ::v-deep .v-label {
@@ -541,3 +551,57 @@ To change the input colour (the text that is typed in by the user) we should use
```
We have to use `::v-deep` because we are in a scoped component. Any nested css classes/variables in a scoped component will have a random id attached to them (vue does this dynamically). The `::v-deep` will make sure that the nested css gets the formatting applied. See <https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors> for details.
## Overwriting sass/scss variables
<https://vuetifyjs.com/en/customization/sass-variables/>
Create a `_variables.scss` in `./src/scss`.
If Vuetify is installed through the Vuetify CLI then this `scss` file will be automatically bootstrapped into the App. If you want to write additional sheets then you should edit the `vue.config.js` file and add the following to `module.exports`:
```scss
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@import "@/scss/_variables.scss";
`
}
}
},
transpileDependencies: ["vuetify"]
};
```
Overwriting `sass` variables is easy. You need to simply define them in this `_variables.scss` file and they will be used in the main app.
You can find a list of default variables <https://vuetifyjs.com/en/customization/sass-variables/>.
Or you can use the variables defined in the `sass` section of the components api documentation.
## Slots
When using slots in Vuetify find the slot name from the api documentation.
To use a slot, you should create a `<template>` inside the component and pass a `v-slot:$NAME` directive.
For example:
`<template v-slot:prepend-inner>`
You can also use `#` as a keybinding for `v-slot`:
`<template #prepend-inner>`
An example of passing a prepend icon to a `<v-text-field>`:
```html
<template #prepend-inner>
<v-icon>
mdi-account-circle
</v-icon>
</template>
```
Expects the v-img component. Scoped props should be applied with
v-bind="props".

3
src/components/LoginFull.vue
View File

@@ -4,7 +4,8 @@
style=" height: 100vh;"
overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
>
<LoginForm></LoginForm>
<!-- <LoginForm class="hidden-xs-only"></LoginForm> -->
<LoginForm class=""></LoginForm>
</video-background>
</template>

2
src/scss/_variables.scss
View File

@@ -140,5 +140,3 @@ $mainColor: #323947;
color: $mainColor !important;
}
$text-field-outlined-fieldset-border: white;
$btn-font-weight: 1400;

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

@@ -1,56 +1,65 @@
<template>
<v-container fill-height fluid>
<!-- <v-form v-model="valid"> -->
<v-row>
<v-spacer></v-spacer>
<v-col cols="5" align-self="stretch" class="">
<v-col
cols="4"
align-self="stretch"
class="d-flex flex-column justify-space-around align-end"
>
<v-card
color="rgb(0, 0, 0, 0)"
flat
class="d-flex align-end flex-column"
height="150px"
>
<h1 class="whiteText display-2 font-weight-bold">
<div class="text-align-right">
<h1 class="whiteText title ">
Savvy Firebase Tutorial
</h1>
<p class="whiteText mb-0">Log in or create an account.</p>
<p class="whiteText mb-0 mt-2">Log in or create an account.</p>
</div>
</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 color="rgb(0, 0, 0, 0" flat>
<div class="text-align-right">
<p class="whiteText mb-0">Don't have an account? Create one.</p>
</div>
</v-card>
<!-- </div> -->
<!-- </v-card> -->
</v-col>
<v-spacer></v-spacer>
<v-col cols="5" align-self="center" class="d-flex justify-start">
<v-col cols="1"></v-col>
<v-col
xs="5"
md="3"
align-self="center"
class="d-flex justify-start flex-column align-start"
>
<v-card
color="rgb(0, 0, 0, 0)"
flat
class="d-flex align-center flex-column"
class="d-flex align-center flex-column full-width"
>
<v-icon color="white" size="3em" class="pb-4"
>mdi-account-circle</v-icon
>
<v-form v-model="valid" class="pt-4 d-flex flex-column align-center">
<v-form
v-model="valid"
class="pt-4 d-flex flex-column align-center full-width"
>
<v-text-field
v-model="username"
outlined
rounded
placeholder="Username"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 10%)"
class="white-placeholder"
></v-text-field>
color="rgb(100%, 100%, 100%, 20%)"
class="white-placeholder full-width"
required
>
<template #prepend-inner>
<v-icon color="white" class="pr-3">
mdi-account-circle
</v-icon>
</template>
</v-text-field>
<v-text-field
v-model="password"
outlined
@@ -58,18 +67,31 @@
type="password"
placeholder="Password"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 10%)"
class="white-placeholder"
></v-text-field>
<v-btn depressed color="primary" class="lighten-2">Submit</v-btn>
color="rgb(100%, 100%, 100%, 20%)"
class="white-placeholder full-width"
required
>
<template #prepend-inner>
<v-icon color="white" class="pr-3">
mdi-lock
</v-icon>
</template></v-text-field
>
<v-btn
depressed
large
color="primary"
class="lighten-3"
:loading="load"
@click="submit"
>Submit</v-btn
>
</v-form>
<p class="whiteText mb-0 pt-5">Forgot password?</p>
<p class="whiteText display-1">{{ username }}</p>
</v-card>
</v-col>
<v-spacer></v-spacer>
<v-col cols="0" md="3"></v-col>
</v-row>
<!-- </v-form> -->
</v-container>
</template>
@@ -80,8 +102,18 @@ export default {
return {
valid: false,
username: "",
password: ""
password: "",
load: false
};
},
methods: {
async submit() {
this.load = !this.load;
console.log("loading");
if (this.$refs.form.validate()) {
console.log("Success");
}
}
}
};
</script>
@@ -93,6 +125,14 @@ export default {
color: white;
}
.full-width {
width: 100%;
}
.text-align-right {
text-align: right;
}
.title {
font-size: 2rem !important;
}
@@ -115,4 +155,16 @@ export default {
.v-input__slot:hover {
border-color: #6fbd44;
}
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)
> .v-input__control
> .v-input__slot:hover {
border-width: 1px !important;
border-style: solid !important;
border-color: #6fbd44 !important;
}
.align-right {
text-align: right;
}
</style>

10
vue.config.js
View File

@@ -1,11 +1,11 @@
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@import "@/scss/_variables.scss";
`
}
// scss: {
// prependData: `
// @import "@/scss/_variables.scss";
// `
// }
}
},
transpileDependencies: ["vuetify"]