From f9ef83cb21ae62b16dc90b2235554139c92cc7c2 Mon Sep 17 00:00:00 2001
From: projectmoon <projectmoon@agnos.is>
Date: Sat, 23 Jan 2021 10:21:53 +0000
Subject: [PATCH] Make merits table look nicer.

---
 src/frontend/scripts/characters/edit.ts       |  1 +
 .../characters/edit_character.html.tera       | 53 +++++++++++++++++++
 .../edit_character_macros.html.tera           |  2 +-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/frontend/scripts/characters/edit.ts b/src/frontend/scripts/characters/edit.ts
index 9c7b86c..9be8a23 100644
--- a/src/frontend/scripts/characters/edit.ts
+++ b/src/frontend/scripts/characters/edit.ts
@@ -144,6 +144,7 @@ import * as api from "../api";
             const removeButton = document.createElement('button');
             removeButton.innerText = "X";
             removeButton.setAttribute('data-event-type', 'remove-merit');
+            removeButton.classList.add('remove-merit');
 
             const dots = document.createElement('span');
             dots.innerText = 'Dots';
diff --git a/src/frontend/templates/characters/edit_character.html.tera b/src/frontend/templates/characters/edit_character.html.tera
index d772545..0a18bed 100644
--- a/src/frontend/templates/characters/edit_character.html.tera
+++ b/src/frontend/templates/characters/edit_character.html.tera
@@ -82,6 +82,59 @@
          background-color: lightgray;
          margin: 0;
      }
+
+     #merits {
+         padding: 4px;
+     }
+
+     #merit-list {
+         display: inline-flex;
+         flex-direction: column;
+     }
+
+     .merit {
+         margin: 0;
+         padding: 0;
+         display: inline-flex;
+         border: 1px solid gray;
+         margin-top: -1px;
+     }
+
+     .merit .merit-name {
+         width: 10em;
+         vertical-align: text-bottom;
+         padding: 0;
+         margin: 8px;
+         border: none;
+         border: 0px solid gray;
+         border-bottom-width: 1px;
+     }
+
+     .merit .merit-dots {
+         max-width: 4em;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     .merit span {
+         width: 3em;
+         text-align: left;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .merit .remove-merit {
+         max-width: 4em;
+         padding: 0;
+         padding: 3px;
+         padding-left: 6px;
+         padding-right:6px;
+         margin: 3px;
+         background-color: lightgray;
+     }
     </style>
 
     {# Webpack Templating for API script #}
diff --git a/src/frontend/templates/characters/edit_character_macros.html.tera b/src/frontend/templates/characters/edit_character_macros.html.tera
index e85b5de..6d141d4 100644
--- a/src/frontend/templates/characters/edit_character_macros.html.tera
+++ b/src/frontend/templates/characters/edit_character_macros.html.tera
@@ -16,6 +16,6 @@
 <div class="merit">
     <input type="text" class="merit-name" value="{{name}}" />
     <input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
-    <button data-event-type="remove-merit">X</button>
+    <button class="remove-merit" data-event-type="remove-merit">X</button>
 </div>
 {% endmacro merit %}