wip

src/components/VinlottisPage.vue

@@ -19,39 +19,19 @@
 
     </section>
     
-    <div class="container">
-      <!-- <span> Scroll for å annen gøy statistikk</span> -->
-      
+    <section class="container">
+      <p class="scroll-info"> | Scroll for å se annen gøy statistikk</p>
 
-      
-      <section class="header-and-notification">
-          <h1 @click="startCountdown">Vinlotteri</h1>
-          <img
-            src="/public/assets/images/notification.svg"
-            alt="Notification-bell"
-            @click="requestNotificationAccess"
-            class="notification-request-button"
-            role="button"
-            v-if="notificationAllowed"
-          />
-      </section>
-
-
-      <div class="to-lottery-container">
-        <a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
-      </div>
+      <Highscore class="highscore"/>
+      <TotalBought class="total-bought" />
       
       <section class="chart-container">
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </section>
       
-      
-      <TotalBought class="total-bought" />
-      <Vipps class="vipps-icon" />
-      <Highscore class="highscore"/>
       <Wines class="wines-container" />
-    </div>
+    </section>
     
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
@@ -199,126 +179,46 @@ h1 {
 .container{
   display: flex;
   flex-direction: column;
-  
-  .header-and-notification{
-    display: flex;
-    flex-direction: row;
-    margin: auto;
-  }
-
-  .vipps-icon{
-    margin: 1em;
-  }
 
   @include tablet {
-    margin: .5em;
     .chart-container {
       display: flex;
       width: 100%;
     }
 
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top"
-                         "top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top"
-                         "middle-bot-left middle-bot-left middle-bot-right"
-                         "bot-left bot-right bot-right";
+    grid-template-columns: repeat(12, 1fr);
 
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container{
-      grid-area: top-bot;
+    .scroll-info {
+      grid-column: 3 / -3;
     }
 
     .chart-container {
-      grid-area: middle-top;
+      grid-column: 3 / -3;
     }
 
     .total-bought {
-      grid-area: middle-bot-left;
+      grid-column: 3 / -3;
     }
 
     .highscore {
-      border-top: 1px solid rgb(237, 237, 237);
-      grid-area: bot-left;
+      grid-column: 3 / -3;
       align-self: baseline;
     }
 
     .wines-container {
-      border-top: 1px solid rgb(237, 237, 237);
-      padding-left: 1em;
-      border-left: 1px solid rgb(237, 237, 237);
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      padding-left: 1em;
-      align-self: center;
-      grid-area: middle-bot-right;
-      border-left: 1px solid rgb(237, 237, 237);
+      grid-column: 3 / -3;
     }
   }
 
-  @include desktop {
+  // @include desktop {
 
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top top-top"
-                         "top-bot top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top middle-top"
-                         "middle-bot middle-bot middle-bot aside"
-                         "bot-left bot-right bot-right aside";
-    grid-gap: 1em;
-    align-items: center;
-
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container {
-      grid-area: top-bot;
-    }
-
-    .chart-container {
-      grid-area: middle-top;
-    }
-
-    .total-bought {
-      grid-area: middle-bot;
-      border-bottom: 1px solid rgb(237, 237, 237);
-    }
-
-    .highscore {
-      border: none;
-      grid-area: bot-left;
-    }
-
-    .wines-container {
-      border: none;
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      grid-area: aside;
-      padding-left: 3em;
-      border-left: 1px solid rgb(237, 237, 237);
-    }
-  }
   
-  @include widescreen {
-    width: 70%;
-    max-width: 1800px;
-    margin: auto;
-
-    .vipps-icon {
-      padding-left: 6em;
-    }
-  }
+  // }
+  
+  // @include widescreen {
+  
+  // }
 }