|
|
|
|
@@ -349,71 +349,54 @@ Use `max-height` to the value you want the image to be
|
|
|
|
|
|
|
|
|
|
Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
|
|
|
|
|
|
|
|
|
|
## Transparent appbar
|
|
|
|
|
## Fullscreen image as a background
|
|
|
|
|
|
|
|
|
|
You can have the appbar be transparent to have a background image fullscreen. To do this you should:
|
|
|
|
|
### Transparent appbar
|
|
|
|
|
|
|
|
|
|
- Set an image
|
|
|
|
|
- with `position: absolute;`
|
|
|
|
|
-
|
|
|
|
|
You can have the appbar be transparent to have a background image fullscreen.
|
|
|
|
|
|
|
|
|
|
## To Do
|
|
|
|
|
```html
|
|
|
|
|
<v-app-bar
|
|
|
|
|
flat
|
|
|
|
|
app
|
|
|
|
|
hide-on-scroll
|
|
|
|
|
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
|
|
|
|
v-if="!this.$store.getters.fullScreen"
|
|
|
|
|
style="z-index: 15;"
|
|
|
|
|
></v-app-bar>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Image looks good on `left: 50%;`
|
|
|
|
|
### Adjust image height to match that of dynamic appbar
|
|
|
|
|
|
|
|
|
|
Organise these notes!
|
|
|
|
|
### Using CSS media queries for dynamic classes
|
|
|
|
|
|
|
|
|
|
Set dynamic navbar content (cols)
|
|
|
|
|
The appbar will adjust its own height based on the viewport.
|
|
|
|
|
|
|
|
|
|
Get image cropping from more than one direction
|
|
|
|
|
On medium and above it will be 64px, on small and below it will be 56px.
|
|
|
|
|
|
|
|
|
|
Document all up and move into firebase.md
|
|
|
|
|
On the image itself you should adjust the `top` css property to account for this:
|
|
|
|
|
|
|
|
|
|
Do stripe menu
|
|
|
|
|
|
|
|
|
|
Do waves/headers with backgrounds
|
|
|
|
|
Do a fullscreen blob landing page
|
|
|
|
|
Do Tailwind layout (moveable side content)
|
|
|
|
|
Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
|
|
|
|
|
Do Liquidlight (using big headers)
|
|
|
|
|
Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
|
|
|
|
|
|
|
|
|
|
Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
|
|
|
|
|
|
|
|
|
|
And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
|
|
|
|
|
|
|
|
|
|
More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
|
|
|
|
|
|
|
|
|
|
Do buttons: <https://www.gatsbyjs.org>
|
|
|
|
|
|
|
|
|
|
Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
|
|
|
|
<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
|
|
|
|
|
|
|
|
|
|
Can use dynamic classes with vuetify.
|
|
|
|
|
|
|
|
|
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|
|
|
|
|
|
|
|
|
|
56 on small breakpoint
|
|
|
|
|
64 on medium and up
|
|
|
|
|
|
|
|
|
|
List of breakpoints:
|
|
|
|
|
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
|
|
|
|
|
|
|
|
|
|
Small: `600px >< 960px`
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
Doc setting an image with transparent appbar
|
|
|
|
|
Rather than change height you need to set top to negative
|
|
|
|
|
|
|
|
|
|
Have examples of both of these to refer back to^
|
|
|
|
|
```scss
|
|
|
|
|
img.new-background-image {
|
|
|
|
|
height: calc(100vh);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
@media screen and (max-width: $background-width) {
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
|
|
|
|
top: -64px;
|
|
|
|
|
}
|
|
|
|
|
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
|
|
|
|
top: -56px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Stripe appbar menu
|
|
|
|
|
|
|
|
|
|
Example: <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/components/Appbar.vue>
|
|
|
|
|
|
|
|
|
|
Install with yarn:
|
|
|
|
|
`yarn add vue-stripe-menu`
|
|
|
|
|
|
|
|
|
|
@@ -515,14 +498,14 @@ Then you can use a `<router-link>` component with a `v-if="data.item.routerLink"
|
|
|
|
|
<component :is="data.item.content" class="content" />
|
|
|
|
|
<component :is="data.item.secondary" class="content--secondary" />
|
|
|
|
|
</template>
|
|
|
|
|
<template #title="data" class="ma-0 pa-0" style="margin-bottom: -20px;">
|
|
|
|
|
<template #title="menu" class="ma-0 pa-0">
|
|
|
|
|
<router-link
|
|
|
|
|
:to="data.item.routerLink"
|
|
|
|
|
v-if="data.item.routerLink"
|
|
|
|
|
:to="menu.item.routerLink"
|
|
|
|
|
v-if="menu.item.routerLink"
|
|
|
|
|
style="padding-bottom: -20px;"
|
|
|
|
|
>
|
|
|
|
|
<p class="ma-0 pa-0 underline routerLink">
|
|
|
|
|
{{ data.item.title }}
|
|
|
|
|
{{ menu.item.title }}
|
|
|
|
|
</p>
|
|
|
|
|
</router-link>
|
|
|
|
|
</template>
|
|
|
|
|
@@ -554,3 +537,117 @@ import "./scss/appbar.scss";
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You can use this file to set the breakpoint width that Vuetify uses. If your appbar changes on sm and below, you can set the `$vsm-media` variable to this pixel viewport.
|
|
|
|
|
|
|
|
|
|
To allow the appbar to function in a Vuetify appbar component, you should set the `z-index` in the css of the element:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<v-app-bar
|
|
|
|
|
flat
|
|
|
|
|
app
|
|
|
|
|
hide-on-scroll
|
|
|
|
|
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
|
|
|
|
v-if="!this.$store.getters.fullScreen"
|
|
|
|
|
style="z-index: 15;"
|
|
|
|
|
></v-app-bar>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Getting sass to talk to javascript
|
|
|
|
|
|
|
|
|
|
<https://css-tricks.com/making-sass-talk-to-javascript-with-json/>
|
|
|
|
|
|
|
|
|
|
## Using Vuetify Sass variables for dynamic css
|
|
|
|
|
|
|
|
|
|
## Using SASS variables for viewport
|
|
|
|
|
|
|
|
|
|
Vuetify has SASS variables that you can use in your css blocks.
|
|
|
|
|
|
|
|
|
|
<https://vuetifyjs.com/en/customization/sass-variables/>
|
|
|
|
|
|
|
|
|
|
To control CSS based on the viewport, you can either set the class dynamically, or you can use SCSS itself.
|
|
|
|
|
|
|
|
|
|
You can use `$display-breakpoints` with a `map-get` in the sass to set a css property dynamically (check the documentation for the options that `$display-breakpoints` offers).
|
|
|
|
|
|
|
|
|
|
For example, you can apply css to a class based on whether or not the viewport is met:
|
|
|
|
|
|
|
|
|
|
```scss
|
|
|
|
|
img.new-background-image {
|
|
|
|
|
height: calc(100vh);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -64px;
|
|
|
|
|
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
If you want to break on a specific width (say when the background image width is met to align it), you can use a scss variable:
|
|
|
|
|
|
|
|
|
|
```scss
|
|
|
|
|
$background-width: 795px;
|
|
|
|
|
|
|
|
|
|
img.new-background-image {
|
|
|
|
|
height: calc(100vh);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -64px;
|
|
|
|
|
@media screen and (max-width: $background-width) {
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## To Do
|
|
|
|
|
|
|
|
|
|
Image looks good on `left: 50%;`
|
|
|
|
|
|
|
|
|
|
Organise these notes!
|
|
|
|
|
|
|
|
|
|
Set dynamic navbar content (cols)
|
|
|
|
|
|
|
|
|
|
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 <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
|
|
|
|
|
Do Liquidlight (using big headers)
|
|
|
|
|
Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
|
|
|
|
|
|
|
|
|
|
Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
|
|
|
|
|
|
|
|
|
|
And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
|
|
|
|
|
|
|
|
|
|
More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
|
|
|
|
|
|
|
|
|
|
Do buttons: <https://www.gatsbyjs.org>
|
|
|
|
|
|
|
|
|
|
Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
|
|
|
|
<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
|
|
|
|
|
|
|
|
|
|
Can use dynamic classes with vuetify.
|
|
|
|
|
|
|
|
|
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|
|
|
|
|
|
|
|
|
|
56 on small breakpoint
|
|
|
|
|
64 on medium and up
|
|
|
|
|
|
|
|
|
|
List of breakpoints:
|
|
|
|
|
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
|
|
|
|
|
|
|
|
|
|
Small: `600px >< 960px`
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
Doc setting an image with transparent appbar
|
|
|
|
|
Rather than change height you need to set top to negative
|
|
|
|
|
|
|
|
|
|
Have examples of both of these to refer back to^
|
|
|
|
|
|
