diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 04c0311f1be09b00b8bef4704820e4a2a650b684..3859ed5eec389da34e7dc091691195223e2cfba9 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -2,13 +2,13 @@
<div v-if="visible" id="popup">
<div id="exitBtn" @click="close"><Icon icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
<h2>{{ fridgeItem }}</h2>
- <p>{{sliderValue}}</p>
+ <p>{{sliderValue}} %</p>
<label for="slider">Mengde tatt av varen:</label>
- <input type = "range" id = "slider" name = "slider" min="0" max="100" v-model="sliderValue">
+ <input type = "range" id = "slider" name = "slider" min="0" max="70" v-model="sliderValue">
<div id="buttons">
- <button @click="close">Ble kastet 🧺</button>
+ <button @click="close">Ble kastet ðŸ—‘ï¸ </button>
<button id="eatenBtn" @click="close" >Ble spist 😋</button>
</div>
</div>
@@ -29,7 +29,7 @@ export default {
data() {
return {
visible:true,
- sliderValue: 50
+ sliderValue: 0
}
},
methods:{
@@ -76,6 +76,7 @@ export default {
#buttons {
justify-content: center;
display: flex;
+ width: 100%;
margin: 1em;
margin-top: 3em;
}
@@ -88,10 +89,11 @@ export default {
}
button {
- padding: .6em 2.4em;
- margin:.3em;
+ qpadding: .2em 2.4em;
+ margin:.1em;
font-weight: bolder;
- font-size: larger;
+ width: 40%;
+
background-color: base.$red;
color:white;
}
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index d93b7c93333d0d59e849a494bde2126d1978e1f3..b181164ac53d5aa5db20011198273055153d6a08 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -2,8 +2,8 @@
<div id ="item">
<img src="src/components/icons/logo.png" alt="">
<div id="itemInfo">
- <h1>{{ itemName }} {{ quantity }}{{quantityUnit}}</h1>
- <h2>{{expirationText}}</h2>
+ <p id="fridgeItemName">{{ itemName }} {{ quantity }}{{quantityUnit}}</p>
+ <p :style="{color:expirationTextColor}">{{expirationText}}</p>
</div>
<div @click="appleBtnPressed">
<Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
@@ -25,7 +25,15 @@ export default {
return 'black';
},
iconSize() {
- return '4rem'
+ return '3rem'
+ },
+ expirationTextColor(){
+ if(this.expirationText.split("Utgikk").length===2){
+ return '#EE6D6D';
+ }
+ else{
+ return 'black';
+ }
},
expirationText() {
const expirationDays = this.getDateDifference();
@@ -96,9 +104,16 @@ export default {
justify-content: space-between;
}
+#fridgeItemName {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
img {
- width: 4rem;
+ width: 3rem;
+ border-radius: 50%;
+ background-color: #00663C;
margin-right:.6em;
}
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index cece84512a952516f6d15ef941ed9f20a157c9f8..f3abaf05e64683ea5039d4ab5ee1078ce50ddeb6 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -8,7 +8,7 @@
</RouterLink>
</li>
<li>
- <RouterLink :to="'/'" :aria-label="'link to fridge page'">
+ <RouterLink :to="'/myFridge'" :aria-label="'link to fridge page'">
<Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
</RouterLink>
</li>
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index 360348e4c2cbf688e61ed877222d0067c966db9f..d92ef9180a1a3d8764f4e81e50e02e7bf19ecd6b 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -5,13 +5,15 @@
<div id = "itemContainer">
<FridgeItem v-for="item in fridgeStore.items"></FridgeItem>
<!--<FridgeItem v-for="item in fridgeItems" :key="item.id" fridgeItem="item"></FridgeItem>-->
- <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="21.04.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="14.02.23"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="30.02.23"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="28.04.23"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="29.04.23"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="30.04.26"></FridgeItem>
</div>
<div id="addItemBtn-container">
@@ -74,8 +76,15 @@ main {
background-color: base.$white;
}
+h1 {
+ width:100%;
+ padding-left: 1em;
+ font-weight: bold;
+}
+
#itemContainer {
background-color: base.$grey;
+ padding-bottom: 5em;
}
#addItemBtn {
@@ -90,8 +99,13 @@ main {
}
#addItemBtn-container {
- display:flex;
- justify-content: right;
+
+ padding-bottom: 9em;
+
+ z-index: 9999;
+ position: fixed;
+ bottom: 15px;
+ right: 1em;
}
</style>
\ No newline at end of file