settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

refactoring: split into CollectQuote

Browse Source
This commit is contained in:
Settel 2021-10-15 20:45:41 +02:00
parent 3d4ab372e8
commit 8815cddebf
2 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/components/CollectQuote.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="collect-quote__container">
<div class="collect-quote__quote">
{{ quote.quote }}
{{ quote.quote }}
</div>
<div class="collect-quote__actions">
<div class="collect-quote__icon collect-quote__icon-edit" @click="edit" />
<div class="collect-quote__icon collect-quote__icon-delete" @click="remove" />
</div>
</div>
</template>
<script>
export default {
props: ['quote'],
methods: {
edit() {
console.log('edit')
},
remove() {
console.log('remove')
},
},
}
</script>
<style lang="scss">
.collect-quote {
&__container {
display: flex;
}
&__quote {
color: #ffffff;
}
&__actions {
display: flex;
margin: 0 32px;
}
&__icon {
width: 48px;
height: 48px;
margin-left: 16px;
border: 1px solid #ffffff;
border-radius: 8px;
text-align: center;
line-height: 48px;
font-size: 32px;
color: #ffffff;
&:hover {
background-color: #6040c0;
}
&-edit::after {
content: '✎';
}
&-delete::after {
content: '🗑';
}
}
}
</style>

18
client/src/components/CollectQuotes.vue
View File

@ -1,15 +1,7 @@
<template> <template>
<div class="collect-quotes"> <div>
<CollectQuotesExplain /> <CollectQuotesExplain />
<div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id"> <CollectQuote v-for="quote in quotes" :key="quote.id" :quote="quote" />
<div class="collect-quotes__quote">
{{ quote.quote }}
</div>
<div class="collect-quotes__actions">
<div class="collect-quotes__icon collect-quotes__icon-edit" />
<div class="collect-quotes__icon collect-quotes__icon-delete" />
</div>
</div>
</div> </div>
</template> </template>
@ -26,9 +18,3 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.collect-quotes {
color: #ffc0c0;
}
</style>