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

Merge branch 'karn-dev' into features/resources-store

Browse Source
This commit is contained in:
Unknown
2019-08-22 20:53:40 +02:00
parent 71150c71ab b0d69bf8ef
commit aa03bed2fb
9 changed files with 265 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/Card.vue
View File

@@ -1,58 +1,25 @@
<template lang="pug">
.card(:class="active")
p.card--title {{title}}
p.card--description {{desc}}
.card(:class="{ cardActive: isActive }")
p.card--title {{resource.title}}
p.card--description {{resource.desc}}
.card--links
a.card--reference(@click='createCopyUrl') Copy
a.card--reference(@click='createCopyUrl(resource)') Copy
br
a.card--target(:href="url" :target='title' rel='noreferrer') Open
a.card--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
</template>
<script>
export default {
props: ['title', 'desc', 'url'],
data(){
return {
active:''
}
},
methods: {
async createCopyUrl() {
try {
let currentPath = this.$router.history.current.path
let reference = this.createReferenceTag(this.$props.title)
await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
this.$router.push(`${currentPath}?card=${reference}`)
} catch (e) {
console.error(e);
}
},
createReferenceTag(tag){
return tag.replace(/ /g, '').toLowerCase()
},
checkReference(){
const query = this.$route.query.card
const title = this.createReferenceTag(this.$props.title)
this.active = title === query
? 'card--active'
: ''
},
},
mounted() {
this.checkReference();
},
watch: {
'$route': function() {
this.checkReference();
}
}
props: ['resource', 'isActive', 'createCopyUrl'],
}
</script>
<style lang="scss" scoped>
.cardActive {
box-shadow:inset 0px 0px 0px 3px #08e5ff;
}
.card {
background: #2D3748;
border-radius: .3rem;
@@ -62,10 +29,6 @@ export default {
flex-direction: column;
position: relative;
&--active {
box-shadow:inset 0px 0px 0px 3px #08e5ff;
}
&--reference {
cursor: pointer;
}

40
components/Sidebar.vue
View File

@@ -4,19 +4,34 @@
template(v-for='category in categories')
//- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }}
nuxt-link(:to='category.slug') {{ category.title }}
div(class="toggleWrapper" @click="toggleCardsShown")
div(class="viewToggle" :class="{active: cardsShown}") Cards
div(class="viewToggle" :class="{active: !cardsShown}") Table
</template>
<script>
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 = this.$store.getters['data/resources'].map(({ title, slug }) => ({ title, slug }))
},
methods: {
...mapMutations({
toggleCardsShown: "Sidebar/toggleCardsShown"
})
}
}
};
</script>
<style lang="scss" scoped>
@@ -29,6 +44,27 @@ export default {
padding: 0.5rem 1rem 0.5rem 1rem;
font-weight: 600;
}
div {
cursor: pointer;
}
.toggleWrapper {
display: grid;
grid-template-columns: 1fr 1fr;
width: min-content;
border: 3px;
border-color: #08e5ff;
border-style: solid;
border-radius: 0.5rem;
overflow: hidden;
}
.viewToggle {
padding: 0 0.2rem;
color: #008190;
}
.active {
background-color: #08e5ff;
color: #232331;
}
}
@media (max-width: 400px) {

38
components/TableHead.vue Normal file
View File

@@ -0,0 +1,38 @@
<template lang="pug">
tr.tableHead
th.tableHead--title {{title}}
th.tableHead--description {{desc}}
th.tableHead--links {{url}}
</template>
<script>
export default {
props: ["title", "desc", "url"],
};
</script>
<style lang="scss" scoped>
.tableHead {
background: #2d3748;
padding: 0.25rem;
transition: 0.2s ease-in-out;
width: 1fr;
display: grid;
grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--title {
color: #008190;
}
&--description {
color: #008190;
line-height: 1.3;
}
&--links {
cursor: pointer;
color: #008190;
}
}
</style>

82
components/TableRow.vue Normal file
View File

@@ -0,0 +1,82 @@
<template lang="pug">
tr.tableRow(:class="{ rowActive: isActive }")
td.tableRow--title {{resource.title}}
td.tableRow--description {{resource.desc}}
td.tableRow--links
tr
td
a.tableRow--reference(@click='createCopyUrl(resource)') Copy
td
a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
</template>
<script>
export default {
props: ['resource', 'isActive', 'createCopyUrl'],
};
</script>
<style lang="scss" scoped>
.rowActive {
box-shadow:inset 0px 0px 0px 3px #08e5ff;
}
.tableRow {
background: #2d3748;
padding: 0.25rem;
transition: 0.2s ease-in-out;
width: 1fr;
display: grid;
grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--title {
color: white;
}
&--description {
color: #008190;
line-height: 1.3;
margin-right: 10px;
}
&--links {
cursor: pointer;
tr {
width: 100%;
display: flex;
justify-content: space-between;
}
img {
width: 1rem;
margin-left: 0.5rem;
}
&:hover::before {
opacity: 0.5;
}
}
&--reference {
&::before {
position: absolute;
height: 0.9rem;
width: 0.9rem;
margin-left: -1.15rem;
margin-top: -0.1rem;
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
}
}
&--target {
&::before {
position: absolute;
height: 0.9rem;
width: 0.9rem;
margin-left: -1.15rem;
margin-top: -0.1rem;
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
}
}
}
</style>