Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-14 14:13:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust how unavailable item banner is displayed

Browse source 
Make item prices more realistic for testing
This commit is contained in:
Michał Gdula 2024-05-16 21:44:02 +01:00
parent 5afe4386d6
commit d1b35005d4
4 changed files with 62 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

25
front/src/components/BasketItem.svelte
View file

@ -25,13 +25,12 @@
<div class="container" >
<div class="basket-item" class:basket-item-availability={!item.data.availability}>
{#if !item.data.availability}
<div class="basket-item-notice">
<SealWarning weight="fill" />&nbsp;&nbsp;<span>Item is no-longer for sale</span>
</div>
{/if}
{#if !item.data.availability}
<div class="basket-item-notice">
<SealWarning weight="fill" />&nbsp;&nbsp;<span>Item is no-longer for sale</span>
</div>
{/if}
<div class="basket-item">
{#if item.data.images && item.data.images[0]}
<img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
{:else}
@ -71,6 +70,10 @@
<style lang="scss">
@import "../styles/vars";
.container {
overflow: hidden;
}
.basket-item {
position: relative;
@ -80,19 +83,11 @@
border-radius: $border-radius-normal;
overflow: hidden;
&.basket-item-availability {
padding-top: 30px;
}
}
.basket-item-notice {
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;