Use djlint for js and css

This commit is contained in:
Adam Goldsmith 2022-11-07 12:48:57 -05:00
parent 0a8e2ccad9
commit 9bf33f9b50
2 changed files with 52 additions and 39 deletions

View File

@ -37,6 +37,15 @@ extension = ".dj.html"
indent = 2 indent = 2
blank_line_after_tag = "load,extends" blank_line_after_tag = "load,extends"
ignore = "T003,H017,H021,H030,H031" ignore = "T003,H017,H021,H030,H031"
format_css = true
format_js = true
[tool.djlint.css]
indent_size = 2
[tool.djlint.js]
indent_size = 2
[[tool.pdm.source]] [[tool.pdm.source]]
url = "https://pypi.org/simple" url = "https://pypi.org/simple"

View File

@ -9,47 +9,50 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<style> <style>
.locker-bank { .locker-bank {
text-align: center; text-align: center;
} }
.lockers { .lockers {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.locker { .locker {
display: grid; display: grid;
background-color: #333333; background-color: #333333;
border-radius: 0.4rem; border-radius: 0.4rem;
padding: 0.7rem; padding: 0.7rem;
gap: 0.5rem; gap: 0.5rem;
} }
.locker .door { .locker .door {
background-color: hsl(24, 100%, 25%); background-color: hsl(24, 100%, 25%);
border: 0.2rem solid black; border: 0.2rem solid black;
border-radius: 0.5rem; border-radius: 0.5rem;
aspect-ratio: 1; aspect-ratio: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: lightgray; color: lightgray;
} }
.locker .door[data-available="False"] {
background-color: hsl(24, 15%, 25%);;
}
.form-floating .select2-container .select2-selection { .locker .door[data-available="False"] {
height: 3.5em; background-color: hsl(24, 15%, 25%);
padding: 1.625rem .25rem; ;
} }
.form-floating .select2-container .select2-selection .select2-selection__rendered {
padding-right: 0.25rem; .form-floating .select2-container .select2-selection {
} height: 3.5em;
padding: 1.625rem .25rem;
}
.form-floating .select2-container .select2-selection .select2-selection__rendered {
padding-right: 0.25rem;
}
</style> </style>
{% for bank, units in locker_banks.items %} {% for bank, units in locker_banks.items %}
<div class="locker-bank" data-bank="{{ bank.slug }}"> <div class="locker-bank" data-bank="{{ bank.slug }}">
@ -58,10 +61,11 @@
<div class="lockers"> <div class="lockers">
{% for unit, lockers in units.items %} {% for unit, lockers in units.items %}
<div class="locker" <div class="locker"
style="grid-template-columns: repeat({{ unit.columns }}, minmax(7rem, 8.5rem));"> style="grid-template-columns: repeat({{ unit.columns }}, minmax(7rem, 8.5rem))">
{% for locker_form in lockers %} {% for locker_form in lockers %}
<div class="dropdown" <div class="dropdown"
style="grid-row-start: {{ locker_form.instance.row|add:'1' }}; grid-column-start: {{ locker_form.instance.column|add:'1' }}"> style="grid-row-start: {{ locker_form.instance.row|add:'1' }};
grid-column-start: {{ locker_form.instance.column|add:'1' }}">
<span class="door {{ perms.rentals.view_lockerinfo|yesno:"btn dropdown-toggle," }}" <span class="door {{ perms.rentals.view_lockerinfo|yesno:"btn dropdown-toggle," }}"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
data-bs-auto-close="outside" data-bs-auto-close="outside"