maps: keep marker colour widgets aligned (#72084) #11

Merged
fpeters merged 1 commits from wip/72084-colour-or-text-alignment into main 2022-12-26 09:36:21 +01:00
2 changed files with 16 additions and 7 deletions

View File

@ -1,12 +1,14 @@
{% load i18n %}
{% with widget_value=widget.value|stringformat:'s' %}
{% spaceless %}
<span id="{{ widget.name }}-joined-buttons" class="gadjo-joined-buttons">
<button data-mode="color" aria-pressed="{% if widget.value is None or widget_value|slice:":1" == '#' %}true{% else %}false{% endif %}" role="button">{% trans "Fixed" %}</button>
<button data-mode="text" aria-pressed="{% if widget.value != None and widget_value|slice:":1" != '#' %}true{% else %}false{% endif %}" role="button">{% trans "Variable" %}</button>
</span>
{% endspaceless %}
<input id="{{ widget.name }}-input" {% if widget.value is None or widget_value|slice:":1" == '#' %}type="color"{% else %}type="text"{% endif %} name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget_value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
<div class="colour-or-text-input">
{% spaceless %}
<span id="{{ widget.name }}-joined-buttons" class="gadjo-joined-buttons">
<button data-mode="color" aria-pressed="{% if widget.value is None or widget_value|slice:":1" == '#' %}true{% else %}false{% endif %}" role="button">{% trans "Fixed" %}</button>
<button data-mode="text" aria-pressed="{% if widget.value != None and widget_value|slice:":1" != '#' %}true{% else %}false{% endif %}" role="button">{% trans "Variable" %}</button>
</span>
{% endspaceless %}
<input id="{{ widget.name }}-input" {% if widget.value is None or widget_value|slice:":1" == '#' %}type="color"{% else %}type="text"{% endif %} name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget_value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
</div>
{% endwith %}
<script>
$(function() {

View File

@ -678,6 +678,13 @@ form .choices {
justify-content: space-between;
}
.colour-or-text-input {
display: flex;
input {
margin-left: 0.5em;
}
}
#marker_colour-joined-buttons {
margin: 4px 0;
}