Tables: use <th>, use Bootstrap align-middle and fix scoreboard table…

… alignment issue (#84) * Use th element for table headers * Use align-middle on tables * Explicitely align username in scoreboard table * _table.scss: cleanup * yarn build
CTFd · Jun 2, 2024 · f633439 · f633439
1 parent e7336db
commit f633439
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 74 deletions.
diff --git a/assets/scss/includes/components/_table.scss b/assets/scss/includes/components/_table.scss
@@ -1,33 +1,22 @@
 /* Table styles
 -------------------------------------------------- */
 
-// Center text in tables, after the first cell
-// Override with text-center on cells
-.table tr > td:not(:first-of-type) {
-  text-align: center !important;
+// Center text in table cells, except the first cell
+.table tr > :not(:first-child) {
+  text-align: center;
 }
 
-// Vertically center text in cells
-.table td,
-th {
-  vertical-align: middle !important;
-}
-
-// Add some default spacing
+// Add some default spacing to table cells
 .table > tbody > tr > td {
-  padding: 0.8rem 1rem !important;
-}
-
-// Remove border line from thead of all tables
-.table > tbody {
-  border-top: none !important;
+  padding: 0.8rem 1rem;
 }
 
 // Add some padding from the edge of table
-.table > thead > tr > td:first-of-type {
-  padding-left: 1rem !important;
+.table > thead > tr > :first-child {
+  padding-left: 1rem;
 }
 
+// Do not wrap text in table headers
 .table > thead > th {
   white-space: nowrap;
 }
diff --git a/static/assets/main.3095e2ea.css → static/assets/main.dad26364.css b/static/assets/main.3095e2ea.css → static/assets/main.dad26364.css
diff --git a/static/manifest.json b/static/manifest.json
@@ -140,7 +140,7 @@
     ]
   },
   "assets/scss/main.scss": {
-    "file": "assets/main.3095e2ea.css",
+    "file": "assets/main.dad26364.css",
     "src": "assets/scss/main.scss",
     "isEntry": true
   }

diff --git a/templates/challenge.html b/templates/challenge.html
@@ -195,15 +195,11 @@ <h3 class="challenge-value text-center">
           <div role="tabpanel" class="tab-pane fade" id="solves">
             <div class="row">
               <div class="col-md-12">
-                <table class="table table-striped text-center">
+                <table class="table table-striped align-middle text-center">
                   <thead>
                   <tr>
-                    <td>
-                      <b>{% trans %}Name{% endtrans %}</b>
-                    </td>
-                    <td>
-                      <b>{% trans %}Date{% endtrans %}</b>
-                    </td>
+                    <th>{% trans %}Name{% endtrans %}</th>
+                    <th>{% trans %}Date{% endtrans %}</th>
                   </tr>
                   </thead>
                   <tbody id="challenge-solves-names">

diff --git a/templates/scoreboard.html b/templates/scoreboard.html
@@ -30,20 +30,20 @@ <h1>
       </template>
 
       <div class="col-md-12" x-show="standings.length">
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
           <thead>
           <tr>
-            <td style="width: 10px"><b>{% trans %}Place{% endtrans %}</b></td>
-            <td><b>{{ get_mode_as_word(capitalize=True) }}</b></td>
-            <td><b>{% trans %}Score{% endtrans %}</b></td>
+            <th style="width: 10px">{% trans %}Place{% endtrans %}</th>
+            <th class="text-start ps-3">{{ get_mode_as_word(capitalize=True) }}</th>
+            <th>{% trans %}Score{% endtrans %}</th>
           </tr>
           </thead>
 
           <tbody>
             <template x-for="(standing, index) in standings.filter(i => activeBracket ? i.bracket_id==activeBracket : true)">
               <tr>
                 <th scope="row" class="text-center" x-text="index + 1"></th>
-                <td>
+                <td class="text-start">
                   <a :href="standing.account_url" x-text="standing.name"></a>
                   <template x-if="standing.bracket_name">
                     <span class="badge bg-secondary ms-2" x-text="standing.bracket_name"></span>

diff --git a/templates/settings.html b/templates/settings.html
@@ -218,13 +218,13 @@ <h5 class="modal-title">{% trans %}Delete Token{% endtrans %}</h5>
                   </div>
                 </div>
 
-                <table class="table table-striped">
+                <table class="table table-striped align-middle">
                   <thead>
                   <tr>
-                    <td class="text-center"><b>{% trans %}Created{% endtrans %}</b></td>
-                    <td><b>{% trans %}Expiration{% endtrans %}</b></td>
-                    <td><b>{% trans %}Description{% endtrans %}</b></td>
-                    <td><b>{% trans %}Delete{% endtrans %}</b></td>
+                    <th class="text-center">{% trans %}Created{% endtrans %}</th>
+                    <th>{% trans %}Expiration{% endtrans %}</th>
+                    <th>{% trans %}Description{% endtrans %}</th>
+                    <th>{% trans %}Delete{% endtrans %}</th>
                   </tr>
                   </thead>
                   <tbody>

diff --git a/templates/teams/private.html b/templates/teams/private.html
@@ -313,11 +313,11 @@ <h2 id="team-score" class="text-center">
     <div class="row min-vh-25">
       <div class="col-md-12">
         <h3>{% trans %}Members{% endtrans %}</h3>
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
           <thead>
           <tr>
-            <td><b>{% trans %}User Name{% endtrans %}</b></td>
-            <td><b>{% trans %}Score{% endtrans %}</b></td>
+            <th>{% trans %}User Name{% endtrans %}</th>
+            <th>{% trans %}Score{% endtrans %}</th>
           </tr>
           </thead>
           <tbody>
@@ -369,13 +369,13 @@ <h3>{% trans %}Awards{% endtrans %}</h3>
       <div class="row">
         <div class="col-md-12">
           <h3>{% trans %}Solves{% endtrans %}</h3>
-          <table class="table table-striped">
+          <table class="table table-striped align-middle">
             <thead>
             <tr>
-              <td><b>{% trans %}Challenge{% endtrans %}</b></td>
-              <td class="d-none d-md-block d-lg-block"><b>{% trans %}Category{% endtrans %}</b></td>
-              <td><b>{% trans %}Value{% endtrans %}</b></td>
-              <td><b>{% trans %}Time{% endtrans %}</b></td>
+              <th>{% trans %}Challenge{% endtrans %}</th>
+              <th class="d-none d-md-block d-lg-block">{% trans %}Category{% endtrans %}</th>
+              <th>{% trans %}Value{% endtrans %}</th>
+              <th>{% trans %}Time{% endtrans %}</th>
             </tr>
             </thead>
             <tbody>

diff --git a/templates/teams/public.html b/templates/teams/public.html
@@ -79,11 +79,11 @@ <h2 id="team-score" class="text-center">
     <div class="row">
       <div class="col-md-12">
         <h3>{% trans %}Members{% endtrans %}</h3>
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
           <thead>
           <tr>
-            <td><b>{% trans %}User Name{% endtrans %}</b></td>
-            <td><b>{% trans %}Score{% endtrans %}</b></td>
+            <th>{% trans %}User Name{% endtrans %}</th>
+            <th>{% trans %}Score{% endtrans %}</th>
           </tr>
           </thead>
           <tbody>
@@ -135,13 +135,13 @@ <h3>{% trans %}Awards{% endtrans %}</h3>
       <div class="row">
         <div class="col-md-12">
           <h3>{% trans %}Solves{% endtrans %}</h3>
-          <table class="table table-striped">
+          <table class="table table-striped align-middle">
             <thead>
             <tr>
-              <td class="text-center"><b>{% trans %}Challenge{% endtrans %}</b></td>
-              <td class="d-none d-md-block d-lg-block"><b>{% trans %}Category{% endtrans %}</b></td>
-              <td><b>{% trans %}Value{% endtrans %}</b></td>
-              <td><b>{% trans %}Time{% endtrans %}</b></td>
+              <th class="text-center">{% trans %}Challenge{% endtrans %}</th>
+              <th class="d-none d-md-block d-lg-block">{% trans %}Category{% endtrans %}</th>
+              <th>{% trans %}Value{% endtrans %}</th>
+              <th>{% trans %}Time{% endtrans %}</th>
             </tr>
             </thead>
             <tbody>

diff --git a/templates/teams/teams.html b/templates/teams/teams.html
@@ -43,13 +43,13 @@ <h6 class="text-muted text-center pb-3">
 
     <div class="row">
       <div class="col-md-12">
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
           <thead>
           <tr>
-            <td class="text-md-start"><b>{% trans %}Team{% endtrans %}</b></td>
-            <td><b>{% trans %}Website{% endtrans %}</b></td>
-            <td class="d-none d-md-table-cell"><b>{% trans %}Affiliation{% endtrans %}</b></td>
-            <td class="d-none d-md-table-cell"><b>{% trans %}Country{% endtrans %}</b></td>
+            <th class="text-md-start">{% trans %}Team{% endtrans %}</th>
+            <th>{% trans %}Website{% endtrans %}</th>
+            <th class="d-none d-md-table-cell">{% trans %}Affiliation{% endtrans %}</th>
+            <th class="d-none d-md-table-cell">{% trans %}Country{% endtrans %}</th>
           </tr>
           </thead>
           <tbody>

diff --git a/templates/users/private.html b/templates/users/private.html
@@ -108,13 +108,13 @@ <h3>{% trans %}Awards{% endtrans %}</h3>
       <div class="row">
         <div class="col-md-12">
           <h3>{% trans %}Solves{% endtrans %}</h3>
-          <table class="table table-striped">
+          <table class="table table-striped align-middle">
             <thead>
             <tr>
-              <td><b>{% trans %}Challenge{% endtrans %}</b></td>
-              <td class="d-none d-md-block d-lg-block"><b>{% trans %}Category{% endtrans %}</b></td>
-              <td><b>{% trans %}Value{% endtrans %}</b></td>
-              <td><b>{% trans %}Time{% endtrans %}</b></td>
+              <th>{% trans %}Challenge{% endtrans %}</th>
+              <th class="d-none d-md-block d-lg-block">{% trans %}Category{% endtrans %}</th>
+              <th>{% trans %}Value{% endtrans %}</th>
+              <th>{% trans %}Time{% endtrans %}</th>
             </tr>
             </thead>
             <tbody>

diff --git a/templates/users/public.html b/templates/users/public.html
@@ -107,13 +107,13 @@ <h3>{% trans %}Awards{% endtrans %}</h3>
       <div class="row">
         <div class="col-md-12">
           <h3>Solves</h3>
-          <table class="table table-striped">
+          <table class="table table-striped align-middle">
             <thead>
             <tr>
-              <td><b>{% trans %}Challenge{% endtrans %}</b></td>
-              <td class="d-none d-md-block d-lg-block"><b>{% trans %}Category{% endtrans %}</b></td>
-              <td><b>{% trans %}Value{% endtrans %}</b></td>
-              <td><b>{% trans %}Time{% endtrans %}</b></td>
+              <th>{% trans %}Challenge{% endtrans %}</th>
+              <th class="d-none d-md-block d-lg-block">{% trans %}Category{% endtrans %}</th>
+              <th>{% trans %}Value{% endtrans %}</th>
+              <th>{% trans %}Time{% endtrans %}</th>
             </tr>
             </thead>
             <tbody>

diff --git a/templates/users/users.html b/templates/users/users.html
@@ -40,13 +40,13 @@ <h6 class="text-muted text-center pb-3">
 
     <div class="row">
       <div class="col-md-12">
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
           <thead>
           <tr>
-            <td><b>{% trans %}User{% endtrans %}</b></td>
-            <td><b>{% trans %}Website{% endtrans %}</b></td>
-            <td class="d-none d-md-table-cell"><b>{% trans %}Affiliation{% endtrans %}</b></td>
-            <td class="d-none d-md-table-cell"><b>{% trans %}Country{% endtrans %}</b></td>
+            <th>{% trans %}User{% endtrans %}</th>
+            <th>{% trans %}Website{% endtrans %}</th>
+            <th class="d-none d-md-table-cell">{% trans %}Affiliation{% endtrans %}</th>
+            <th class="d-none d-md-table-cell">{% trans %}Country{% endtrans %}</th>
           </tr>
           </thead>
           <tbody>