Fix ratings columns

beyond-all-reason · Apr 21, 2024 · 2084f75 · 2084f75
1 parent f32db1b
commit 2084f75
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/assets/scss/custom/_styles.scss b/assets/scss/custom/_styles.scss
@@ -240,6 +240,29 @@ body {
   padding: 0.25rem 0.6rem;
 }
 
+//Ratings table
+.table-ratings {
+  table-layout: fixed;
+  font-size: 0.9rem;
+}
+
+//Map column for Ratings table
+.table-ratings tr th:nth-child(1) {
+  width: 200px;
+}
+
+.table-ratings th {
+  padding: 0.5rem
+}
+
+.table-ratings td {
+  padding: 0.5rem
+}
+
+// Make the delta column closer to the associated value
+.table-ratings .column-delta {
+  transform: translate(-1.6rem, 0rem)
+}
 
 
 // We want out outline buttons to be filled in when you mouseover or activate them

diff --git a/lib/teiserver_web/live/battles/match/ratings.html.heex b/lib/teiserver_web/live/battles/match/ratings.html.heex
@@ -54,7 +54,7 @@
       </div>
     <% end %>
 
-    <table class="table table-sm table-hover mt-3 cursor-pointer">
+    <table class="table table-sm table-hover table-ratings mt-3 cursor-pointer">
       <thead>
         <tr class="">
           <th>Map name</th>
@@ -77,15 +77,15 @@
         <%= for log <- @logs do %>
           <% {skill_text_class, skill_icon} =
             cond do
-              log.value["skill_change"] > 0 -> {"text-success", "arrow-up"}
-              log.value["skill_change"] < 0 -> {"text-danger", "arrow-down"}
-              true -> {"text-warning", "pause"}
+              log.value["skill_change"] > 0 -> {"text-success column-delta", "arrow-up"}
+              log.value["skill_change"] < 0 -> {"text-danger column-delta", "arrow-down"}
+              true -> {"text-warning column-delta", "pause"}
             end %>
           <% {uncertainty_text_class, uncertainty_icon} =
             cond do
-              log.value["uncertainty_change"] > 0 -> {"text-success", "arrow-up"}
-              log.value["uncertainty_change"] < 0 -> {"text-danger", "arrow-down"}
-              true -> {"text-warning", "pause"}
+              log.value["uncertainty_change"] > 0 -> {"text-secondary column-delta", "arrow-up"}
+              log.value["uncertainty_change"] < 0 -> {"text-secondary column-delta", "arrow-down"}
+              true -> {"text-secondary column-delta", "pause"}
             end %>
           <tr phx-click={"[[\"navigate\",{\"href\":\"/battle/#{log.match_id}\",\"replace\":false}]]"}>
             <%= if log.match do %>