Add better spacing for when there aren't solves to populate dtta

better-spacing-without-solves
Kevin Chung 2020-04-30 22:14:32 -04:00
parent 1c10643537
commit 95d581ed33
12 changed files with 53 additions and 15 deletions

View File

@ -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">

View File

@ -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">

View File

@ -0,0 +1,5 @@
.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; }

View File

@ -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;
}

View File

@ -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,

View File

@ -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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>