Restored App.vue; builds/renders, but...

...no CSS or Bootstrap JS either; the new tree-shaking is nice, but it's shaking out good stuff at this point.
This commit is contained in:
Daniel J. Summers 2018-08-13 20:59:29 -05:00
parent 29a1afbf9a
commit d332e1e701
5 changed files with 76 additions and 30 deletions

4
.gitignore vendored
View File

@ -254,8 +254,10 @@ paket-files/
# Compiled files / application
src/api/build
src/api/MyPrayerJournal.Api/wwwroot/favicon.ico
src/api/MyPrayerJournal.Api/wwwroot/index.html
src/api/MyPrayerJournal.Api/wwwroot/static
src/api/MyPrayerJournal.Api/wwwroot/css
src/api/MyPrayerJournal.Api/wwwroot/js
src/api/MyPrayerJournal.Api/appsettings.development.json
/build
src/*.exe

View File

@ -11,6 +11,9 @@
"apistart": "cd ../api/MyPrayerJournal.Api && dotnet run",
"vue": "vue-cli-service build && cd ../api/MyPrayerJournal.Api && dotnet run"
},
"sideEffects": [
"**/*.css"
],
"dependencies": {
"auth0-js": "^9.7.3",
"axios": "^0.18.0",

View File

@ -1,31 +1,69 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
<template lang="pug">
#app
navigation
#content.container
router-view
vue-progress-bar
toast(ref='toast')
footer
p.text-right.text-muted
| myPrayerJournal v{{ version }}
br
em: small.
#[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] &bull;
#[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] &bull;
#[a(href='https://github.com/bit-badger/myprayerjournal') Developed] and hosted by
#[a(href='https://bitbadger.solutions') Bit Badger Solutions]
</template>
<script>
'use strict'
import Navigation from './components/Navigation.vue'
import { version } from '../package.json'
export default {
name: 'app',
components: {
Navigation
},
data () {
return { version }
},
mounted () {
this.$refs.toast.setOptions({ position: 'bottom right' })
},
computed: {
toast () {
return this.$refs.toast
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
html, body {
background-color: whitesmoke;
}
#nav {
padding: 30px;
body {
padding-top: 60px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
footer {
border-top: solid 1px lightgray;
margin-top: 1rem;
padding: 0 1rem;
}
#nav a.router-link-exact-active {
color: #42b983;
footer p {
margin: 0;
}
a:link, a:visited {
color: #050;
}
.mpj-request-text {
white-space: pre-line;
}
.bg-mpj {
background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
background-image: -webkit-linear-gradient(top, #050, whitesmoke);
background-image: -moz-linear-gradient(top, #050, whitesmoke);
background-image: linear-gradient(to bottom, #050, whitesmoke);
}
</style>

View File

@ -9,7 +9,7 @@ import actions from './action-types'
Vue.use(Vuex)
this.auth0 = new AuthService()
const auth0 = new AuthService()
const logError = function (error) {
if (error.response) {
@ -34,11 +34,11 @@ export default new Vuex.Store({
state: {
user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
isAuthenticated: (() => {
this.auth0.scheduleRenewal()
if (this.auth0.isAuthenticated()) {
auth0.scheduleRenewal()
if (auth0.isAuthenticated()) {
api.setBearer(localStorage.getItem('id_token'))
}
return this.auth0.isAuthenticated()
return auth0.isAuthenticated()
})(),
journal: {},
isLoadingJournal: false

View File

@ -1,3 +1,6 @@
module.exports = {
outputDir: '../api/MyPrayerJournal.Api/wwwroot'
outputDir: '../api/MyPrayerJournal.Api/wwwroot',
css: {
modules: true
}
}