From d11238e19ea37f8b91afcd0a74cc039c26d0cafa Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Wed, 30 Oct 2019 13:42:42 +0100 Subject: [PATCH] Added GUI and some data --- server/database/data.json | 2 +- src/app/app.component.html | 9 ++- src/app/app.component.scss | 65 +++++++++++++++ src/app/components/home/home.component.html | 43 +++++++--- src/app/components/home/home.component.scss | 87 +++++++++++++++++++++ src/app/components/home/home.component.ts | 1 + src/assets/logo-hetheerenlanden.svg | 53 +++++++++++++ src/index.html | 2 + src/styles.scss | 16 ++++ 9 files changed, 263 insertions(+), 15 deletions(-) create mode 100644 src/assets/logo-hetheerenlanden.svg diff --git a/server/database/data.json b/server/database/data.json index 8ff3ec5..108cc56 100644 --- a/server/database/data.json +++ b/server/database/data.json @@ -1 +1 @@ -{"data":[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false]} \ No newline at end of file +{"data":[false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false]} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 90c6b64..1d38334 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,8 @@ - \ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..3948d74 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,65 @@ +body { + margin: 0; + font-family: 'Open Sans', sans-serif; + background: repeating-linear-gradient( + 45deg, + #ff3641 , + #ff3641 60px, + #5998c5 60px, + #5998c5 120px, + #ffca3a 120px, + #ffca3a 180px, + ); +} + +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; + } + +// HLC blue (0,175,241) red (247,0,0) yellow (255,255,0) +nav { + height: 4em; + color: white; + background-color: rgba(0,0,0,0.25); + position: relative; + span { + font-family: 'Staatliches', cursive; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 2em; + width: max-content; + } + a { + text-decoration: none; + color: white; + cursor: pointer; + position: absolute; + font-size: 1.5em; + top: 50%; + right: 20px; + transform: translate(0, -50%); + i { + padding: 5px; + } + } + @media screen and (min-width: 600px) { + a::after { + content: "Login"; + } + } +} + +main { + padding: 16px; + margin: 20px; + height: min-content; + border-radius: 1em; + background-color: #ffffff; + text-align: center; +} \ No newline at end of file diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 17cf23a..efbe8d7 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,13 +1,30 @@ -Log uit -
-
- {{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }} - Reserveer -
-
- -
-
- -
-
+ +

+ Festival Het Heerenlanden pakt uit
+ 28 november 2019
+ Kerstmarkt van 16:00 tot 20:00
+

+

+ Klik op een cadeautje om een surprise box te reserveren.
+ Na reservering ontvang je een bevestiging van Simone.
+ Je kan je box op 28 november ophalen en betalen. +

+
+ Log uit +
+
+ + {{ i + 1 }}
+
{{ item ? 'Gereserveerd' : 'Klik om te reserveren' }}
+ + + +
+
+ +
+
+ +
+
+
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss index e69de29..7e4808a 100644 --- a/src/app/components/home/home.component.scss +++ b/src/app/components/home/home.component.scss @@ -0,0 +1,87 @@ +// HLC blue (0,175,241) red (247,0,0) yellow (255,255,0) + + p:nth-child(2) { + border-bottom: 1px solid rgba(0,0,0,0.5); + font-weight: bold; + padding-bottom: 5px; + } + div { + div { + overflow: visible; + display: grid; + grid-template-columns: repeat(10, auto); + justify-items: center; + @media screen and (min-width: calc(180px + 100px)){ + & { grid-template-columns: repeat(3, auto); } + } + @media screen and (min-width: calc(240px + 100px)){ + & { grid-template-columns: repeat(4, auto); } + } + @media screen and (min-width: calc(300px + 100px)){ + & { grid-template-columns: repeat(5, auto); } + } + @media screen and (min-width: calc(360px + 100px)){ + & { grid-template-columns: repeat(6, auto); } + } + @media screen and (min-width: calc(420px + 100px)){ + & { grid-template-columns: repeat(7, auto); } + } + @media screen and (min-width: calc(480px + 100px)){ + & { grid-template-columns: repeat(8, auto); } + } + @media screen and (min-width: calc(540px + 100px)){ + & { grid-template-columns: repeat(9, auto); } + } + @media screen and (min-width: calc(600px + 100px)){ + & { grid-template-columns: repeat(10, auto); } + } + span { + // border: 1px solid black; + display: inline-block; + margin: 2.5px; + border-radius: 0.5em; + width: 50px; + height: 50px; + text-decoration: none; + color: white; + overflow: visible; + i { + font-size: 1.5em; + } + &:hover > div.tooltip { + display: inline; + } + div.tooltip { + display: none; + padding: 5px; + border-radius: 3px; + position: absolute; + transform: translate(40px, -12.5px); + background-color: rgba(108,117,125,1); + &:before { + position: absolute; + left: -10px; + width: 0; + height: 0; + content: ""; + border-style: solid; + border-width: 10px 10px 10px 0; + border-color: transparent #6c757d transparent transparent; + } + } + } + span.available { + background-color: rgba(138,201,38,1) ; + } + span.unavailable { + background-color: rgba(255,54,65,1) ; + } + span.available:hover { + background-color: rgba(138,201,38,0.8) ; + } + span.unavailable:hover { + background-color: rgba(255,54,65,0.8) ; + } + + } + } diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 806ab39..2298a11 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { ApiData, DataService } from 'src/app/services/data.service'; import { Router } from '@angular/router'; +import { $ } from 'protractor'; @Component({ selector: 'app-home', diff --git a/src/assets/logo-hetheerenlanden.svg b/src/assets/logo-hetheerenlanden.svg new file mode 100644 index 0000000..650d164 --- /dev/null +++ b/src/assets/logo-hetheerenlanden.svg @@ -0,0 +1,53 @@ + + + + Page 1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 5ac4931..28af454 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..4268e62 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,17 @@ /* You can add global styles to this file, and also import other style files */ +body, html { + margin: 0; +} + +body { + font-family: 'Open Sans', sans-serif; + background: repeating-linear-gradient( + 45deg, + #ff3641 , + #ff3641 60px, + #5998c5 60px, + #5998c5 120px, + #ffca3a 120px, + #ffca3a 180px, + ); +} \ No newline at end of file