KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Use new hearth icon and smaller delete btn.

Browse Source
This commit is contained in:
Kevin
2020-10-26 13:10:45 +01:00
parent f01b58c1b6
commit 554948d67c
1 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/ui/RequestedWineCard.vue
View File

@@ -4,22 +4,25 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="requested-count cursor-pointer" @click="request"> <div class="requested-count cursor-pointer" @click="request">
<span>{{ requestedElement.count }}</span> <span>{{ requestedElement.count }}</span>
<i class="icon icon--heart">{{ locallyRequested ? "💜" : "🤍" }}</i> <i class="icon icon--heart" />
</div> </div>
</div> </div>
</template> </template>
<template v-slot:default> <template v-slot:default>
<button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button small danger"> <button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button small danger width-100">
Slett vinen Slett vinen
</button> </button>
</template> </template>
<template v-slot:bottom> <template v-slot:bottom>
<a aria-role="button" tabindex="0" class="link float-left" @click="request" <div class="float-left request">
:class="{ 'active': locallyRequested }"> <i class="icon icon--heart request-icon"></i>
Anbefal <a aria-role="button" tabindex="0" class="link" @click="request"
</a> :class="{ 'active': locallyRequested }">
Anbefal
</a>
</div>
</template> </template>
</Wine> </Wine>
</template> </template>
@@ -77,26 +80,40 @@ export default {
@import "./src/styles/variables"; @import "./src/styles/variables";
.requested-count { .requested-count {
display: inline-block; display: flex;
align-items: center;
margin-top: -0.5rem; margin-top: -0.5rem;
background-color: rgb(244,244,244); background-color: rgb(244,244,244);
border-radius: 1.1rem; border-radius: 1.1rem;
font-size: 1.1rem; padding: 0.25rem 1rem;
padding-left: 1rem; font-size: 1.25em;
padding-right: 1rem;
span { span {
padding: 0.6rem 0; padding-right: 0.5rem;
padding-right: 0.25rem; line-height: 1.25em;
display: inline-block;
} }
.icon { .icon--heart{
font-style: unset; color: $link-color;
} }
} }
.link .active { .link .active {
border-color: $link-color; border-color: $link-color;
} }
.request {
display: flex;
align-items: center;
&-icon {
font-size: 2rem;
color: $link-color;
}
a {
margin-left: 0.75rem;
}
}
</style> </style>