From 2084f75a9800624cd454b3cd0028413c82c7f9ad Mon Sep 17 00:00:00 2001
From: Joshua Augustinus <jauggy@gmail.com>
Date: Sun, 21 Apr 2024 20:18:05 +1000
Subject: [PATCH] Fix ratings columns

Fix ratings columns
---
 assets/scss/custom/_styles.scss               | 23 +++++++++++++++++++
 .../live/battles/match/ratings.html.heex      | 14 +++++------
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/assets/scss/custom/_styles.scss b/assets/scss/custom/_styles.scss
index 25eff3ed8..820eff4e0 100644
--- 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
index 27dbb36ba..ca93328ec 100644
--- 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 %>