aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--fietsboek/static/theme.css15
-rw-r--r--fietsboek/templates/edit_form.jinja26
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>