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;
|
||||
}
|
||||
|
||||
.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.
|
||||
.help-block {
|
||||
ul {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% 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 option in options %}
|
||||
{% if option.value != '' %}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{% load i18n %}
|
||||
<div class="row mb-3">
|
||||
<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 %}
|
||||
{% include "babybuddy/form_field_no_label.html" %}
|
||||
{% endfor %}
|
||||
|
|
Loading…
Reference in New Issue