The experiment with floating labels is a success!
This commit is contained in:
Yaro Kasear
parent
d0551d52a1
commit
c3ad0fba84
5 changed files with 49 additions and 39 deletions
|
|
@ -33,27 +33,27 @@ def _fields_for_model(model: str):
|
|||
"attrs": {"class": "display-6 mb-3"}, "wrap": {"class": "col"}},
|
||||
{"name": "buttons", "label": "", "row": "label", "type": "template", "template": "entry_buttons.html",
|
||||
"wrap": {"class": "col-auto text-end me-2"}, "attrs": {"data-model": model}},
|
||||
{"name": "name", "row": "names", "label": "Name", "wrap": {"class": "col-3"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
|
||||
{"name": "serial", "row": "names", "label": "Serial #", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
|
||||
{"name": "barcode", "row": "names", "label": "Barcode #", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
|
||||
{"name": "brand", "label_spec": "{name}", "row": "device", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label": "Brand", "label_attrs": {"class": "form-label"}},
|
||||
{"name": "model", "row": "device", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label": "Model #", "label_attrs": {"class": "form-label"}},
|
||||
{"name": "device_type", "label_spec": "{description}", "row": "device", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label": "Device Type", "label_attrs": {"class": "form-label"}},
|
||||
{"name": "owner", "row": "status", "label": "Contact", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"},
|
||||
{"name": "name", "row": "names", "label": "Name", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control", "placeholder": "Device Name"}, "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "serial", "row": "names", "label": "Serial #", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control", "placeholder": "Serial Number"}, "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "barcode", "row": "names", "label": "Barcode #", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control", "placeholder": "Bar Code"}, "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "brand", "label_spec": "{name}", "row": "device", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control"}, "label": "Brand", "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "model", "row": "device", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control", "placeholder": "Model Number"}, "label": "Model #", "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "device_type", "label_spec": "{description}", "row": "device", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control"}, "label": "Device Type", "label_attrs": {"class": "ms-2"}},
|
||||
{"name": "owner", "row": "status", "label": "Contact", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "ms-2 link-label"},
|
||||
"label_spec": "{label}", "link": {"endpoint": "entry.entry", "params": {"model": "user", "id": "{owner.id}"}},
|
||||
"options_params": {"active__eq": True}},
|
||||
{"name": "location", "row": "status", "label": "Location", "wrap": {"class": "col"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"},
|
||||
{"name": "location", "row": "status", "label": "Location", "wrap": {"class": "col form-floating"},
|
||||
"attrs": {"class": "form-control"}, "label_attrs": {"class": "ms-2"},
|
||||
"label_spec": "{name} - {room_function.description}"},
|
||||
{"name": "condition", "label": "Condition", "row": "status", "wrap": {"class": "col"},
|
||||
"label_attrs": {"class": "form-label"}, "label_spec": "{description}"},
|
||||
{"name": "condition", "label": "Condition", "row": "status", "wrap": {"class": "col form-floating"},
|
||||
"label_attrs": {"class": "ms-2"}, "label_spec": "{description}"},
|
||||
{"name": "image", "label": "", "row": "image", "type": "template", "label_spec": "{filename}",
|
||||
"template": "image_display.html", "attrs": {"class": "img-fluid img-thumbnail h-auto"},
|
||||
"wrap": {"class": "h-100 w-100"}},
|
||||
|
|
|
|||
|
|
@ -2,3 +2,11 @@
|
|||
border-color: rgb(222, 226, 230) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link-label a {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ DropDown.utilities = {
|
|||
const inp = document.getElementById(id);
|
||||
|
||||
btn.dataset.value = value;
|
||||
btn.textContent = txt;
|
||||
btn.value = txt;
|
||||
|
||||
inp.value = value;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,4 @@
|
|||
<!-- FIELD: {{ field_name }} ({{ field_type }}) -->
|
||||
{% if field_type != 'hidden' and field_label %}
|
||||
<label for="{{ field_name }}" {% if label_attrs %}{% for k,v in label_attrs.items() %} {{k}}{% if v is not sameas true
|
||||
%}="{{ v }}" {% endif %} {% endfor %}{% endif %}>
|
||||
{% if link_href %}
|
||||
<a href="{{ link_href }}" class="link-success link-underline link-underline-opacity-0 fw-semibold">
|
||||
{% endif %}
|
||||
{{ field_label }}
|
||||
{% if link_href %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</label>
|
||||
{% endif %}
|
||||
|
||||
{% if field_type == 'select' %}
|
||||
{#
|
||||
|
|
@ -47,9 +35,11 @@
|
|||
{% else %}
|
||||
{% set sel_label = "-- Select --" %}
|
||||
{% endif %}
|
||||
<button type="button" class="btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
|
||||
id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}">{{ sel_label }}</button>
|
||||
<div class="dropdown-menu pt-0" id="{{ field_name }}-dropdown">
|
||||
<!-- button type="button" class="btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
|
||||
id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}">{{ sel_label }}</button -->
|
||||
<input type="button" class="form-control btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
|
||||
id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}" value="{{ sel_label }}">
|
||||
<div class="dropdown-menu pt-0" id="{{ field_name }}-dropdown">
|
||||
<input type="text" class="form-control mt-0 border-top-0 border-start-0 border-end-0 rounded-bottom-0"
|
||||
id="{{ field_name }}-filter" placeholder="Filter..." oninput="DropDown.utilities.filterList('{{ field_name }}')">
|
||||
{% for opt in options %}
|
||||
|
|
@ -100,4 +90,16 @@
|
|||
|
||||
{% if help %}
|
||||
<div class="form-text">{{ help }}</div>
|
||||
{% endif %}
|
||||
{% if field_type != 'hidden' and field_label %}
|
||||
<label for="{{ field_name }}" {% if label_attrs %}{% for k,v in label_attrs.items() %} {{k}}{% if v is not sameas true
|
||||
%}="{{ v }}" {% endif %} {% endfor %}{% endif %}>
|
||||
{% if link_href %}
|
||||
<a href="{{ link_href }}" class="link-success link-underline link-underline-opacity-0 fw-semibold">
|
||||
{% endif %}
|
||||
{{ field_label }}
|
||||
{% if link_href %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</label>
|
||||
{% endif %}
|
||||
|
|
@ -3,13 +3,13 @@
|
|||
<label class="form-label mt-2">Work Logs</label>
|
||||
{% set wl = field['template_ctx']['values']['work_logs'] %}
|
||||
{% set check %}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
|
||||
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg text-success" viewBox="0 0 16 16">
|
||||
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
|
||||
</svg>
|
||||
{% endset %}
|
||||
{% set x %}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
|
||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg text-danger" viewBox="0 0 16 16">
|
||||
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
|
||||
</svg>
|
||||
{% endset %}
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<td>{{ l['work_item']['label'] if l['work_item'] else '-' }}</td>
|
||||
<td>{{ l.start_time if l.start_time else '-' }}</td>
|
||||
<td>{{ l.end_time if l.end_time else '-' }}</td>
|
||||
<td class="text-center">{{ check if l.complete else x }}</td>
|
||||
<td class="text-center align-items-center {{ 'bg-success-subtle' if l.complete else 'bg-danger-subtle' }}">{{ check if l.complete else x }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue