Skip to content
Snippets Groups Projects
Commit 4c58f237 authored by OliverGreen27's avatar OliverGreen27
Browse files

style fixes, bugfixes

parent b4044a80
No related branches found
No related tags found
No related merge requests found
...@@ -19,6 +19,13 @@ ...@@ -19,6 +19,13 @@
} }
.form-input { .form-input {
width: 300px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.form-input-welcome {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
...@@ -82,4 +89,36 @@ input[type=text]:focus { ...@@ -82,4 +89,36 @@ input[type=text]:focus {
textarea { textarea {
overflow: hidden; overflow: hidden;
resize: none; resize: none;
}
.message-board {
background-color: #f0e3d1;
overflow-y: scroll;
padding: 10px;
max-height: 40vh;
border-left: solid deeppink;
border-top-style: hidden;
border-right-style: hidden;
border-bottom-style: hidden;
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius:5px;
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
} }
\ No newline at end of file
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
<div class="form-elements" id="login"> <div class="form-elements" id="login">
<form id="loginform"> <form id="loginform">
<h2>Login</h2> <h2>Login</h2>
<div class="form-input"> <div class="form-input-welcome">
<label for="email">Email</label> <label for="email">Email</label>
<input type="text" id="email" name="email" size="18"> <input type="text" id="email" name="email" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" size="18"> <input type="password" id="password" name="password" size="18">
</div> </div>
...@@ -24,15 +24,15 @@ ...@@ -24,15 +24,15 @@
</form> </form>
<form id="signupform"> <form id="signupform">
<h2>Sign up here</h2> <h2>Sign up here</h2>
<div class="form-input"> <div class="form-input-welcome">
<label for="fname">First name</label> <label for="fname">First name</label>
<input type="text" id="fname" name="fname" size="18"> <input type="text" id="fname" name="fname" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="lname">Family name</label> <label for="lname">Family name</label>
<input type="text" id="lname" name="lname" size="18"> <input type="text" id="lname" name="lname" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="gender">Gender</label> <label for="gender">Gender</label>
<select id="gender" name="gender" style="width:169;"> <select id="gender" name="gender" style="width:169;">
<option value="male">Male</option> <option value="male">Male</option>
...@@ -41,27 +41,27 @@ ...@@ -41,27 +41,27 @@
</select> </select>
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="city">City</label> <label for="city">City</label>
<input type="text" id="city" name="city" size="18"> <input type="text" id="city" name="city" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="country">Country</label> <label for="country">Country</label>
<input type="text" id="country" name="country" size="18"> <input type="text" id="country" name="country" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="email">Email</label> <label for="email">Email</label>
<input type="text" id="email" name="email" size="18"> <input type="text" id="email" name="email" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" size="18"> <input type="password" id="password" name="password" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<label for="password2">Repeat PSW</label> <label for="password2">Repeat PSW</label>
<input type="password" id="password2" name="password2" size="18"> <input type="password" id="password2" name="password2" size="18">
</div> </div>
<div class="form-input"> <div class="form-input-welcome">
<input type="submit" value="Sign Up"> <input type="submit" value="Sign Up">
</div> </div>
<div id="message"></div> <div id="message"></div>
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
<div id="message3"></div> <div id="message3"></div>
<button id="reloadbutton">Reload board</button> <button id="reloadbutton">Reload board</button>
<div id="home-message-board"> <div id="home-message-board" class="message-board">
</div> </div>
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
<div id="message4"></div> <div id="message4"></div>
<button id="browse-reloadbutton">Reload board</button> <button id="browse-reloadbutton">Reload board</button>
<div id="browse-message-board"> <div id="browse-message-board" class="message-board">
</div> </div>
</div> </div>
</div> </div>
......
...@@ -13,14 +13,15 @@ class SignUp { ...@@ -13,14 +13,15 @@ class SignUp {
displayView = function() { displayView = function() {
// the code required to display a view // the code required to display a view
};
window.onload = function() {
if (localStorage.getItem("logintoken") != null) { if (localStorage.getItem("logintoken") != null) {
loadProfileView(); loadProfileView();
} else { } else {
loadWelcomeView(); loadWelcomeView();
} }
}; };
window.onload = function() {
displayView();
};
loadWelcomeView = function() { loadWelcomeView = function() {
document.getElementById("pagecontent").innerHTML = ""; document.getElementById("pagecontent").innerHTML = "";
...@@ -49,7 +50,7 @@ loadWelcomeView = function() { ...@@ -49,7 +50,7 @@ loadWelcomeView = function() {
signupform["email"].setAttribute("placeholder", message.message); signupform["email"].setAttribute("placeholder", message.message);
} else { } else {
localStorage.setItem("logintoken", message.data); localStorage.setItem("logintoken", message.data);
loadProfileView(); displayView();
} }
} }
} }
...@@ -67,7 +68,7 @@ loadWelcomeView = function() { ...@@ -67,7 +68,7 @@ loadWelcomeView = function() {
loginform["email"].setAttribute("placeholder", message.message); loginform["email"].setAttribute("placeholder", message.message);
} else { } else {
localStorage.setItem("logintoken", message.data); localStorage.setItem("logintoken", message.data);
loadProfileView(); displayView();
} }
} }
}) })
...@@ -110,7 +111,7 @@ loadProfileView = function() { ...@@ -110,7 +111,7 @@ loadProfileView = function() {
} else { } else {
localStorage.removeItem("logintoken"); localStorage.removeItem("logintoken");
} }
loadWelcomeView(); displayView();
}) })
var userData = serverstub.getUserDataByToken(localStorage.getItem('logintoken')).data var userData = serverstub.getUserDataByToken(localStorage.getItem('logintoken')).data
...@@ -227,26 +228,21 @@ reloadBoard = function(board, email=null) { ...@@ -227,26 +228,21 @@ reloadBoard = function(board, email=null) {
messageHTML.appendChild(document.createElement('br')); messageHTML.appendChild(document.createElement('br'));
boardBox.appendChild(messageHTML); boardBox.appendChild(messageHTML);
boardBox.style.backgroundColor = "white";
boardBox.style.overflowY= "scroll";
boardBox.style.maxHeight = "45vh";
} }
} }
inputValidation = function(formID) { inputValidation = function(formID) {
var form = document.forms[formID]; var form = document.forms[formID];
let allInputs = form.querySelectorAll("input"); let allInputs = form.querySelectorAll("input");
var valid = true;
allInputs.forEach(function(elem) { allInputs.forEach(function(elem) {
if(elem.type === "text" && elem.value === "") { if(elem.type === "text" && elem.value === "") {
elem.setAttribute("placeholder", "Don't leave blank"); elem.setAttribute("placeholder", "Don't leave blank");
valid = false; return false;
} }) } })
if (form["email"] != null && !validateEmail(form)) { if (form["email"] != null && !validateEmail(form)) {
valid = false; return false;
} }
valid = validatePassword(form, formID); return validatePassword(form, formID);
return valid;
} }
function validateEmail(form) { function validateEmail(form) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment