css

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;
 }

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;
 
 }

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>

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