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

add ref to cards

Browse Source
This commit is contained in:
André Weller
2019-05-14 23:32:59 +02:00
parent a7347034e6
commit 359fe8f078
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/Card.vue
View File

@@ -1,9 +1,12 @@
<template lang="pug"> <template lang="pug">
.card(:class="checkReference") .card(:class="checkReference")
a.card--link(:href="url" :target='title' rel='noreferrer') //- a.card--link(:href="url" :target='title' rel='noreferrer')
p.card--title {{title}} p.card--title {{title}}
p.card--description {{desc}} p.card--description {{desc}}
a(:href="url" :target='title' rel='noreferrer') Visit Website div
a.card--reference(@click='createCopyUrl') Copy reference
br
a(:href="url" :target='title' rel='noreferrer') Visit website
</template> </template>
<script> <script>
@@ -20,11 +23,15 @@ export default {
const query = this.$route.hash.substring(1); const query = this.$route.hash.substring(1);
const title = this.$props.title.replace(/ /g, ''); const title = this.$props.title.replace(/ /g, '');
console.log(title.toLowerCase(), query)
return { return {
'card--active': title.toLowerCase() === query 'card--active': title.toLowerCase() === query
} }
} }
},
},
methods:{
createCopyUrl() {
this.$router.push(`${this.$router.history.current.path}#${this.$props.title.replace(/ /g, '').toLowerCase()}`)
} }
}, },
} }
@@ -45,6 +52,10 @@ export default {
border: 1px solid red !important; border: 1px solid red !important;
} }
&--reference {
cursor: pointer;
}
&--link { &--link {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -53,12 +64,12 @@ export default {
bottom: 0; bottom: 0;
} }
&:hover { // &:hover {
transform: scale(1.002); // transform: scale(1.002);
background: #008190; // background: #008190;
cursor: pointer; // cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06); // box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06);
} // }
&--title { &--title {
font-weight: 900; font-weight: 900;