From 187fcd6b5a642931fb4584c0ba8099df5b96470d Mon Sep 17 00:00:00 2001
From: Daniel Schadt <kingdread@gmx.de>
Date: Mon, 11 Jul 2022 14:50:43 +0200
Subject: better styling for friend buttons in track edit

The big button with the large padding looked kind of silly, so now the
button is slimmer and the text is actually centered.
---
 fietsboek/static/theme.css           | 15 +++++++++++++++
 fietsboek/templates/edit_form.jinja2 |  6 +++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 32ef02b..831b1f6 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -36,6 +36,21 @@ strong {
   max-width: 400px;
 }
 
+.friendlist-control {
+  padding: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.friendlist-control button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.friendlist-control span {
+  padding-left: 1em;
+}
+
 .list-group.list-group-root {
   padding: 0;
   overflow: hidden;
diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2
index b43e5d5..3779d5d 100644
--- a/fietsboek/templates/edit_form.jinja2
+++ b/fietsboek/templates/edit_form.jinja2
@@ -41,7 +41,7 @@
   <div>{{ _("page.track.form.tagged_people") }}</div>
   <ul class="list-group" id="taggedFriends">
     {% for friend in friends %}
-    <li class="list-group-item">
+    <li class="list-group-item friendlist-control">
       <button type="button" class="btn btn-danger remove-friend-button"><i class="bi bi-x-square-fill"></i></button>
       <input name="tagged-friend[]" value="{{ friend.id }}" type="hidden">
       <span class="friend-name">{{ friend.name }}</span>
@@ -58,11 +58,11 @@
   </div>
   <!-- Hidden templates for Javascript to use -->
   <div style="display: none;">
-    <li class="list-group-item" id="friendSearchBlueprint">
+    <li class="list-group-item friendlist-control" id="friendSearchBlueprint">
       <button type="button" class="btn btn-success"><i class="bi bi-plus-square-fill"></i></button>
       <span class="friend-name"></span>
     </li>
-    <li class="list-group-item" id="friendAddedBlueprint">
+    <li class="list-group-item friendlist-control" id="friendAddedBlueprint">
       <button type="button" class="btn btn-danger remove-friend-button"><i class="bi bi-x-square-fill"></i></button>
       <input name="tagged-friend[]" type="hidden" disabled>
       <span class="friend-name"></span>
-- 
cgit v1.2.3