Merge pull request #53 from KevinMidboe/refactor/requested-wines-ui

WIP Refactor - Requested wines ui
2020-11-02 15:20:20 +01:00
parent 2fc5fd29b9 da29e3a8ce
commit 627f96b420
21 changed files with 466 additions and 169 deletions
--- a/src/Vinlottis.vue
+++ b/src/Vinlottis.vue
@@ -79,6 +79,7 @@ export default {
 <style lang="scss">
@import "./styles/global.scss";
@import "./styles/positioning.scss";
+@import "./styles/vinlottis-icons.css";
@font-face {
  font-family: "knowit";
  font-weight: 600;
--- a/src/api.js
+++ b/src/api.js
@@ -122,7 +122,7 @@ const winners = () => {

 const deleteRequestedWine = wineToBeDeleted => {

-  const url = new URL("api/request/"+ wineToBeDeleted._id, BASE_URL);
+  const url = new URL("api/request/"+ wineToBeDeleted.id, BASE_URL);

  const options = {
    headers: {
--- a/src/components/AllRequestedWines.vue
+++ b/src/components/AllRequestedWines.vue
@@ -1,11 +1,11 @@
 <template>
-  <main>
-    <h1>
-      Alle foreslåtte viner
-    </h1>
+  <main class="container">
+    <h1>Alle foreslåtte viner</h1>
+
    <section class="requested-wines-container">
      <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
-      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
+
+      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.wine._id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
    </section>
  </main>
 </template>
@@ -40,41 +40,26 @@ export default {

 <style lang="scss" scoped>
@import "../styles/media-queries.scss";
+@import "./src/styles/variables.scss";
+
+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+}
+
+h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  color: $matte-text-color;
+  font-weight: normal;
+}

 .requested-wines-container{
-  display: grid;
-  grid-gap: 1.5rem;
-  justify-items: center;
-
-  @include mobile {
-    display: flex;
-    justify-content: space-around;
-    flex-flow: row wrap;
-    row-gap: 1.5rem;
-    margin: 2rem;
-  }
-
-  @include tablet {
-    margin: 1em;
-    grid: 1fr / 1fr 1fr;
-    justify-items: center;
-  }
-
-  @include desktop {
-    margin: 1em;
-    grid: 1fr / repeat(4, 1fr);
-  }
-
-  @include widescreen {
-    width: 80%;
-    margin: auto;
-    grid: 1fr / repeat(5, 1fr);
-    justify-items: center;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
 }
-
-h1{
-  text-align: center;
-}
-
 </style>
--- a/src/components/AllWinesPage.vue
+++ b/src/components/AllWinesPage.vue
@@ -66,7 +66,23 @@ export default {
@import "./src/styles/variables";

 .container {
-  max-width: unset;
+  width: 90vw;
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 4rem;
+}
+
+h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  font-weight: normal;
+
+  font-family: knowit, Arial;
+  margin-bottom: 25px;
+}
+
+.label {
+  font-weight: 600;
 }

 #wines-container {
@@ -75,6 +91,10 @@ export default {
  justify-content: space-evenly;
  align-items: flex-start;

+  @include desktop {
+    margin: 0 2rem;
+  }
+
  > div {
    justify-content: flex-start;
  }
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="container">
-    <h1 class="text-center title" @click="startCountdown">Loddgenerator</h1>
+    <h1 class="title" @click="startCountdown">Loddgenerator</h1>
    <p class="subtext">
      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
    </p>
@@ -54,16 +54,13 @@ export default {
@import "../styles/variables.scss";
@import "../styles/global.scss";
@import "../styles/media-queries.scss";
-
-.container {
-  display: flex;
-  flex-direction: column;
-  margin-top: 0;
-}
-
 h1 {
  cursor: pointer;
 }
+.header-link {
+  color: #333333;
+  text-decoration: none;
+}

 p {
  text-align: center;
@@ -77,4 +74,10 @@ p {
    margin-top: 2rem;
  }
 }
+
+.container {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
 </style>
--- a/src/components/HighscorePage.vue
+++ b/src/components/HighscorePage.vue
@@ -101,6 +101,25 @@ $elementSpacing: 3.5rem;
  margin-bottom: $elementSpacing;
 }

+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  max-width: 1200px;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+
+  @include desktop {
+    width: 80vw;
+  }
+}
+
+h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  color: $matte-text-color;
+  font-weight: normal;
+}
+
 .filter input {
  font-size: 1rem;
  width: 30%;
--- a/src/components/PersonalHighscorePage.vue
+++ b/src/components/PersonalHighscorePage.vue
@@ -141,6 +141,24 @@ $elementSpacing: 3rem;
  border-color: gray;
 }

+.container {
+  width: 90vw;  
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+  max-width: 1200px;
+
+  @include desktop {
+    width: 80vw;
+  }
+}
+
+h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  font-weight: normal;
+}
+
 .name {
  text-transform: capitalize;
  font-size: 3.5rem;
--- a/src/components/TodaysPage.vue
+++ b/src/components/TodaysPage.vue
@@ -37,10 +37,79 @@ export default {
  height: 250px;
 }

+h1 {
+  font-family: knowit, Arial;
+  margin-bottom: 25px;
+}
+
 .wines-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
-  align-items: flex-start;
+  margin: 0 2rem;
+
+  @media (min-width: 1500px) {
+    max-width: 1500px;
+    margin: 0 auto;
+  }
+
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+h3 {
+  max-width: 30vw;
+
+  @include mobile {
+    max-width: 50vw;
+  }
+}
+
+.inner-wine-container {
+  display: flex;
+  flex-direction: row;
+  margin: auto;
+  width: 500px;
+  font-family: Arial;
+  margin-bottom: 30px;
+
+  @include desktop {
+    justify-content: center;
+  }
+
+  @include mobile {
+    width: auto;
+  }
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 150px;
+  margin-left: 50px;
+
+  @include mobile {
+    margin-left: 2rem;
+  }
+}
+
+a,
+a:focus,
+a:hover,
+a:visited {
+  color: #333333;
+  font-family: Arial;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.wine-link {
+  color: #333333;
+  font-family: Arial;
+  text-decoration: none;
+  font-weight: bold;
+  border-bottom: 1px solid $link-color;
+  width: fit-content;
 }
 </style>
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -116,8 +116,7 @@ h1 {
 .container{
  display: flex;
  flex-direction: column;
-  width: 100%;
-
+  
  .header-and-notification{
    display: flex;
    flex-direction: row;
--- a/src/components/WinnerPage.vue
+++ b/src/components/WinnerPage.vue
@@ -77,11 +77,6 @@ export default {
  margin-top: 2rem;
  padding: 2rem;
 }
-
-h1 {
-  color: $matte-text-color;
-}
-
 .sent-container {
  width: 100%;
  height: 90vh;
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -37,33 +37,6 @@ a {
  }
 }

-.container {
-  width: 90vw;
-  margin: 3rem auto;
-  margin-bottom: 0;
-  padding-bottom: 3rem;
-  max-width: 1700px;
-
-  @include desktop {
-    width: 80vw;
-  }
-
-  h1 {
-    font-family: "knowit";
-    font-weight: normal;
-    font-size: 2rem;
-
-    @include desktop {
-      font-size: 3rem;
-    }
-  }
-}
-
-.text-center {
-  text-align: center;
-}
-
-
 .subtext {
  margin-top: 0.5rem;
  font-size: 1.22rem;
@@ -195,6 +168,10 @@ textarea {
    opacity: 0.25;
    cursor: not-allowed;
  }
+
+  &.small {
+    height: min-content;
+  }
 }


@@ -268,6 +245,26 @@ textarea {
  }
 }

+.width {
+  &-100 {
+    width: 100%;
+  }
+  &-75 {
+    width: 75%;
+  }
+  &-50 {
+    width: 50%;
+  }
+  &-25 {
+    width: 25%;
+  }
+}
+
+.cursor {
+  &-pointer {
+    cursor: pointer;
+  }
+}

 .no-margin {
  margin: 0 !important;
--- a/src/styles/vinlottis-icons.css
+++ b/src/styles/vinlottis-icons.css
@@ -0,0 +1,122 @@
+@font-face {
+  font-family: 'vinlottis-icons';
+  src:
+    url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf?95xu5r') format('truetype'),
+    url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff?95xu5r') format('woff'),
+    url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg?95xu5r#vinlottis-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'vinlottis-icons' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon--arrow-long-right:before {
+  content: "\e907";
+}
+.icon--arrow-long-left:before {
+  content: "\e908";
+}
+.icon--arrow-right:before {
+  content: "\e909";
+}
+.icon--arrow-left:before {
+  content: "\e900";
+}
+.icon--ballon:before {
+  content: "\e90b";
+}
+.icon--bars:before {
+  content: "\e90c";
+}
+.icon--bottle:before {
+  content: "\e90d";
+}
+.icon--cake-chart:before {
+  content: "\e90f";
+}
+.icon--stopwatch:before {
+  content: "\e911";
+}
+.icon--cloud:before {
+  content: "\e912";
+}
+.icon--dart:before {
+  content: "\e914";
+}
+.icon--eye-1:before {
+  content: "\e919";
+}
+.icon--eye-2:before {
+  content: "\e91a";
+}
+.icon--eye-3:before {
+  content: "\e91b";
+}
+.icon--eye-4:before {
+  content: "\e91c";
+}
+.icon--eye-5:before {
+  content: "\e91d";
+}
+.icon--eye-6:before {
+  content: "\e91e";
+}
+.icon--eye-7:before {
+  content: "\e91f";
+}
+.icon--eye-8:before {
+  content: "\e920";
+}
+.icon--face-1:before {
+  content: "\e922";
+}
+.icon--face-2:before {
+  content: "\e923";
+}
+.icon--face-3:before {
+  content: "\e924";
+}
+.icon--heart-sparks:before {
+  content: "\e928";
+}
+.icon--heart:before {
+  content: "\e929";
+}
+.icon--medal:before {
+  content: "\e936";
+}
+.icon--megaphone:before {
+  content: "\e937";
+}
+.icon--phone:before {
+  content: "\e93a";
+}
+.icon--plus:before {
+  content: "\e93e";
+}
+.icon--spark:before {
+  content: "\e946";
+}
+.icon--tag:before {
+  content: "\e949";
+}
+.icon--talk:before {
+  content: "\e94b";
+}
+.icon--cross:before {
+  content: "\e952";
+}
--- a/src/ui/RaffleGenerator.vue
+++ b/src/ui/RaffleGenerator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex column">
+  <div class="container">
    <div class="input-line">
      <label for="redCheckbox">
        <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
@@ -208,6 +208,12 @@ export default {
@import "../styles/global.scss";
@import "../styles/media-queries.scss";

+.container {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .input-line {
  margin: auto;
  display: flex;
--- a/src/ui/RequestedWineCard.vue
+++ b/src/ui/RequestedWineCard.vue
@@ -1,33 +1,40 @@
 <template>
-  <div class="requested-wine">
-    <img
-      v-if="wine.image"
-      :src="wine.image"
-      class="wine-image"
-      :class="{ 'fullscreen': fullscreen }"
-    />
-    <img v-else class="wine-placeholder" alt="Wine image" />
-    <h3 v-if="wine.name">{{ wine.name }}</h3>
-    <h3 v-else>(no name)</h3>
-    <p class="requested-amount">Foreslått: <strong>{{requestedElement.count}}</strong></p>
+  <Wine :wine="wine">
+    <template v-slot:top>
+      <div class="flex justify-end">
+        <div class="requested-count cursor-pointer" @click="request">
+          <span>{{ requestedElement.count }}</span>
+          <i class="icon icon--heart" :class="{ 'active': locallyRequested }" />
+        </div>
+      </div>
+    </template>

-    <button class="vin-button" @click="request(wine)" v-if="!locallyRequested">Foreslå denne</button>
-    <a
-    v-if="wine.vivinoLink"
-    :href="wine.vivinoLink"
-    class="wine-link">
-      Les mer
-    </a>
-    <button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button danger">
-      Slett vinen
-    </button>
-    </div>
+    <template v-slot:default>
+      <button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button small danger width-100">
+        Slett vinen
+      </button>
+    </template>
+
+    <template v-slot:bottom>
+      <div class="float-left request">
+        <i class="icon icon--heart request-icon" :class="{ 'active': locallyRequested }"></i>
+        <a aria-role="button" tabindex="0" class="link" @click="request"
+           :class="{ 'active': locallyRequested }">
+          {{ locallyRequested ? 'Anbefalt' : 'Anbefal' }}
+        </a>
+      </div>
+    </template>
+  </Wine>
 </template>

 <script>
 import { deleteRequestedWine, requestNewWine } from "@/api";
+import Wine from "@/ui/Wine";

 export default {
+  components: {
+    Wine
+  },
  data(){
    return {
      wine: this.requestedElement.wine,
@@ -46,12 +53,16 @@ export default {
    }
  },
  methods: {
-    request(wine){
+    request(){
+      if (this.locallyRequested)
+        return
+      console.log("requesting", this.wine)
      this.locallyRequested = true
      this.requestedElement.count = this.requestedElement.count +1
-      requestNewWine(wine)
+      requestNewWine(this.wine)
    },
-    async deleteWine(wine) {
+    async deleteWine() {
+      const wine = this.wine
      if (window.confirm("Er du sikker på at du vil slette vinen?")) {
        let response = await deleteRequestedWine(wine);
        if (response['success'] == true) {
@@ -65,62 +76,49 @@ export default {
 }
 </script>

-<style lang="scss" scoped> 
-@import "../styles/global.scss";
+<style lang="scss" scoped>
+@import "./src/styles/variables";

-.requested-wine{
-  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-  text-align: center;
-  display: grid;
-  grid-template-areas: "top top"
-                       "middle-left middle-right-top"
-                       "middle-left middle-right-bot"
-                       "bottom-top bottom-top"
-                       "bottom-bot bottom-bot";
-  grid-gap: 1em;
-  justify-items: center;
+.requested-count {
+  display: flex;
  align-items: center;
-  width: 100%;
-  
-  h3{
-    grid-area: top;
-    word-break: keep-all;
-    width: 90%;
+  margin-top: -0.5rem;
+  background-color: rgb(244,244,244);
+  border-radius: 1.1rem;
+  padding: 0.25rem 1rem;
+  font-size: 1.25em;
+
+  span {
+    padding-right: 0.5rem;
+    line-height: 1.25em;
  }

-  img{
-    height: 13em;
-    grid-area: middle-left;
-  }
-
-  .requested-amount{
-    grid-area: middle-right-top;
-    width: 90%;
-    word-break: keep-all;
-  }
-  
-  .wine-link{
-    grid-area: middle-right-bot;
-    color: #333333;
-    font-family: Arial;
-    text-decoration: none;
-    font-weight: bold;
-    border-bottom: 1px solid $link-color;
-    height: 1em;
-  }
-
-  .vin-button{
-    grid-area: bottom-top;
-    margin-bottom: 1em;
-
-    &.danger{
-      grid-area: bottom-bot;
-      background-color: $light-red;
-      color: $red;
-    }
+  .icon--heart{
+    color: grey;
  }
 }

+.active {
+  &.link {
+    border-color: $link-color
+  }
+
+  &.icon--heart {
+    color: $link-color;
+  }
+}
+
+.request {
+  display: flex;
+  align-items: center;
+
+  &-icon {
+    font-size: 1.5rem;
+    color: grey;
+  }
+
+  a {
+    margin-left: 0.5rem;
+  }
+}
 </style>
--- a/src/ui/Wine.vue
+++ b/src/ui/Wine.vue
@@ -1,5 +1,6 @@
 <template>
  <div class="wine">
+    <slot name="top"></slot>
    <div class="wine-image">
      <img
        v-if="wine.image && loadImage"
@@ -18,6 +19,7 @@
    <slot></slot>

    <div class="bottom-section">
+      <slot name="bottom"></slot>
      <a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="link float-right">
        Les mer
      </a>
@@ -61,7 +63,6 @@ export default {

 <style lang="scss" scoped>
@import "./src/styles/media-queries";
-@import "./src/styles/global";
@import "./src/styles/variables";

 .wine {
@@ -105,6 +106,11 @@ export default {
  }
 }

+.wine-details {
+  display: flex;
+  flex-direction: column;
+}
+
 .bottom-section {
  width: 100%;
  margin-top: 1rem;