steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

feat: improve styling of pill groups 

1. add default spacing
2. increase size to use all space on mobile
This commit is contained in:
billybonks 2024-02-21 08:33:52 +08:00 committed by Christopher Charbonneau Wells
parent f2190ce387
commit dd4e565008
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
babybuddy/static_src/scss/forms.scss
View File

@ -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 {

2
core/templates/core/pill_radio.html
View File

@ -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 != '' %}

2
core/templates/forms/layouts/choices.html
View File

@ -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 %}