KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
Adrian Thompson
2020-11-02 15:28:30 +01:00
parent c93671d14e 627f96b420
commit 7de2530b9b
18 changed files with 346 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Vinlottis.vue
View File

@@ -104,11 +104,16 @@ body {
}
</style>
<style scoped>
<style lang="scss" scoped>
.app-container {
background-color: white;
min-height: 100vh;
display: grid;
grid-template-rows: 80px auto 100px;
.main-container{
height: 100%;
width: 100%;
}
}
</style>

2
src/api.js
View File

@@ -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: {

63
src/components/AllRequestedWines.vue
View File

@@ -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>

22
src/components/AllWinesPage.vue
View File

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

19
src/components/GeneratePage.vue
View File

@@ -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>

19
src/components/HighscorePage.vue
View File

@@ -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%;

18
src/components/PersonalHighscorePage.vue
View File

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

1
src/components/RequestWine.vue
View File

@@ -106,7 +106,6 @@ h1{
text-align: center;
}
.main-container{
margin: auto;
max-width: 1200px;

71
src/components/TodaysPage.vue
View File

@@ -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>

5
src/components/WinnerPage.vue
View File

@@ -77,11 +77,6 @@ export default {
margin-top: 2rem;
padding: 2rem;
}
h1 {
color: $matte-text-color;
}
.sent-container {
width: 100%;
height: 90vh;

51
src/styles/global.scss
View File

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

8
src/ui/RaffleGenerator.vue
View File

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

150
src/ui/RequestedWineCard.vue
View File

@@ -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>

8
src/ui/Wine.vue
View File

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