From a082bfb4c050462ccaa55ef060317a78b5fd3019 Mon Sep 17 00:00:00 2001 From: dtomlinson Date: Thu, 9 Apr 2020 01:05:22 +0100 Subject: [PATCH] adding latest --- firebase.md | 16 ++- src/assets/images/background.svg | 9 ++ src/components/Appbar.vue | 19 +++- src/router/index.js | 12 +++ src/views/Backgrounds.vue | 162 +++++++++++++++++++++++++++++ src/views/Playground.vue | 41 ++++++++ src/views/Triangle.vue | 168 ++++++++++++++++--------------- src/views/forms/LoginForm.vue | 2 +- 8 files changed, 344 insertions(+), 85 deletions(-) create mode 100644 src/assets/images/background.svg create mode 100644 src/views/Backgrounds.vue create mode 100644 src/views/Playground.vue diff --git a/firebase.md b/firebase.md index b164b02..fc64a56 100644 --- a/firebase.md +++ b/firebase.md @@ -919,7 +919,7 @@ If you set a row to use more than 12 columns, it will overfill on to the next li - + ## CSS Spacing @@ -1007,3 +1007,17 @@ Using the `:class` prop: :class="alignOnViewport" > ``` + +## SVG + +### Viewbox + + + +Viewbox is an attribute on the `` element and has 4 components: x, y, height, width. + +The x and y set the coordinate system to use for the top left corner of the viewport. Simple scaling can be done by setting these to 0,0, but you could set them to something else (like central) to make drawing circles using radius easier, or for easier transforming/rotating. + +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. diff --git a/src/assets/images/background.svg b/src/assets/images/background.svg new file mode 100644 index 0000000..3b1c11a --- /dev/null +++ b/src/assets/images/background.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue index ffc9baf..d158969 100644 --- a/src/components/Appbar.vue +++ b/src/components/Appbar.vue @@ -3,6 +3,7 @@ @@ -16,7 +17,23 @@ - + +

+ Playground +

+ + +

+ Backgrounds +

+ +

Triangle

diff --git a/src/router/index.js b/src/router/index.js index 2829cc8..0c14f5a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -36,6 +36,18 @@ const routes = [ name: "Triangle", component: () => import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue") + }, + { + path: "/backgrounds", + name: "Backgrounds", + component: () => + import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue") + }, + { + path: "/playground", + name: "Playground", + component: () => + import(/* webpackChunkName: "playground" */ "../views/Playground.vue") } ]; diff --git a/src/views/Backgrounds.vue b/src/views/Backgrounds.vue new file mode 100644 index 0000000..d16fab3 --- /dev/null +++ b/src/views/Backgrounds.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/views/Playground.vue b/src/views/Playground.vue new file mode 100644 index 0000000..e34f5e3 --- /dev/null +++ b/src/views/Playground.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/views/Triangle.vue b/src/views/Triangle.vue index 22f949b..9dff452 100644 --- a/src/views/Triangle.vue +++ b/src/views/Triangle.vue @@ -1,92 +1,96 @@