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

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

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

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

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

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

@@ -1,19 +1,47 @@
<template>
<nav class="navbar-brand">
<a class="navbar-item" href="/">
<strong class="is-size4">
Animal Rescue League
</strong>
</a>
<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>
</a>
<div id="navbar" class="navbar-menu">
<div class="navbar-start">
</div>
<nav class="navbar container" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<strong class="is-size-4">Animal Rescue League</strong>
</a>
<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>
</a>
</div>
<div id="navbar" class="navbar-menu">
<div class="navbar-start">
<router-link to="/" class="navbar-item">Home</router-link>
<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>
</nav>
</div>
</div>
</nav>
</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 router from './router'
import './../node_modules/bulma/css/bulma.css'
import blurify from './../node_modules/blurify'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(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>
</section>
<img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png">
</div>
</template>
<script>
export default {
name: 'home',
components: {}
components: {},
created() {
this.$blurify({
images: document.querySelectorAll('.blurify')
});
}
}
</script>
</script>
<style lang="scss" scoped>
.hero {
text-align: center;
@@ -39,11 +44,13 @@ export default {
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
padding: 40px 0 20px 0;
font-size: 60px;
color: white
}
.subtitle {
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
font-size: 30px;
color: white;
}
.button-block {