web-development/base-examples

Fork 0

Files

dtomlinson acc587cf8b adding latest

2020-04-19 04:11:07 +01:00

24 KiB

Raw Permalink Blame History

Temp notes

React to height change

Get current height of page

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:

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:

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

.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);

Get current height of an object

Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a querySelector to get it:

getBackgroundWidth() {
    var background = document.querySelector("#backgroundsvg");
    this.backgroundWidth = background.clientWidth;
}

Documentation for querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

You can see all the methods and properties for document here: https://developer.mozilla.org/en-US/docs/Web/API/Document

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:

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

SVG elements as a background

You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.

If you do not need a transparent appbar:

Set an image
- with position: absolute;
- with height: calc(100vh - 64px)

Images that autoscale (zoom)

This is a good example on how you can dynamically zoom in/out of an image: https://css-tricks.com/crop-top/

Quick method:

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

Using envato EPS

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

You can have the appbar be transparent to have a background image fullscreen. To do this you should:

Set an image
- with position: absolute;

React to height change

Get current height of page

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:

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:

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

.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);

Get current height of an object

Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a querySelector to get it:

getBackgroundWidth() {
    var background = document.querySelector("#backgroundsvg");
    this.backgroundWidth = background.clientWidth;
}

Documentation for querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

You can see all the methods and properties for document here: https://developer.mozilla.org/en-US/docs/Web/API/Document

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:

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

SVG elements as a background

You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.

If you do not need a transparent appbar:

Set an image
- with position: absolute;
- with height: calc(100vh - 64px)

Images that autoscale (zoom)

This is a good example on how you can dynamically zoom in/out of an image: https://css-tricks.com/crop-top/

Quick method:

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

Using envato EPS

Fullscreen image as a background

The image should set a class:

<img
  src="../assets/images/pipebackground_1.svg"
  style=""
  class="d-flex align-end ma-0 pa-0 new-background-image"
/>

Transparent appbar

You can have the appbar be transparent to have a background image fullscreen.

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

Adjust image position to match that of dynamic appbar

To adjust the image to account for the height of the appbar dynamically you should use media queries and vuetify sass variables:

img.new-background-image {
  height: calc(100vh);
  width: calc(100vw);
  position: absolute;
  @media #{map-get($display-breakpoints, 'md-and-up')} {
    top: -64px;
  }
  @media #{map-get($display-breakpoints, 'sm-and-down')} {
    top: -56px;
  }
}

Here we offset the image from the top by the size of the appbar based on the viewports.

Alternatively if you don't want the image to extend behind the appbar don't adjust the top attribute. You should instead subtract the height of the appbar from the image:

img.new-background-image {
  width: calc(100vw);
  position: absolute;
  @media screen and (min-width: $background-width) {
    object-fit: scale-down;
    object-position: right;
  }
  @media screen and (max-width: $background-width) {
    object-fit: cover;
    object-position: left;
  }
  @media #{map-get($display-breakpoints, 'md-and-up')} {
    height: calc(100vh - 64px);
  }
  @media #{map-get($display-breakpoints, 'sm-and-down')} {
    height: calc(100vh - 56px);
  }
}

Using CSS media queries for dynamic classes

The appbar will adjust its own height based on the viewport. On medium and above it will be 64px, on small and below it will be 56px.

On the image itself you should set a class. This class should set the height and width to 100% of the viewheight/viewwidth and position: absolute.

You should set a $background-width variable - this should be the width of the image. We can use this to know if the current screen is less than the width of the actual image and apply alternative styling.

We can use media queries to set the position of the image on different background widths:

$background-width: 795px;
img.new-background-image {
  height: calc(100vh);
  width: calc(100vw);
  position: absolute;
  @media screen and (min-width: $background-width) {
    object-fit: scale-down;
    object-position: right;
  }
  @media screen and (max-width: $background-width) {
    object-fit: cover;
    object-position: left;
  }
  @media #{map-get($display-breakpoints, 'md-and-up')} {
    top: -64px;
  }
  @media #{map-get($display-breakpoints, 'sm-and-down')} {
    top: -56px;
  }
}

To have an SVG image automatically adjust itself for dynamic viewports:

Fullscreen

Set object-fit to scale-down and object-position to right.

This will ensure that the image fills the viewport entirely, and is algined to the right.

On mobile breakpoint

Set object-fit to cover and object-position to left.

Using cover will ensure the image fills the page and we align it to the left/right for scrolling. Setting the object-position to left will make sure the image cuts from the right hand side (and vice-versa).

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

Add to main.js:

import Vue from "Vue";
import VueStripeMenu from "vue-stripe-menu";
Vue.use(VueStripeMenu);
// Import build styles
import "vue-stripe-menu/dist/vue-stripe-menu.css";

You should create Vue components for the content you want to display on hover.

To use these in the appbar component, import the components:

import Welcome from "./views/stripe-appbar/Welcome";
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";

Then you should create a menu object in data:

data() {
return {
    menu: [
    {
        title: "Welcome",
        dropdown: "welcome",
        content: Welcome,
        secondary: WelcomeSecondary,
        element: "span"
    },
    {
        title: "Welcome",
        dropdown: "welcome",
        content: Welcome,
        secondary: WelcomeSecondary
    }
    ]
};
}

Then in the html you should create the appbar layout you need:

<vsm-menu ref="header" :menu="menu" :screen-offset="25">
  <template #default="data">
    <component :is="data.item.content" class="content" />
    <component :is="data.item.secondary" class="content--secondary" />
  </template>
</vsm-menu>

The ref is so you can refer to the menu object in javascript using this.$header later on. The menu prop should point to the list which contains the objects for each component you want to render.

You can use css to control how the components should be rendered:

.content {
  padding: 20px;
}
.content--secondary {
  padding: 20px;
}

To control the width, you should set the width in the css in the components themsevles:

<v-container>
  <v-row>
    <v-col style="width: 300px;">
      Welcome Secondary Content
    </v-col>
  </v-row>
</v-container>

To have two menu content sections top and bottom: use content and secondary. To have two menu content sections side by side: create the full layout in the Vue component.

If you just want a link and no component as a dropdown, you should reference a routerLink object inside the list's object.

{
    title: "Playground",
    routerLink: { name: "Playground" }
}

Then you can use a <router-link> component with a v-if="data.item.routerLink":

<template #default="data">
  <component :is="data.item.content" class="content" />
  <component :is="data.item.secondary" class="content--secondary" />
</template>
<template #title="menu" class="ma-0 pa-0">
  <router-link
    :to="menu.item.routerLink"
    v-if="menu.item.routerLink"
    style="padding-bottom: -20px;"
  >
    <p class="ma-0 pa-0 underline routerLink">
      {{ menu.item.title }}
    </p>
  </router-link>
</template>

Using the title prop controls what text should be rendered for each object's title. We can use an if with a router-link to control whether it should be a link or not.

To control the scss variables you should create an appbar.scss file in the ./scss/ folder. This file should override the default scss variables of the component.

https://github.com/Alexeykhr/vue-stripe-menu/blob/master/src/scss/_variables.scss

@import "../scss/_variables.scss";

$vsm-menu-link-height: 35px !default;
$vsm-color: $mainColor !default;
$vsm-color-hover: $mainColor !default;
$vsm-media: 768px !default;
$vsm-menu-border-radius: 15px !default;
$vsm-menu-transform-content: 150px !default;

@import "~vue-stripe-menu/src/scss/index";

We can import the default _variables.scss to use the font colour variable. Once we have overwritten the variables we should import the default scss file. Then in your main.js file you should import this scss file instead:

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:

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

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:

$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;
  }
}

Using custom scss files

You can use custom scss files to set variables/classes to be used in multiple projects. Create an scss file in ./src/scss with a leader underscore.

In this file you can scss as normal. If you're setting scss variables for a custom project remember to import the scss file at the end so your values will be applied.

Import scss files

Use @import. Then you can access the variables directly.

@import "../scss/_variables.scss";

Fontawesome in Vue

https://github.com/FortAwesome/vue-fontawesome

If using Vuetify you can use the <v-icon> component instead and register Fontawesome as a plugin https://vuetifyjs.com/en/customization/icons/#install-font-awesome-5-icons

Installation

yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/vue-fontawesome yarn add @fortawesome/free-regular-svg-icons

In main.js you should import the package:

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
Vue.component("font-awesome-icon", FontAwesomeIcon);

Then in any component you should import the library and the icon name you want:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpaceShuttle } from "@fortawesome/free-solid-svg-icons";
library.add(faSpaceShuttle);

Then in the html you can use the component and pass the icon prop:

<font-awesome-icon :icon="['fas', 'space-shuttle']" />

Bootstrap new package

npx @vue/cli create base-examples vue add vuetify

Rotate image 360 degrees

Create a css class that defines the animation. This should define what animation, the duration and any additional properties you want to apply to a spin.

.space-image {
  animation: spin 30s linear infinite;
  -webkit-animation: spin 30s linear infinite;
  -moz-animation: spin 30s linear infinite;
}

Write the keyframes that specify what the final position should be for a spin animation:

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Pause on hover

To pause on hover you can use a css selector:

.space-image {
  animation-play-state: running;
  animation: spin 30s linear infinite;
  -webkit-animation: spin 30s linear infinite;
  -moz-animation: spin 30s linear infinite;
}

.space-image:hover {
  animation-play-state: paused;
}

Pause as default, run on hover

To resume on hover you can simply set the animations state to paused:

.space-image {
  animation: spin 40s linear infinite;
  -webkit-animation: spin 40s linear infinite;
  -moz-animation: spin 40s linear infinite;
  animation-play-state: running;
}

.space-image:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

Height of container

Because the image is rotating, you need to make sure the container has enough height. A 650px image will need 920px height and width to allow the square image enough room to rotate.

One way is to set a .full-screen sass class that accounts for this:

.full-screen {
  min-height: calc(100vh);
  max-height: 1400px;
}

Here the max-height is 1400px, which accounts for the height of elements above the image. This will make sure the page has enough height (for rendering a background etc) for the rotation.

CSS Selectors

Some selectors you can use with the .class-name:selector syntax:

:hover - when the mouse cursor hovers over the element
:focus - which reacts to user input
:active - when the element is clicked
:target - when a different element is clicked

SVG images in v-img

If you want to use an svg <v-img> you need to set the aspect-ratio, max-height and max-width props. This is because <v-img> uses background-image to render the underlying image.

<v-img
  src="../assets/images/space-wheel.svg"
  aspect-ratio="1"
  max-height="650px"
  max-width="650px"
  class="d-flex align-start justify-start space-image"
  position="top"
></v-img>

SCSS/SASS

Getting started guide

https://alistapart.com/article/getting-started-with-sass/

Using variables

https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files

Dynamic Appbar

We can set two different appbars which can change on the viewport.

You should use <v-row>, <v-col> and <v-spacer> inside the <v-app-bar>. You can use the helper classes hidden-sm-and-down etc to display a row for different viewports.

Example of a dynamic appbar: https://git.panaetius.co.uk/web-development/base-examples/src/branch/develop/src/components/Appbar.vue

Subcomponents

You can use <v-toolbar-title> for a title in the appbar:

<v-toolbar-title class="title">
  <p class="mb-0">Savvy Firebase Tutorial</p>
</v-toolbar-title>

You can use <v-app-bar-nav-icon> for a hamburger button (for mobile layouts):

<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>

To Do

Organise these notes! Document all up and move into firebase.md

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

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)

Tomorrow:

Finish appbar (modal to popout)

24 KiB Raw Permalink Blame History

Temp notes

React to height change

Get current height of page

Get current height of an object

Using <v-content> to fill the page

v-for for n times repetition

Images as backgrounds

SVG elements as a background

Images that autoscale (zoom)

Using envato EPS

Transparent appbar

Stripe appbar menu

React to height change

Get current height of page

Get current height of an object

Using <v-content> to fill the page

v-for for n times repetition

Images as backgrounds

SVG elements as a background

Images that autoscale (zoom)

Using envato EPS

Fullscreen image as a background

Transparent appbar

Adjust image position to match that of dynamic appbar

Using CSS media queries for dynamic classes

Fullscreen

On mobile breakpoint

Stripe appbar menu

Getting sass to talk to javascript

Using Vuetify Sass variables for dynamic css

Using SASS variables for viewport

Using custom scss files

Import scss files

Fontawesome in Vue

Installation

Bootstrap new package

Rotate image 360 degrees

Pause on hover

Pause as default, run on hover

Height of container

CSS Selectors

SVG images in v-img

SCSS/SASS

Getting started guide

Using variables

Dynamic Appbar

Subcomponents

To Do

24 KiB

Raw Permalink Blame History

Using `<v-content>` to fill the page

Using `<v-content>` to fill the page