Merge pull request MarkusBauer#10 from nename0/scoreboard-width-adjus…

…tment Scoreboard larger width adjustments
nename0 · Jul 30, 2022 · 4d7d7e0 · 4d7d7e0
2 parents 0f2554a + 8fcf81e
commit 4d7d7e0
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 9 deletions.
diff --git a/scoreboard/src/app/page-team/page-team.component.less b/scoreboard/src/app/page-team/page-team.component.less
@@ -50,7 +50,8 @@ tablelinecells, app-table-service-header-cell {
 }
 
 .chart-container {
-	position: relative;
+	position: sticky;
+	left: 15px;
 	height: 280px;
 	width: calc(100vw - 28px);
 }

diff --git a/scoreboard/src/app/scoretable/scoretable.component.html b/scoreboard/src/app/scoretable/scoretable.component.html
@@ -32,9 +32,10 @@ <h4>
 				</div>
 				<div class="media-body">
 					<h4 class="team-name" [class.blocked]="backend.bannedTeams[rank.team_id]">
-						<a [routerLink]="['team', rank.team_id]" [title]="backend.bannedTeams[rank.team_id] ? 'Network access is currently blocked. Please contact the organizers in IRC!' : 'See team\'s details'">{{backend.teams[rank.team_id].name}}</a>
+						<a [routerLink]="['team', rank.team_id]" [title]="backend.bannedTeams[rank.team_id] ? 'Network access is currently blocked. Please contact the organizers in IRC!' : backend.teams[rank.team_id].name + ' - See team\'s details'">{{backend.teams[rank.team_id].name}}</a>
 						<button type="button" *ngIf="backend.teams[rank.team_id].aff || backend.teams[rank.team_id].web"
 								class="btn btn-xs btn-link info-link" triggers="focus"
+								container="div.container-fluid.flexible-container"
 								[popover]="'Affiliation: '+(backend.teams[rank.team_id].aff||'-')+'; Website: '+(backend.teams[rank.team_id].web || '-')">
 							<span class="fas fa-info"></span>
 						</button>

diff --git a/scoreboard/src/app/scoretable/scoretable.component.less b/scoreboard/src/app/scoretable/scoretable.component.less
@@ -38,9 +38,14 @@ table {
 .team-name {
 	margin-top: 3px;
 	margin-bottom: 1px;
+	display: flex;
+	max-width: 200px;
 
 	a {
 		color: @text-color;
+		flex: 1 1 auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	&.blocked {

diff --git a/scoreboard/src/darkmode.less b/scoreboard/src/darkmode.less
@@ -109,9 +109,9 @@ html.dark {
 
 	// Dark sticky headers
 	table.table-bordered.table-stickyhead thead {
-		box-shadow: 0px 2px 1px -1px rgba(255, 255, 255, 0.2),
-		0px 1px 1px 0px rgba(255, 255, 255, 0.14),
-		0px 1px 3px 0px rgba(255, 255, 255, .12);
+		box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2),
+		0px 2px 2px 0px rgba(255, 255, 255, 0.14),
+		0px 1px 5px 0px rgba(255, 255, 255, 0.12);
 
 		tr {
 			background-color: @dm-table-border-color;
@@ -122,4 +122,16 @@ html.dark {
 			border-bottom: 1px solid @dm-table-border-color;
 		}
 	}
-}
+
+	app-scoretable > table.table-bordered.table-stickyhead {
+		.teamcell, .rankcell {
+			background-color: @dm-table-head-bg-color;
+		}
+
+		.teamcell {
+			box-shadow: 2px 0px 1px -1px rgba(255, 255, 255, 0.2),
+			1px 0px 1px 0px rgba(255, 255, 255, 0.14),
+			1px 0px 3px 0px rgba(255, 255, 255, 0.12);
+		}
+	}
+}
diff --git a/scoreboard/src/styles.less b/scoreboard/src/styles.less
@@ -114,6 +114,13 @@ table.onlySums {
 }
 
 table.table-bordered.table-stickyhead {
+	border-collapse: separate;
+
+	td {
+		border-top: 0;
+		border-left: 0;
+	}
+
 	thead {
 		position: sticky;
 		top: 0;
@@ -129,9 +136,33 @@ table.table-bordered.table-stickyhead {
 			background-clip: padding-box;
 			border-bottom: 0;
 		}
+
+		box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+		0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+		0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+	}
+}
+
+app-scoretable > table.table-bordered.table-stickyhead {
+	.teamcell, .rankcell {
+		border-right: 0;
+		position: sticky;
+		z-index: 10;
+		background-color: @table-head-bg-color;
+		background-clip: padding-box;
+	}
+
+	.rankcell {
+		left: 0px;
+		min-width: 35px;
+	}
 
-		box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-		0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-		0px 1px 3px 0px rgba(0, 0, 0, .12);
+	.teamcell {
+		left: 35px;
+
+		clip-path: inset(0px -4px -1px 0px); // clip the shadow to right only, -1px for bottom border
+		box-shadow: 2px 0px 1px -1px rgba(0, 0, 0, 0.2),
+		1px 0px 1px 0px rgba(0, 0, 0, 0.14),
+		1px 0px 3px 0px rgba(0, 0, 0, 0.12);
 	}
 }