gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update to moving parts for site

Browse Source 
toggle ugly but works
This commit is contained in:
Erin
2019-07-24 21:05:21 -05:00
parent 305d6c5674
commit df95c8f29c
3 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app.html
View File

@@ -5,7 +5,7 @@
</head> </head>
<body {{ BODY_ATTRS }}> <body {{ BODY_ATTRS }}>
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom --> <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script> <!-- <script>
(function (f, a, t, h, o, m) { (function (f, a, t, h, o, m) {
a[h] = a[h] || function () { a[h] = a[h] || function () {
(a[h].q = a[h].q || []).push(arguments) (a[h].q = a[h].q || []).push(arguments)
@@ -19,7 +19,7 @@
})(document, window, '//stats.lost.services/tracker.js', 'fathom'); })(document, window, '//stats.lost.services/tracker.js', 'fathom');
fathom('set', 'siteId', 'KQYXI'); fathom('set', 'siteId', 'KQYXI');
fathom('trackPageview'); fathom('trackPageview');
</script> </script> -->
<!-- / Fathom --> <!-- / Fathom -->
{{ APP }} {{ APP }}
</body> </body>

18
components/Sidebar.vue
View File

@@ -3,20 +3,32 @@
.sidebar .sidebar
template(v-for='category in categories') template(v-for='category in categories')
nuxt-link(:to='category.slug') {{ category.title }} nuxt-link(:to='category.slug') {{ category.title }}
input(type='checkbox' :checked='cardsShown' @change="toggleCardsShown()")
</template> </template>
<script> <script>
import store from '../store.json' import store from '../store.json'
import { mapMutations } from 'vuex'
export default { export default {
data() { data() {
return { return {
categories: [{ slug: '', title: '' }], categories: [{ slug: '', title: '' }],
}
},
computed: {
cardsShown() {
return this.$store.state.Sidebar.cardsShown
} }
}, },
created() { created() {
this.categories = store.map(({ title, slug }) => ({ title, slug })) this.categories = store.map(({ title, slug }) => ({ title, slug }))
} },
methods: {
...mapMutations({
toggleCardsShown: 'Sidebar/toggleCardsShown',
})
}
} }
</script> </script>

16
pages/_category.vue
View File

@@ -1,27 +1,37 @@
<template lang="pug"> <template lang="pug">
div div
h1 {{ category.title }} h1 {{ category.title }}
.cards .cards(v-if="cardsShown")
template(v-for='resource in category.resources') template(v-for='resource in category.resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url') Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
.table(v-if="!cardsShown")
TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
template(v-for='resource in category.resources')
TableRow(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template> </template>
<script> <script>
import store from '../store.json' import store from '../store.json'
import Card from '../components/Card' import Card from '../components/Card'
import TableHead from '../components/TableHead'
import TableRow from '../components/TableRow'
export default { export default {
data () { data () {
return { return {
categoryRouteTitle: this.$route.params.category, categoryRouteTitle: this.$route.params.category,
categories: store, categories: store,
// cardsShown: store.cardsShown,
} }
}, },
computed: { computed: {
cardsShown() {
return this.$store.state.Sidebar.cardsShown
},
category() { category() {
return this.categories.find(category => category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase()) return this.categories.find(category => category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase())
} }
}, },
components: { Card }, components: { Card, TableHead, TableRow },
} }
</script> </script>