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

18
components/Sidebar.vue
View File

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

16
pages/_category.vue
View File

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