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-12 03:07:19 +01:00
parent a082bfb4c0
commit 22c8bb8ed1
5 changed files with 366 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
firebase.md
View File

@@ -898,6 +898,8 @@ document setting a default cols (check this with triangle)
<!-- TODO Screenshot of firebase tutorial login page -->
<https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/forms/LoginForm.vue>
You can control how items are rendered based on the viewport width. For example, you can have a page appear across 2 columns on desktop, but display a single column on mobile : <http://localhost:8080/triangle>
One way is to use the the viewport cols props for `<v-col>`:
@@ -917,10 +919,25 @@ You can find all props for the dynamic cols in <https://vuetifyjs.com/en/compone
If you set a row to use more than 12 columns, it will overfill on to the next line.
<!-- TODO Document using align-sm-end for responsive content layouts -->
<!-- ? should this be merged with the previous section on mobile layouts -->
Using the cards to create dynamic rows filling the space in each column, you can go even further and control how this should render on different viewports.
For example, if we wanted to center content on a mobile, but have it align to the right on larger screens we can do the following:
```html
<div
class="d-flex flex-column align-sm-end align-center justify-center"
:class="alignOnViewport"
>
```
Here we are using `align-center`. This will set the content to center itself by default. We can then use `align-sm-end` to align the content to the right on anything sm and above. Combinations of these can be used to create dynamic and fluid layouts for all devices.
You can also use dynamically created classes to apply css to the content depending on the viewport.
<!-- ! create the trilium note link here -->
## CSS Spacing
<https://vuetifyjs.com/en/styles/spacing/>
@@ -1021,3 +1038,137 @@ The x and y set the coordinate system to use for the top left corner of the view
Take for example `viewBox="-50 -50 100 100"` - this means the top left corner has coordinates -50,-50, so the bottom right corner has coordinates 50,50. Drawing a circle centered around 0,0 with radius 50 it will fill the screen.
Setting a viewbox allows you to set the box that the svg element should draw in. This will allow you to then control the width and height to scale the element properly.
## Triangle banners
### Method 1 - position: absolute
See <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/Triangle.vue> for an example.
You should create a triangle banner css class:
```scss
.newtriangle {
width: 105vw;
height: 50vh;
background-image: radial-gradient(
circle farthest-corner at 7.5% 54.1%,
rgba(0, 0, 0, 1) 0%,
rgba(39, 0, 89, 1) 74.9%
);
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
}
```
Then you should create a `<v-row>` with this class. This row should also set `position: absolute; z-index: 1;` in the style (or add this to the triangle class).
```html
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
<v-col
class="d-flex align-center pt-0 ml-8"
style="position: relative; z-index: 10;"
>
<v-card flat color="rgb(0, 0, 0, 0)">
<h1 class="display" style="position: relative;">
Welcome to Savvy Firebox Tutorial
</h1>
<v-btn
x-large
color="primary"
style="position: relative; z-index: 10;"
class="lighten-1"
>Click Here</v-btn
>
</v-card>
</v-col>
</v-row>
```
Because the element has been set to position absolute, any content after this without absolute positioning will be on top of this element. You should create a blank row with `position: relative;` with a height matching the triangle banner above it. This will create blank space on top of the banner.
```html
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
```
Any other content then be placed after this like normal.
### Method 2 - Without position: absolute
See <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/Backgrounds.vue> for an example.
Add the css class for the banner:
```css
.newtriangle {
width: 105vw;
height: 50vh;
background-image: radial-gradient(
circle farthest-corner at 7.5% 54.1%,
rgba(0, 0, 0, 1) 0%,
rgba(39, 0, 89, 1) 74.9%
);
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
}
```
Apply this class to a `<v-content>` and add any content to go inside it:
```html
<v-container fluid class="newtriangle">
<v-row class="fill-height d-flex align-center">
<v-col class="">
<h1 class="display-2 white--text">
CSS polygon background with clip-path.
</h1>
</v-col>
</v-row>
</v-container>
```
## Fullscreen backgrounds
You can use svg images as a fullsize background. These images can be obtained from envano web templates - use Pixelmator Pro and its extraction tools to extract the svg elements, upscale and export for web.
Create a `<v-img>` with the src as the svg image.
```html
<v-img
src="../assets/images/background.svg"
:height="this.currentHeight - 64"
width="auto"
contain="false"
position="bottom 0px right 0px"
></v-img>
```
Any content to go in the page should go inside the `<v-img>` tags.
The width should be auto - it will be set by the height.
The prop `contain` should be used to ensure the image fits the full height properly and isn't cropped.
To align the image in the bottom right, set the position prop:
```html
position="bottom 0px right 0px"
```
If you are using a appbar, you should dynamically get the viewport height, and substract the height of the appbar. The default height is `64px` - use the documentation to find the heights if using dense or extended props.
You should add a computed property that returns the current viewport height:
```javascript
computed: {
currentHeight() {
return window.innerHeight
}
}
```
Then, in the height of the `<v-img>` you should set a dynamic prop that sets the height of the image to this computed property minus the height of the appbar.
```html
:height="this.currentHeight - 64"
```

BIN
src/assets/images/newbackground.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

2
src/components/LoginFull.vue
View File

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

125
src/views/Playground.vue
View File

@@ -1,41 +1,106 @@
<template>
<div>
<v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
<v-img
src="../assets/images/background.svg"
height="100vh"
<v-container fluid class="ma-0 pa-0 full-screen d-flex">
<img
src="../assets/images/newbackground.png"
width="auto"
contain="false"
position="bottom 0px right 0px"
></v-img>
style=""
class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
/>
<v-container
fill-height
class="d-flex align-center"
style="position: relative; z-index: 10;"
>
<v-row>
<v-col class="d-flex justify-center">
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">{{ viewportHeight - 64 }}</h1>
</v-col>
<v-col>
<h1 class="display-2">{{ viewportWidth }}</h1>
</v-col>
<v-col>
<h1 class="display-2">{{ backgroundWidth }}</h1>
</v-col>
</v-row>
</v-container>
<v-container>
<div style="position: relative; z-index: 1">
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col> </v-col>
</v-row>
</div>
</v-container>
</div>
</template>
<script>
export default {};
export default {
data() {
return {
viewportHeight: window.innerHeight,
viewportWidth: window.innerWidth,
backgroundWidth: ""
};
},
created() {
window.addEventListener("resize", this.updateHeight);
window.addEventListener("resize", this.updateWidth);
},
destroyed() {
window.removeEventListener("resize", this.updateHeight);
window.addEventListener("resize", this.updateWidth);
},
mounted() {
this.getBackgroundWidth();
},
methods: {
updateHeight() {
this.viewportHeight = window.innerHeight;
},
updateWidth() {
this.viewportWidth = window.innerWidth;
},
getBackgroundWidth() {
var background = document.querySelector("#backgroundsvg");
this.backgroundWidth = background.clientWidth;
}
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.full-screen {
height: calc(100vh - 64px);
}
.image-wrapper {
overflow: hidden;
}
img.new-background-image {
max-height: calc(100vh - 64px);
position: absolute;
height: 100%;
max-width: 1115px;
right: 0;
// left: 500px;
}
.background-image {
position: absolute;
height: calc(100vh - 64px);
// width: 100%;
max-width: 1115px;
right: 0;
z-index: 1;
border-style: dashed;
object-fit: cover;
object-position: right top;
overflow: hidden;
}
</style>

129
temp.md Normal file
View File

@@ -0,0 +1,129 @@
# Temp notes
## React to height change
To create content based on viewport height change you should use an event listener: `window.addEventListener`.
A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
The current height can be obtained from `window.innerHeight`.
You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
```javascript
export default {
data() {
return {
viewportHeight: window.innerHeight
};
},
created() {
window.addEventListener("resize", this.updateHeight);
},
destroyed() {
window.removeEventListener("resize", this.updateHeight);
},
methods: {
updateHeight() {
this.viewportHeight = window.innerHeight;
}
}
};
```
This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
```html
<v-img
src="../assets/images/newbackground.png"
:height="this.viewportHeight - 64"
width="auto"
contain
position="bottom 0px right 0px"
class="ma-0 pa-0"
id="backgroundsvg"
></v-img>
```
You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
```css
.full-screen {
height: calc(100vh - 64px);
}
```
You might also want to add browser compatibility options:
Opera:
`height: -o-calc(100% - 65px);`
Google/Safari:
`height: -webkit-calc(100% - 65px);`
## Using `<v-content>` to fill the page
`fill-height` is useful for child components if you want them to fill to the height of the parent.
To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
## v-for for n times repetition
You can repeat things n times using a `v-for`:
```html
<v-container v-for="index in 10" :key="index"></v-container>
```
Use `<v-container fill-height class="d-flex justify-center align-content-center">`
to get content like - screenshot of central content with pipe background
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
## Images as backgrounds
You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
<https://www.webfx.com/blog/web-design/responsive-background-image/>
Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
You can use aditional controls to set how the image should scale itself:
<https://css-tricks.com/perfect-full-page-background-image/>
Cropping images with `object-fit: cover;`
<https://alligator.io/css/cropping-images-object-fit/>
## Images that autoscale (zoom)
To set an image to auto scale (zoom style)
Use `max-width` to the value you want the image to be
Use `width: 100%;`
Use `height: auto;`
Use `max-height` to the value you want the image to be
## To Do
Organise these notes!
Get image cropping from more than one direction
Document all up and move into firebase.md
Do stripe menu
Do waves/headers with backgrounds
Do a fullscreen blob landing page
Do Tailwind layout (moveable side content)
Do Liquidlight (using big headers)
Do buttons: <https://www.gatsbyjs.org>
Use media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?