Merge pull request #1372 from CTFd/better-spacing-without-solves

* Use some better utility CSS classes for better spacing when there isn't any content

CTFd/themes/admin/templates/teams/team.html

@@ -130,7 +130,7 @@
 </div>
 
 <div class="container">
-	<div class="row">
+	<div class="row min-vh-25">
 		{% if solves %}
 			<div id="keys-pie-graph" class="col-md-6">
 				<div class="text-center">
@@ -148,13 +148,13 @@
 				</div>
 			</div>
 		{% else %}
-			<h3 class="spinner-error text-center w-100">
+			<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
 				No solves yet
 			</h3>
 		{% endif %}
 	</div>
 
-	<div class="row pt-5">
+	<div class="row pt-5 min-vh-25">
 		<div class="col-md-12">
 			<table class="table table-striped">
 				<h3 class="text-center">Team Members</h3>
@@ -209,7 +209,7 @@
 		   aria-controls="nav-awards" aria-selected="false">Awards</a>
 	</nav>
 
-	<div class="tab-content" id="nav-tabContent">
+	<div class="tab-content min-vh-25" id="nav-tabContent">
 		<div class="tab-pane fade show active" id="nav-solves" role="tabpanel" aria-labelledby="nav-solves-tab">
 			<div class="row">
 				<div class="col-md-12">

CTFd/themes/admin/templates/users/user.html

@@ -130,7 +130,7 @@
 </div>
 
 <div class="container">
-	<div class="row">
+	<div class="row min-vh-25">
 		{% if solves %}
 			<div id="keys-pie-graph" class="col-md-6">
 				<div class="text-center">
@@ -148,7 +148,7 @@
 				</div>
 			</div>
 		{% else %}
-			<h3 class="spinner-error text-center w-100">No solves yet</h3>
+			<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">No solves yet</h3>
 		{% endif %}
 	</div>
 
@@ -167,7 +167,7 @@
 		   aria-controls="nav-missing" aria-selected="false">Missing</a>
 	</nav>
 
-	<div class="tab-content" id="nav-tabContent">
+	<div class="tab-content min-vh-25" id="nav-tabContent">
 		<div class="tab-pane fade show active" id="nav-solves" role="tabpanel" aria-labelledby="nav-solves-tab">
 			<div class="row">
 				<div class="col-md-12">

CTFd/themes/core/assets/css/includes/utils/min-height.scss

@@ -0,0 +1,15 @@
+.min-vh-0 {
+  min-height: 0vh !important;
+}
+.min-vh-25 {
+  min-height: 25vh !important;
+}
+.min-vh-50 {
+  min-height: 50vh !important;
+}
+.min-vh-75 {
+  min-height: 75vh !important;
+}
+.min-vh-100 {
+  min-height: 100vh !important;
+}

CTFd/themes/core/assets/css/includes/utils/opacity.scss

@@ -0,0 +1,15 @@
+.opacity-0 {
+  opacity: 0 !important;
+}
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+.opacity-100 {
+  opacity: 1 !important;
+}

CTFd/themes/core/assets/css/main.scss

@@ -3,6 +3,8 @@
 @import "includes/sticky-footer.css";
 @import "includes/award-icons.scss";
 @import "includes/flag-icons.scss";
+@import "includes/utils/opacity.scss";
+@import "includes/utils/min-height.scss";
 
 html,
 body,

CTFd/themes/core/assets/js/pages/scoreboard.js

@@ -65,7 +65,7 @@ const createGraph = () => {
     if (teams.length === 0) {
       // Replace spinner
       graph.html(
-        '<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>'
+        '<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">No solves yet</h3>'
       );
       return;
     }

CTFd/themes/core/templates/teams/private.html

@@ -189,7 +189,7 @@
 
 			<br>
 
-			<div class="row">
+			<div class="row min-vh-25">
 				<div class="col-md-12">
 					<h3>Members</h3>
 					<table class="table table-striped">
@@ -290,7 +290,11 @@
 					</div>
 				</div>
 			{% else %}
-				<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+				<div class="row min-vh-25">
+					<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
+						No solves yet
+					</h3>
+				</div>
 			{% endif %}
 		{% endif %}
 	</div>

CTFd/themes/core/templates/teams/public.html

@@ -168,7 +168,11 @@
 					</div>
 				</div>
 			{% else %}
-				<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+				<div class="row min-vh-25">
+					<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
+						No solves yet
+					</h3>
+				</div>
 			{% endif %}
 		{% endif %}
 	</div>

CTFd/themes/core/templates/users/private.html

@@ -172,7 +172,11 @@
 					</div>
 				</div>
 			{% else %}
-				<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+				<div class="row min-vh-25">
+					<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
+						No solves yet
+					</h3>
+				</div>
 			{% endif %}
 		{% endif %}
 	</div>

CTFd/themes/core/templates/users/public.html

@@ -175,7 +175,11 @@
 					</div>
 				</div>
 			{% else %}
-				<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+				<div class="row min-vh-25">
+					<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
+						No solves yet
+					</h3>
+				</div>
 			{% endif %}
 		{% endif %}
 	</div>