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

Comments and styling added to league page. More debugging and optimization needed. Table and top scorers are no longer aligned at larger widths

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-14 19:32:46 -06:00
parent 111466a860
commit f2fd71a764
4 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ProjectSourceCode/src/resources/css/league-pages/league-page.css
View File

@@ -1,7 +1,7 @@
#league-page-body {
display: flex;
flex-direction: column;
width: 100v;
width: 100vh;
}
#league-information-container {
@@ -72,14 +72,10 @@
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1161px) {
#league-stats-container {
flex-direction: column;
}
#league-table-and-information-container,
#top-scorers-container {
width: 100%; /* Both containers take full width */
@media (max-width: 950px) {
#league-stats-containers {
flex-direction: column; /* Change flex direction to column */
}
}

10
ProjectSourceCode/src/resources/css/league-pages/league-table.css
View File

@@ -11,6 +11,10 @@
padding: 15px;
}
#table-stats-container {
width: 100%;
}
#table-stats-container th {
border-bottom: 3px solid red; /* Add red bottom border */
}
@@ -57,3 +61,9 @@
text-decoration: underline; /* Add underline effect */
}
}
@media (max-width: 950px) {
#league-table-and-information-container {
width: 100%; /* Set the width to 60% when window width is less than 1161px */
}
}

1
ProjectSourceCode/src/resources/css/league-pages/top-scorers.css
View File

@@ -1,5 +1,6 @@
#top-scorers-container {
flex: 1;
width: 100%;
/* Add any other styling you need for the top scorers container */
}

12
ProjectSourceCode/src/views/pages/leagues-page.hbs
View File

@@ -8,16 +8,18 @@
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
<div class="container" id="league-stats-containers">
<div id="table-and-top-scorers-containers" class="stats-container">
<!-- Container to display league table <- split 50% -->
<div class="container" id="league-table-and-information-container">
<div id="league-table-container" class="stats-container">
<!-- Put header above table container -->
<div id="table-header-container" class="header">
<h2>Table</h2>
</div>
<div id="table-stats-container" class="container">
<!-- Container containing all league table stats -->
<div id="table-stats-container" class="stats-container">
<table id="standings-table">
<thead>
<tr>
@@ -52,12 +54,12 @@
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div id="top-scorers-container" class="container">
<div id="top-scorers-container" class="stats-container">
<div id="top-scorers-header-container" class="header">
<h2>Top Scorers</h2>
</div>
<div id="top-scorers-stats-container" class="container">
<div id="top-scorers-stats-container" class="stats-container">
<table>
<thead>
<tr>