dtomlinson/web-dev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest tutorials

Browse Source
This commit is contained in:
dtomlinson
2020-02-27 01:15:04 +00:00
parent 4f666020c1
commit fbaefd7d20
7 changed files with 79 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tutorials/events-app/package.json
View File

@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"blurify": "^1.2.0",
"bulma": "^0.8.0", "bulma": "^0.8.0",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"vue": "^2.6.11", "vue": "^2.6.11",

31
tutorials/events-app/src/App.vue
View File

@@ -1,31 +1,24 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <Nav />
<router-link to="/">Home</router-link> | <router-view/>
<router-link to="/about">About</router-link>
</div>
<router-view />
</div> </div>
</template> </template>
<script>
import Nav from './components/partials/Nav.vue';
export default {
name: 'App',
components: {
Nav
}
}
</script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style> </style>

2
tutorials/events-app/src/components/HelloWorld.vue
View File

@@ -37,7 +37,7 @@
export default { export default {
name: 'HelloWorld', name: 'HelloWorld',
props: { props: {
msg: String msg: String,
} }
} }
</script> </script>

60
tutorials/events-app/src/components/partials/Nav.vue
View File

@@ -1,19 +1,47 @@
<template> <template>
<nav class="navbar-brand"> <nav class="navbar container" role="navigation" aria-label="main navigation">
<a class="navbar-item" href="/"> <div class="navbar-brand">
<strong class="is-size4"> <a class="navbar-item" href="/">
Animal Rescue League <strong class="is-size-4">Animal Rescue League</strong>
</strong> </a>
</a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> </a>
</a> </div>
<div id="navbar" class="navbar-menu"> <div id="navbar" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<router-link to="/" class="navbar-item">Home</router-link>
</div> <router-link to="/about" class="navbar-item">About</router-link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">
<strong>Sign In</strong>
</a>
</div>
</div> </div>
</nav> </div>
</div>
</nav>
</template> </template>
<script>
export default {
name: 'Nav'
}
</script>
<style lang="scss">
nav {
margin-top: 25px;
margin-bottom: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active{
color: #d88d00;
}
}
}
</style>

6
tutorials/events-app/src/main.js
View File

@@ -2,10 +2,16 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import './../node_modules/bulma/css/bulma.css' import './../node_modules/bulma/css/bulma.css'
import blurify from './../node_modules/blurify'
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
Object.defineProperty(Vue.prototype, "$blurify", { value: blurify})

13
tutorials/events-app/src/views/Home.vue
View File

@@ -15,16 +15,21 @@
</div> </div>
</div> </div>
</section> </section>
<img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png">
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'home', name: 'home',
components: {} components: {},
created() {
this.$blurify({
images: document.querySelectorAll('.blurify')
});
}
} }
</script>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hero { .hero {
text-align: center; text-align: center;
@@ -39,11 +44,13 @@ export default {
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6); text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
padding: 40px 0 20px 0; padding: 40px 0 20px 0;
font-size: 60px; font-size: 60px;
color: white
} }
.subtitle { .subtitle {
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7); text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
font-size: 30px; font-size: 30px;
color: white;
} }
.button-block { .button-block {

5
tutorials/events-app/yarn.lock
View File

@@ -1662,6 +1662,11 @@ bluebird@^3.1.1, bluebird@^3.5.5:
resolved "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" resolved "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha1-nyKcFb4nJFT/qXOs4NvueaGww28= integrity sha1-nyKcFb4nJFT/qXOs4NvueaGww28=
blurify@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/blurify/-/blurify-1.2.0.tgz#dcff133b546c71dd0146712869d25398e781d6b3"
integrity sha512-ltx+7Gic2gClvzYAV9WLTzoSL2uyTwfViLEzqjT5mgF7yebVwdU/jw4Pj5WYb4m6KgK8mkKzmRRBmCWWS8VTNw==
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0: bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
version "4.11.8" version "4.11.8"
resolved "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f" resolved "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"