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

Changes to account pane to make club name and crest clickable to club's page

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-24 23:33:40 -06:00
parent 7ef769d8f4
commit 2a6fe0b126
3 changed files with 43 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
ProjectSourceCode/src/resources/css/login-and-registration/account.css
View File

@@ -8,6 +8,8 @@
padding: 10px;
}
#account-header-container {
display: flex;
@@ -35,9 +37,20 @@
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 10px 20px;
margin: 10px 0;
margin: 10px 0;
}
.account-favorite-teams-card:hover {
transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
#account-favorite-teams-card-title {
text-decoration: underline;
}
#account-favorite-teams-card-logo {
transform: scale(1.02); /* Scale the row by 1.1 on hover */
}
}
#account-favorite-teams-card-logo {
@@ -47,35 +60,39 @@
#account-favorite-teams-card-title {
font-weight: 600;
text-decoration: none;
color: black;
}
/* Delete Button CSS */
/* Delete Button CSS --> Switches Between Icons */
/* Align the delete button container */
#account-delete-favorite-team-button-container {
margin-left: auto; /* Align the container all the way to the right */
display: inline-block;
position: relative;
}
#account-delete-favorite-team-button-hover {
display: none; /* Initially hide the hover image */
}
#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button {
display: none; /* Hide the default image when hovered over */
}
#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button-hover {
display: inline-block; /* Display the hover image when hovered over */
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
#account-delete-favorite-team-button,
#account-delete-favorite-team-button-hover {
.account-delete-favorite-team-button {
width: 15px;
cursor: pointer;
width: 18px;
height: auto;
}
/* Don't show hover icon on start */
#account-delete-favorite-team-button-hover {
display: none; /* Initially hide the hover image */
}
/* Hover Effects */
#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button {
display: none; /* Hide the default image when hovered over */
}
#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button-hover {
display: inline-block; /* Display the hover image when hovered over */
}

17
ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
View File

@@ -1,33 +1,32 @@
<div class="account-portal-container" id="account-pane">
<div id="account-pane-content-container">
<div id="account-header-container">
<a id="username">Hello, {{user.username}}</a>
<div class="logout-container">
<a id="logout-button" class="account-portal-button" href="/logout">Logout</a>
</div>
</div>
<div id="account-favorite-teams-container">
<a id="account-favorite-teams-header">Favorite Teams:</a>
{{#each fav_teams}}
<div class="account-favorite-teams-card">
<div id="account-favorite-teams-card-logo-container">
<img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
<a href="/club/{{this.teamid}}">
<img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
</a>
</div>
<span id="account-favorite-teams-card-title">{{this.teamname}}</span>
<a id="account-favorite-teams-card-title" href="/club/{{this.teamid}}">
{{this.teamname}}
</a>
<div id="account-delete-favorite-team-button-container">
<!-- Add a different image for hover effect -->
<img id="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
<img id="account-delete-favorite-team-button-hover" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID={{this.userid}} teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
<img id="account-delete-favorite-team-button" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
<img id="account-delete-favorite-team-button-hover" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID="{{this.userid}}" teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
</div>
</div>
{{/each}}
</div>
</div>
</div>