Page styles re-written and updated!

frontend/components/VirtualLotteryPage.vue

@@ -1,48 +1,60 @@
 <template>
   <div>
-    <h1 class="title">Virtuelt lotteri</h1>
+    <header ref="header">
-    <h2
+      <div class="container">
-      v-if="
+        <div class="left">
-        attendees.length <= 0 &&
+          <h1 class="title">Virtuelt lotteri</h1>
-          winners.length <= 0 &&
+          <ol>
-          attendeesFetched &&
+            <li>Vurder om du ønsker å bruke vår <router-link to="/generate" class="vin-link">loddgenerator</router-link>, eller se <router-link to="/dagens" class="vin-link">dagens fangst.</router-link></li>
-          winnersFetched
+            <li>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri.</li>
-      "
+            <li>Send gjerne melding om fargeønske også.</li>
-    >Her var det lite.. Sikker på at det er en virtuell trekning nå?</h2>
+          </ol>
-    <div class="title-info">
-      <h2>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri</h2>
-      <p>Send gjerne melding om fargeønsker også</p>
-    </div>
 
-    <router-link to="/dagens" class="generate-link" v-if="todayExists">
+          <p>
-      Lurer du på dagens fangst?
+            <span class="vin-link">Følg med på utviklingen</span> og <span class="vin-link">chat om trekningen</span>
-      <span class="subtext generator-link">Se her</span>
+            <i class="icon icon--arrow-left" @click="scrollToContent"></i></p>
-    </router-link>
-
-    <hr />
-
-    <h2>Live oversikt av lodd kjøp i dag</h2>
-    <div class="colors">
-      <div v-for="color in Object.keys(ticketsBought)" :class="color + ' colors-box'" :key="color">
-        <div class="colors-overlay">
-          <p>{{ ticketsBought[color] }} kjøpt</p>
         </div>
+
+        <div class="right">
+          <Vipps :amount="1" />
+        </div>
+      </div>
+    </header>
+
+    <div class="container" ref="content">
+      <WinnerDraw
+        :currentWinnerDrawn="currentWinnerDrawn"
+        :currentWinner="currentWinner"
+        :attendees="attendees"
+      />
+
+      <div class="todays-raffles">
+        <h2>Liste av lodd kjøpt i dag</h2>
+
+        <div class="raffle-container">
+          <div v-for="color in Object.keys(ticketsBought)" :class="color + '-raffle raffle-element'" :key="color">
+            <span>{{ ticketsBought[color] }}</span>
+          </div>
+        </div>
+      </div>
+
+      <Winners :winners="winners" class="winners" :drawing="currentWinner" />
+
+      <div class="container-attendees">
+        <h2>Deltakere ({{ attendees.length }})</h2>
+        <Attendees :attendees="attendees" class="attendees" />
+      </div>
+
+      <div class="container-chat">
+        <h2>Chat</h2>
+        <Chat class="chat" />
       </div>
     </div>
 
-    <WinnerDraw
+    <div class="container wines-container">
-      :currentWinnerDrawn="currentWinnerDrawn"
+      <h2>Dagens fangst</h2>
-      :currentWinner="currentWinner"
+      <Wine :wine="wine" v-for="wine in wines" :key="wine" />
-      :attendees="attendees"
-    />
-
-    <Winners :winners="winners" />
-    <hr />
-    <div class="middle-elements">
-      <Attendees :attendees="attendees" class="outer-attendees" />
-      <Chat class="outer-chat" />
     </div>
-    <Vipps class="vipps" :amount="1" />
   </div>
 </template>
 
@@ -139,6 +151,20 @@ export default {
       }
       this.attendeesFetched = true;
     },
+    scrollToContent() {
+      console.log(window.scrollY)
+      const intersectingHeaderHeight = this.$refs.header.getBoundingClientRect().bottom - 50;
+      const { scrollY } = window;
+      let scrollHeight = intersectingHeaderHeight;
+      if (scrollY > 0) {
+        scrollHeight = intersectingHeaderHeight + scrollY;
+      }
+
+      window.scrollTo({
+        top: scrollHeight,
+        behavior: "smooth"
+      });
+    },
     track() {
       window.ga('send', 'pageview', '/lottery/game');
     }
@@ -146,241 +172,149 @@ export default {
 };
 </script>
 
-<!-- TODO move link styling to global with more generic name -->
 <style lang="scss" scoped>
 @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
-.generate-link {
-  color: #333333;
-  text-decoration: none;
-  display: block;
-  width: 100vw;
-  text-align: center;
-  margin-bottom: 0px;
 
-  @include mobile {
+.container {
-    width: 60vw;
+  width: 80vw;
-    margin: auto;
+  padding: 0 10vw;
-  }
+
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
 }
 
-.vipps-image {
+h2 {
-  width: 250px;
+  font-size: 1.1rem;
-  margin: auto;
+  margin-bottom: 1.75rem;
-  display: block;
-  margin-top: 30px;
 }
 
-.generator-link {
+header {
-  font-weight: bold;
+  background-color: $primary;
-  border-bottom: 1px solid $link-color;
+  padding-bottom: 3rem;
-}
+  margin-bottom: 3rem;
-</style>
 
-<style lang="scss" scoped>
+  .left {
-@import "../styles/global.scss";
+    grid-column: 1 / 4;
-@import "../styles/variables.scss";
+    margin-right: 1rem;
-@import "../styles/media-queries.scss";
-.color-selector {
-  margin-bottom: 0.65rem;
-  margin-right: 1rem;
-
-  @include desktop {
-    min-width: 175px;
-  }
-
-  @include mobile {
-    max-width: 25vw;
-  }
-
-  .active {
-    border: 2px solid unset;
-
-    &.green {
-      border-color: $green;
-    }
-    &.blue {
-      border-color: $dark-blue;
-    }
-    &.red {
-      border-color: $red;
-    }
-    &.yellow {
-      border-color: $dark-yellow;
-    }
-  }
-
-  button {
-    border: 2px solid transparent;
-    display: inline-flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    height: 2.5rem;
-    width: 2.5rem;
-
-    // disable-dbl-tap-zoom
-    touch-action: manipulation;
 
     @include mobile {
-      margin: 2px;
+      grid-column: 1 / 5;
+      margin-right: 0;
+    }
+  }
+
+  .right {
+    grid-column: 4;
+
+    @include mobile {
+      display: none;
+    }
+  }
+
+  h1 {
+    text-align: left !important;
+    font-weight: 500 !important;
+    font-size: 3rem;
+    margin: 4rem 0 2rem !important;
+  }
+
+  ol {
+    font-size: 1.4rem;
+    line-height: 3rem;
+    color: $matte-text-color;
+  }
+
+  p {
+    font-size: 1.4rem;
+    line-height: 2rem;
+    margin-top: 0;
+    position: relative;
+
+    .vin-link {
+      cursor: default !important;
     }
 
-    &.green {
+    .icon {
-      background: #c8f9df;
+      position: absolute;
-    }
+      bottom: 3px;
-    &.blue {
+      color: $link-color;
-      background: #d4f2fe;
+      margin-left: 0.5rem;
-    }
+      display: inline-block;
-    &.red {
+      transform: rotate(-90deg);
-      background: #fbd7de;
+      cursor: pointer;
-    }
-    &.yellow {
-      background: #fff6d6;
     }
   }
+
+  .vin-link {
+    font-weight: 400 !important;
+    border-width: 2px;
+  }
 }
 
-.colors {
+.todays-raffles {
+  grid-column: 1;
+}
+
+.raffle-container {
+  width: 165px;
+  height: 175px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
-  max-width: 1400px;
-  margin: 0 auto;
 
-  @include mobile {
+  .raffle-element {
-    margin: 1.8rem auto 0;
+    font-size: 1.6rem;
-  }
+    color: $matte-text-color;
+    height: 75px;
+    width: 75px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  .label-div {
-    margin-top: 0.5rem;
-    width: 100%;
-  }
-}
-
-.colors-box {
-  width: 150px;
-  height: 150px;
-  margin: 20px;
-  -webkit-mask-image: url(/public/assets/images/lodd.svg);
-  background-repeat: no-repeat;
-  mask-image: url(/public/assets/images/lodd.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @include mobile {
-    width: 120px;
-    height: 120px;
-    margin: 10px;
-  }
-}
-
-.colors-overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 0 0.25rem;
-  position: relative;
-
-  p {
-    width: 70%;
-    border: 0;
-    padding: 0;
-    font-size: 1.5rem;
-    height: unset;
-    max-height: unset;
-
-    @include mobile {
-      font-size: 1.3rem;
-    }
-  }
-}
-
-.green,
-.green .colors-overlay > input {
-  background-color: $light-green;
-  color: $green;
-}
-
-.blue,
-.blue .colors-overlay > input {
-  background-color: $light-blue;
-  color: $blue;
-}
-
-.yellow,
-.yellow .colors-overlay > input {
-  background-color: $light-yellow;
-  color: $yellow;
-}
-
-.red,
-.red .colors-overlay > input {
-  background-color: $light-red;
-  color: $red;
-}
-</style>
-
-<style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/variables.scss";
-@import "../styles/media-queries.scss";
-hr {
-  width: 80%;
-}
-h1,
-h2 {
-  text-align: center;
-}
-.current-draw {
-  margin: auto;
-}
-
-.title-info {
-  width: 100%;
-  text-align: center;
-}
-
-.outer-chat {
-  margin: 0 60px 0 10px;
-  @include mobile {
     margin: 0;
   }
 }
 
-.outer-attendees {
+.winners {
-  margin: 0 10px 0 45px;
+  grid-column: 2 / 5;
-  @include mobile {
-    margin: 0;
-  }
 }
 
-.center-new-winner {
+.container-attendees {
-  margin: auto !important;
+  grid-column: 1 / 3;
+  margin-right: 1rem;
+  margin-top: 2rem;
 }
 
-.middle-elements {
+.attendees {
-  display: flex;
+  padding: 2rem;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 400px;
 
-  @include mobile {
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
-    height: auto;
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
-    flex-direction: column;
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
-  }
 }
 
-.vipps {
+.container-chat {
-  margin-top: 70px;
+  grid-column: 3 / 5;
-  display: flex;
+  margin-left: 1rem;
-  padding-bottom: 50px;
+  margin-top: 2rem;
-  justify-content: center;
+}
-  @include mobile {
+
-    flex-direction: column;
+.chat {
+  padding: 2rem;
+
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+}
+
+.wines-container {
+  margin-bottom: 4rem;
+
+  h2 {
+    grid-column: 1 / 5;
   }
 }
 </style>