diff --git a/package.json b/package.json
index a0ab19f..73656d3 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
"start": "node src/server.js",
"db_init": "node src/model/db_init.js",
"dev": "nodemon src/server.js",
- "test": "NODE_ENV=test node tests/db_test.js | tap-spec"
+ "test": "NODE_ENV=test tape tests/*test.js | tap-spec"
},
"repository": {
"type": "git",
diff --git a/public/css/finalStyle.css b/public/css/finalStyle.css
index f072104..2f1aa4c 100644
--- a/public/css/finalStyle.css
+++ b/public/css/finalStyle.css
@@ -1,4 +1,22 @@
-.dropbtn {
+/*-------------------------------BUTTON WRAP----------------------------------*/
+
+.next-step-icon-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/*--------------------------ADD TO CALENDAR BUTTON ---------------------------*/
+.add-to-calendar-button-wrap {
+ position: relative;
+ display: inline-block;
+}
+
+.add-to-calendar-button-wrap a:hover {
+ background-color: #ddd;
+}
+
+.add-to-calander-button {
background-color: #637bd0;
border: 2px solid #5366aa;
color: #fff;
@@ -7,12 +25,7 @@
cursor: pointer;
}
-.dropdown {
- position: relative;
- display: inline-block;
-}
-
-.dropdown-content {
+.add-to-calendar-dropdown-content {
display: none;
position: absolute;
background-color: #fff;
@@ -26,7 +39,7 @@
text-align: center;
}
-.dropdown-content a {
+.add-to-calendar-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
@@ -35,25 +48,14 @@
font-family: "Montserrat", sans-serif;
}
-.dropdown a:hover {
- background-color: #ddd;
-}
-
.show {
display: block;
}
-.citymapper-logo {
+/*-----------------------------CITYMAPPER BUTTON------------------------------*/
+.citymapper-button {
border-radius: 1rem;
- /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
- /* border: 2px solid #298b20; */
width: 85px;
height: 80px;
padding: 0.5rem;
}
-
-.next-step-icon-wrap {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
diff --git a/public/css/formStyle.css b/public/css/formStyle.css
index ac96765..9cee519 100644
--- a/public/css/formStyle.css
+++ b/public/css/formStyle.css
@@ -1,4 +1,4 @@
-/* ---------------------------------------------INPUT & BUTTONS ---------------------------------------------*/
+/* ---------------------------------FORM ------------------------------------*/
.user-form {
display: flex;
flex-direction: column;
@@ -12,30 +12,46 @@
width: 100vw;
}
-input {
- padding: 10px;
- width: 100%;
- font-size: 17px;
+/*---------------------------- INPUT BOXES ------------------------------*/
+.user-input-outer-wrap {
+ /*this is what hides each part of the form - don't remove!*/
+ display: none;
+}
+
+.user-input {
+ border-radius: 3rem;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border: 2px solid #ebfffb;
+ background: #ffffff;
+ font-family: "Roboto", sans-serif;
+ margin: 0 0 1.5rem 0;
+ max-width: 20rem;
+ font-size: 1.1rem;
+ padding: 0.7rem;
text-align: center;
+ /*this keeps the text that user enters centered*/
}
-input.invalid {
+.user-input.invalid {
background-color: #ffdddd;
}
-.user-input {
- display: none;
+.user-input-title {
+ font-family: "Righteous", cursive;
}
-.button-wrap {
- display: flex;
- flex-direction: row;
- justify-content: center;
- width: 100vw;
+.user-input::placeholder {
+ text-align: center;
+ font-family: "Roboto", sans-serif;
+ color: #a2a1a1;
}
-/* ---------------------------------------------STEPS ---------------------------------------------*/
+.time-and-date-wrap {
+ display: flex;
+ flex-direction: column;
+}
+/* --------------------------STEPS/PAGINATION DOTS ---------------------------*/
.step-wrap {
display: flex;
flex-direction: row;
@@ -45,30 +61,30 @@ input.invalid {
height: 15px;
width: 15px;
margin: 0 2px;
- background-color: #bbbbbb;
+ background-color: #97a3cc;
border: none;
border-radius: 50%;
display: inline-block;
- opacity: 0.5;
- box-shadow: inset 0 0 10px #3232ff;
+ /* opacity: 0.5; */
+ box-shadow: inset 0 0 5px #6375b3;
}
.step.active {
opacity: 1;
- background-color: #637bd0;
+ background-color: #3b487a;
}
.step.finish {
- background-color: #4a5b99;
+ background-color: #4f62a6;
}
-/* ---------------------------------------------RADIO BUTTONS ---------------------------------------------*/
-
+/* -----------------------------RADIO BUTTONS -------------------------------*/
.radio-toolbar {
display: flex;
flex-direction: column;
justify-content: center;
}
+
.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
@@ -77,17 +93,9 @@ input.invalid {
.radio-toolbar label {
display: inline-block;
- background-color: #ddd;
- /* padding: 10px 20px; */
- margin: 5px 0;
- font-family: "Montserrat", sans-serif;
- /* font-size: 16px; */
- /* border: 2px solid #444; */
+ margin: 0.8rem 0;
border-radius: 3rem;
- padding: 10px;
- width: 100%;
- font-size: 17px;
- text-align: center;
+ padding: 0.8rem;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 2px solid #ebfffb;
background: #ffffff;
@@ -97,11 +105,3 @@ input.invalid {
background-color: #637bd0;
border-color: #637bd0;
}
-
-.radio-toolbar input[type="radio"]:focus + label {
- /* border: 2px dashed #444; */
-}
-
-.radio-toolbar input[type="radio"]:hover + label {
- /* border: 2px dashed #aaaaaa; */
-}
diff --git a/public/css/homeStyle.css b/public/css/homeStyle.css
index 43ad0b7..6382bb4 100644
--- a/public/css/homeStyle.css
+++ b/public/css/homeStyle.css
@@ -1,14 +1,13 @@
+/*--------------------------------GENERAL-------------------------------------*/
+
html {
box-sizing: border-box;
}
body {
background: #ebfffb;
-}
-
-header {
- display: flex;
- flex-direction: row;
+ text-align: center;
+ font-family: "Montserrat", sans-serif;
}
*,
@@ -17,62 +16,52 @@ header {
box-sizing: inherit;
}
-.logo {
- width: 50px;
- height: 50px;
-}
-
-/* ---------------------------------------------- FONTS -----------------------------------------------------------*/
-
-h1,
-h3,
-p {
- font-family: "Montserrat", sans-serif;
- text-align: center;
+a {
+ text-decoration: none;
}
-h2 {
- text-align: center;
- font-family: "Righteous", cursive;
+a:visited {
+ color: black;
}
-/* ---------------------------------------------- BUTTONS -----------------------------------------------------------*/
-button {
- background-color: #db3306;
- color: #ffffff;
- border: none;
- padding: 15px 20px;
- font-size: 17px;
- font-family: "Montserrat", sans-serif;
- cursor: pointer;
- border-radius: 3rem;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- margin: 0.5rem 0.5rem 2rem 0.5rem;
-}
+/*----------------------------------HEADER------------------------------------*/
-button:hover {
- opacity: 0.8;
+header {
+ display: flex;
+ flex-direction: row;
}
-/* ---------------------------------------------- ALERT BOX -----------------------------------------------------------*/
-
-.box {
- /* width: 40%; */
+.header-button-wrap {
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
- text-align: center;
- font-family: "Montserrat", sans-serif;
align-self: center;
}
-.box:visited {
+.header-button-wrap:visited {
text-decoration: none;
}
-.overlay {
+.header-button-link-wrap {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.logo {
+ width: 50px;
+ height: 50px;
+}
+
+.question-mark {
+ width: 35px;
+ height: 40px;
+}
+
+/* ------------------------------ ALERT BOX ----------------------------------*/
+
+.popup-home-overlay {
position: fixed;
top: 0;
bottom: 0;
@@ -83,7 +72,8 @@ button:hover {
visibility: hidden;
opacity: 0;
}
-.overlay:target {
+
+.popup-home-overlay:target {
visibility: visible;
opacity: 1;
}
@@ -103,6 +93,7 @@ button:hover {
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
+
.popup .close {
position: absolute;
top: 20px;
@@ -113,9 +104,11 @@ button:hover {
text-decoration: none;
color: #333;
}
+
.popup .close:hover {
color: #06d85f;
}
+
.popup .content {
max-height: 30%;
overflow: auto;
@@ -127,42 +120,28 @@ button:hover {
justify-content: space-around;
}
-input {
+/* ------------------------------ BUTTONS ------------------------------------*/
+
+.standard-button {
+ background-color: #db3306;
+ color: #ffffff;
+ border: none;
+ padding: 1rem 1.3rem;
+ font-size: 1.05rem;
+ cursor: pointer;
border-radius: 3rem;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- border: 2px solid #ebfffb;
- background: #ffffff;
- font-family: "Roboto", sans-serif;
- /* padding-left: 1.5rem; */
- margin: 0 0 1.5rem 0;
- max-width: 20rem;
-}
-
-a {
- text-decoration: none;
-}
-
-a:visited {
- color: black;
+ margin: 0.5rem 0.5rem 2rem 0.5rem;
font-family: "Montserrat", sans-serif;
}
-input::placeholder {
- text-align: center;
- font-family: "Roboto", sans-serif;
- color: #a2a1a1;
-}
-
-.question-mark {
- width: 35px;
- height: 40px;
+.standard-button:hover {
+ opacity: 0.8;
}
-@media screen and (max-width: 700px) {
- .box {
- /* width: 70%; */
- }
- .popup {
- width: 70%;
- }
+.button-wrap {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ /* width: 100vw; */
}
diff --git a/public/css/venuesSwipe.css b/public/css/venuesSwipe.css
index 4fa6f29..31de9cb 100644
--- a/public/css/venuesSwipe.css
+++ b/public/css/venuesSwipe.css
@@ -1,3 +1,4 @@
+/*---------------------------------GENERAL------------------------------------*/
* {
margin: 0;
}
@@ -10,17 +11,8 @@ body {
height: 100vh;
}
-.img-container {
- width: 100vw;
- height: 40vh;
- overflow: hidden;
- position: relative;
-}
-.img-container img {
- width: 100%;
-}
-
-.container-swipe {
+/*-----------------------------SWIPE CONTAINER--------------------------------*/
+.swipe-container {
--n: 1;
display: flex;
align-items: space-between;
@@ -41,7 +33,18 @@ body {
pointer-events: none;
}
-/* STEPS */
+.venue-image-container {
+ width: 100vw;
+ height: 40vh;
+ overflow: hidden;
+ position: relative;
+}
+
+.venue-image-container img {
+ width: 100%;
+}
+
+/*--------------------------STEPS/PAGINATION DOTS-----------------------------*/
.step-wrap {
display: flex;
@@ -69,7 +72,7 @@ body {
background-color: #4caf50;
}
-/* HEART */
+/*------------------------------------HEART-----------------------------------*/
.heart-wrap {
width: 4rem;
@@ -87,8 +90,8 @@ body {
background-image: url(../img/colouredHeart.svg);
}
-/* STARS */
-.stars img {
+/*-----------------------------------STARS------------------------------------*/
+.venue-rating-stars img {
width: 50px;
height: auto;
}
diff --git a/public/js/userForm.js b/public/js/userForm.js
index bf04d7a..935fe7e 100644
--- a/public/js/userForm.js
+++ b/public/js/userForm.js
@@ -10,7 +10,7 @@ const updateName = () => {
};
const showTab = n => {
- const labelArray = document.querySelectorAll(".user-input");
+ const labelArray = document.querySelectorAll(".user-input-outer-wrap");
labelArray[n].style.display = "block";
if (n === 0) {
@@ -41,7 +41,7 @@ const showTab = n => {
showTab(currentTab);
const validateEmpty = () => {
- const labelArray = document.querySelectorAll(".user-input");
+ const labelArray = document.querySelectorAll(".user-input-outer-wrap");
let labelInput,
valid = true;
@@ -58,7 +58,7 @@ const validateEmpty = () => {
const validatePostcode = () => {
let valid = true;
- const labelArray = document.querySelectorAll(".user-input");
+ const labelArray = document.querySelectorAll(".user-input-outer-wrap");
const postcodeInput = labelArray[currentTab].querySelector(
".user-input-postcode"
);
@@ -74,7 +74,7 @@ const validatePostcode = () => {
const validateRadio = () => {
let valid = false;
- const labelArray = document.querySelectorAll(".user-input");
+ const labelArray = document.querySelectorAll("user-input-outer-wrap");
const radioInputs = labelArray[currentTab].querySelectorAll(".radio-input");
radioInputs.forEach(radioInput => {
if (radioInput.checked) valid = true;
@@ -84,7 +84,7 @@ const validateRadio = () => {
const nextInput = e => {
e.preventDefault();
- const labelArray = document.querySelectorAll(".user-input");
+ const labelArray = document.querySelectorAll(".user-input-outer-wrap");
//validation
if (currentTab === 1 || currentTab === 3) {
if (!validatePostcode()) return false;
diff --git a/public/js/venuesSwipe.js b/public/js/venuesSwipe.js
index 22fa152..8685500 100644
--- a/public/js/venuesSwipe.js
+++ b/public/js/venuesSwipe.js
@@ -1,5 +1,5 @@
const mainContainer = document.querySelector(".main-container");
-const containerSwipe = document.querySelector(".container-swipe");
+const containerSwipe = document.querySelector(".swipe-container");
const childCount = containerSwipe.children.length;
containerSwipe.style.setProperty("--n", childCount);
diff --git a/src/views/HIW.hbs b/src/views/HIW.hbs
index e05296c..624a6a3 100644
--- a/src/views/HIW.hbs
+++ b/src/views/HIW.hbs
@@ -1,14 +1,15 @@
- How It Works
- Want to meet up with someone but can’t decide on a location?
-
- We take your frustration away, and find a location for you!
-
- Based on your current locations and preferences, we’ll suggest a list of perfect venues for you and your friend.
-
- Then, you’ll both have the chance to swipe through and select your favourite venues.
-
- Once we have a match, we’ll show you how to get there, too.
- Go Back
-
\ No newline at end of file
+
How It Works
+
+
Want to meet up with someone but can’t decide on a location?
+
We take your frustration away, and find a
+ location for you!
+
Based on your current locations and preferences, we’ll suggest a
+ ist of perfect venues for you and your friend.
+
Then, you’ll both have the chance to swipe through and select your
+ favourite venues.
+
Once we have a match, we’ll show you how to get there, too.
+
+ Go Back
+
diff --git a/src/views/final.hbs b/src/views/final.hbs
index b6baf2f..e46329f 100644
--- a/src/views/final.hbs
+++ b/src/views/final.hbs
@@ -1,29 +1,38 @@
-
+
+
- HURRAY!
- You're meeting {{data.userb}}
- at
- {{data.timeinput}}
- on
- {{data.dateinput}}
- at
-
{{data.venuename}}
- {{data.venueaddress}}
- {{data.venuepostcode}}
- {{data.postcodea}}
-
-
-
+
HURRAY!
+
You're meeting
+ {{data.userb}}
+
+
at
+ {{data.timeinput}}
+ on
+ {{data.dateinput}}
+ at
+
+ {{data.postcodea}}
+
+
-
+
+
+
+
+
-
\ No newline at end of file
+
+
+
diff --git a/src/views/form.hbs b/src/views/form.hbs
index 6229581..46d7090 100644
--- a/src/views/form.hbs
+++ b/src/views/form.hbs
@@ -5,63 +5,57 @@
-