diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue index 6897969..a809847 100644 --- a/src/components/Appbar.vue +++ b/src/components/Appbar.vue @@ -6,6 +6,7 @@ hide-on-scroll color="rgba(93.3%, 93.3%, 93.3%, 0.5)" v-if="!this.$store.getters.fullScreen" + style="z-index: 15;" > @@ -19,11 +20,11 @@ - + @@ -31,6 +32,21 @@ + @@ -59,17 +75,17 @@ export default { title: "Random", dropdown: "random", content: Random + }, + { + title: "Triangle", + routerLink: { name: "Triangle" } + }, + { + title: "Playground", + routerLink: { name: "Playground" } } ] }; - }, - methods: { - onOpenDropdown() { - console.log("onOpenDropdown"); - }, - onCloseDropdown() { - console.log("onCloseDropdown"); - } } }; diff --git a/src/main.js b/src/main.js index 34c5b26..d323578 100644 --- a/src/main.js +++ b/src/main.js @@ -12,7 +12,8 @@ import AOS from "aos"; import "aos/dist/aos.css"; // Stripe Appbar Menu import VueStripeMenu from "vue-stripe-menu"; -import "vue-stripe-menu/dist/vue-stripe-menu.css"; +// import "vue-stripe-menu/dist/vue-stripe-menu.css"; +import "./scss/appbar.scss" Vue.config.productionTip = false; Vue.component("video-background", VideoBackground); diff --git a/src/scss/variables.scss b/src/scss/_variables.scss similarity index 100% rename from src/scss/variables.scss rename to src/scss/_variables.scss diff --git a/src/scss/appbar.scss b/src/scss/appbar.scss new file mode 100644 index 0000000..fd51a88 --- /dev/null +++ b/src/scss/appbar.scss @@ -0,0 +1,10 @@ +@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"; diff --git a/src/views/Playground.vue b/src/views/Playground.vue index 68af380..8b64893 100644 --- a/src/views/Playground.vue +++ b/src/views/Playground.vue @@ -9,7 +9,7 @@ diff --git a/temp.md b/temp.md index 15073df..938a12d 100644 --- a/temp.md +++ b/temp.md @@ -207,6 +207,213 @@ Have examples of both of these to refer back to^ ## Stripe appbar menu +## 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: + +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 + +``` + +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);` + +### 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: + +```javascript +getBackgroundWidth() { + var background = document.querySelector("#backgroundsvg"); + this.backgroundWidth = background.clientWidth; +} +``` + +Documentation for `querySelector`: + +You can see all the methods and properties for document here: + + +## Using `` 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 `` can use the `fill-height` prop. + +## v-for for n times repetition + +You can repeat things n times using a `v-for`: + +```html + +``` + +Use `` +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. + + +Demo: + +You can use aditional controls to set how the image should scale itself: + + +Cropping images with `object-fit: cover;` + + +### 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: + + +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;` + - + +## 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 (using clippath on an image with an overlay colour?) +Do Liquidlight (using big headers) +Do (use 100vh on background image as in playground with transparent appbar) + +Position a triangle top right as in + +And position random blobs as in + +More images: + +Do buttons: + +Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify) + + +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: + + +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^ + +## Stripe appbar menu + Install with yarn: `yarn add vue-stripe-menu` @@ -264,6 +471,8 @@ Then in the html you should create the appbar layout you need: ``` +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: ```css @@ -289,3 +498,59 @@ To control the width, you should set the `width` in the css in the components th 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. + +```javascript +{ + title: "Playground", + routerLink: { name: "Playground" } +} +``` + +Then you can use a `` component with a `v-if="data.item.routerLink"`: + +```html + + +``` + +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. + + + +```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: + +```javascript +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.