mirror of https://github.com/snachodog/mybuddy.git
feat: improve styling of pill groups
1. add default spacing 2. increase size to use all space on mobile
This commit is contained in:
parent
f2190ce387
commit
dd4e565008
|
@ -33,6 +33,20 @@
|
||||||
z-index: 1030;
|
z-index: 1030;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pill-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 10px;
|
||||||
|
row-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only grow pill buttons on when using a mobile
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
.pill-container>label {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Tweak padding on form field help blocks.
|
// Tweak padding on form field help blocks.
|
||||||
.help-block {
|
.help-block {
|
||||||
ul {
|
ul {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{% with id=widget.attrs.id %}
|
{% with id=widget.attrs.id %}
|
||||||
<div {% if id %}id="{{ id }}"{% endif %} class="radio-container">
|
<div {% if id %}id="{{ id }}"{% endif %} class="pill-container">
|
||||||
{% for group, options, index in widget.optgroups %}
|
{% for group, options, index in widget.optgroups %}
|
||||||
{% for option in options %}
|
{% for option in options %}
|
||||||
{% if option.value != '' %}
|
{% if option.value != '' %}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<label for="id_child" class="col-sm-2 col-form-label">{% trans fieldset.layout_attrs.label %}</label>
|
<label for="id_child" class="col-sm-2 col-form-label">{% trans fieldset.layout_attrs.label %}</label>
|
||||||
<div class="col-sm-10 overflow-auto">
|
<div class="col-sm-10 overflow-auto pill-container">
|
||||||
{% for field in fieldset.fields %}
|
{% for field in fieldset.fields %}
|
||||||
{% include "babybuddy/form_field_no_label.html" %}
|
{% include "babybuddy/form_field_no_label.html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
Loading…
Reference in New Issue