Tilbudsavis

6f8221b3 · Ingrid Martinsheimen Egge · 00d70c49 · 6f8221b3 · 6f8221b3 · 6f8221b3
Commit 6f8221b3 authored 1 year ago by Ingrid Martinsheimen Egge
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,10 @@ import Navbar from "@/components/Navbar.vue";
 <template>
    <Navbar></Navbar>
-  <RouterView />
+    <body>
+    <RouterView />
+    </body>
 </template>
 <style scoped>
@@ -21,6 +24,9 @@ header {
  margin: 0 auto 2rem;
 }
+body {
+    padding-bottom: 2em;
+}
 nav {
  width: 100%;
  font-size: 12px;

--- a/src/components/GroceryOffers.vue
+++ b/src/components/GroceryOffers.vue
+<template>
+    <div>
+        <h2>Tilbudaviser</h2>
+    </div>
+  <div id="list">
+      <ul>
+          <li>
+              <a href="https://etilbudsavis.no/REMA-1000"  target="_blank" rel="noopener noreferrer">
+              <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2F9tf8gmfaGBLcbjK3rhBlW&w=300&sign=Zq9DkNZRVTrnWUEb8C9driKqS1InuTFi_5b1XbIKTnM" alt="Rema 1000 logo"></a>
+          </li>
+          <li>
+              <a href="https://etilbudsavis.no/KIWI"  target="_blank" rel="noopener noreferrer">
+              <img src = "https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FG3XDq4dn6xRNyk-1gOZgb&w=300&sign=HIt49jOaHo0lFALYmhFwY3UWt8zkPkVtVkLaCVxVcE0" alt="Kiwi logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/Bunnpris/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fetaproduction%2Fimg%2Flogo%2Fpageflip%2F00ibuh349ezgcwz3.png&w=300&sign=ryffYtZjdRMOoL63Nm5VY4YoigiOMaI5Lgrnb0hZhkE"  alt="Bunnpris logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/MENY/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FgMULu5EGk-l57npG294B7&w=300&sign=hMQoYjgxL7F0XlPGCoZJXny-him1emA8RMoO-5W3lXU" alt="Meny logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/Coop-Mega/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2Fk5LYCCJcujAJedeFOFRaj&w=300&sign=Gb0VlcY80QDtjFUs50oOOMPGhwUCOPVzBQ4bw2HpQ0Q" alt="Coop mega logo"></a></li>
+        <li>
+          <a href="https://etilbudsavis.no/Coop-Extra" target="_blank" rel="noopener noreferrer">
+            <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FnmLKqrg-wVDfXHyI_iS9D&w=300&sign=AaqQeyqkDZi_3r4xWetXNNTGRvvz3w74jexExHFhjBA" alt="Coop extra logo">
+          </a>
+        </li>
+      </ul>
+  </div>
+</template>
+<script>
+export default {
+    name: "GroceryOffers"
+}
+</script>
+<style scoped lang="scss">
+div {
+    display: flex;
+    justify-content: center;
+}
+h3{
+    padding-top:1em;
+}
+li{
+    padding:1em;
+}
+img{
+    width: 10em;
+}
+ul {
+    padding:0;
+    text-align: center;
+    list-style-type: none;
+    width: 100%;
+}
+@media (min-width: 800px){
+  ul{
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+  li {
+      padding:0.3em;
+      align-items: center;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
 <script>
  import { useAuthStore } from "@/stores/authStore.js";
  import { mapState } from 'pinia'
+  import GroceryOffers from "@/components/GroceryOffers.vue";
  export default {
+      components: {GroceryOffers},
    data() {
      return {
      }
@@ -33,6 +35,8 @@
          <p id="tips-text">Her kommer tips du kanskje kan ha nytte av, trykk på meg for å gå til neste tips!</p>
        </div>
+          <grocery-offers></grocery-offers>
      </div>
  </main>