lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

Additional code clean up and login page stylizations

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-10 02:16:31 -06:00
parent dc360425ba
commit 273d5c3d9d
5 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ProjectSourceCode/src/resources/css/navigation-bar/login.css
View File

@@ -5,9 +5,27 @@
top: 150px; /* Adjust this value as needed */ top: 150px; /* Adjust this value as needed */
right: 20px; /* Adjust this value as needed */ right: 20px; /* Adjust this value as needed */
z-index: 10; z-index: 10;
background-color: white; background: linear-gradient(to bottom, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
border: 1px solid gray; border: 1px solid gray;
border-radius: 8px; border-radius: 8px;
} }
#login-submit {
padding: 5px 10px;
background-color: red;
border-color: red;
border: 1px solid red;
border-radius: 8px;
color: white;
}
#login-submit:hover {
background-color: darkred;
border-color: darkred;
color: white;
}

10
ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
View File

@@ -31,6 +31,16 @@
font-size: 30px; font-size: 30px;
} }
#user {
width: 25px;
transition: width 0.3s ease; /* Adding transition for smooth effect */
}
#user:hover {
width: 30px;
}
#line { #line {
height: 100%; /* spans the entire height of the navigation bar */ height: 100%; /* spans the entire height of the navigation bar */
width: 10px; width: 10px;

16
ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
View File

@@ -1,12 +1,8 @@
// Function to render login.hbs when #user is clicked $(document).ready(function() {
function renderLogin() { // When #user is clicked
// Assuming you're using jQuery $('#user').click(function() {
$('#user').on('click', function() { // Toggle the visibility of the login container
// Load the login.hbs template content using AJAX $('#login-container').toggle();
res.render('/login'); });
}); });
}
// Call the function to enable rendering login.hbs
renderLogin();

2
ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
View File

@@ -20,7 +20,7 @@
<input type="password" class="form-control" id="password" name="password" required> <input type="password" class="form-control" id="password" name="password" required>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" id="login-submit">Submit</button>
</form> </form>

12
ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
View File

@@ -41,7 +41,7 @@
</ul> </ul>
</div> </div>
<div id="user" class="d-sm-flex"> <div id="user" class="d-sm-flex">
<img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid" style="width: 30px;"> <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid">
</div> </div>
</div> </div>
</nav> </nav>
@@ -51,15 +51,5 @@
{{> navigation-bar/login}} {{> navigation-bar/login}}
</div> </div>
<!-- JavaScript to handle click event -->
<script>
$(document).ready(function() {
// When #user is clicked
$('#user').click(function() {
// Toggle the visibility of the login container
$('#login-container').toggle();
});
});
</script>