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 advanced fields styling 

on mobile it text align center
Increased the font size so its easier to click
Added translations
This commit is contained in:
billybonks 2024-02-07 15:01:30 +08:00 committed by Christopher Charbonneau Wells
parent 232cde19ee
commit b7743674d8
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,8 +53,18 @@
} }
} }
form .row details { @include media-breakpoint-down(md) {
.advanced-fields__summary {
text-align: center;
}
}
.advanced-fields__summary > * {
display: inline
}
.advanced-fields {
// removing this causes slight mis-alignment between fields in the details and the rest of the fields // removing this causes slight mis-alignment between fields in the details and the rest of the fields
//on the form at the left hand side of the box //on the form at the left hand side of the box
padding-right: 0; padding-right: 0;
} }

7
core/templates/forms/layouts/advanced.html
View File

@ -1,7 +1,10 @@
{% load i18n %}
<div class="row"> <div class="row">
<div class="row mb-3"> <div class="row mb-3">
<details ontoggle="rememberAdvancedToggle(event)"> <details ontoggle="rememberAdvancedToggle(event)" class="advanced-fields">
<summary>Advanced</summary> <summary class="advanced-fields__summary">
<h4>{% trans "Advanced Fields" %}</h4>
</summary>
{% for field in fieldset.fields %} {% for field in fieldset.fields %}
<div class="row">{% include "babybuddy/form_field.html" %}</div> <div class="row">{% include "babybuddy/form_field.html" %}</div>
{% endfor %} {% endfor %}