more bootstrap formatting

This commit is contained in:
Thomas Nahuel Rusiecki 2025-02-14 18:13:49 -03:00
parent 795e2ff6fa
commit 27177d06d0
4 changed files with 129 additions and 148 deletions

View file

@ -1,19 +1,24 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% load django_bootstrap5 %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ subtitle }}</h3> <h3>{{ subtitle }}</h3>
</div> </div>
</div> </div>
<div class="row mb-4">
{% load django_bootstrap5 %}
<div class="row mb-3">
<div class="col"> <div class="col">
Are you sure than want remove the lot {{ object.name }} with {{ object.devices.count }} devices. <div class="alert alert-warning" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
{% blocktranslate %}
Are you sure you want to remove the lot <strong>{{ object.name }}</strong> with <strong>{{ object.devices.count }}</strong> devices?
{% endblocktranslate %}
</div>
</div>
</div> </div>
</div>
<form role="form" method="post"> <form role="form" method="post">
{% csrf_token %} {% csrf_token %}
@ -31,7 +36,10 @@
{% bootstrap_form form %} {% bootstrap_form form %}
<div class="form-actions-no-box"> <div class="form-actions-no-box">
<a class="btn btn-grey" href="{% url 'admin:users' %}">{% translate "Cancel" %}</a> <a class="btn btn-grey" href="{% url 'admin:users' %}">{% translate "Cancel" %}</a>
<input class="btn btn-green-admin" type="submit" name="submit" value="{% translate 'Delete' %}" /> <button type="submit" class="btn btn-danger">
<i class="bi bi-trash me-1"></i>
{% translate "Delete" %}
</button>
</div> </div>
</form> </form>

View file

@ -28,33 +28,30 @@
<form role="form" method="post"> <form role="form" method="post">
{% csrf_token %} {% csrf_token %}
{% if form.errors %} {% if form.errors %}
<div class="alert alert-danger alert-icon alert-icon-border alert-dismissible" role="alert"> <div class="alert alert-danger alert-dismissible fade show" role="alert">
<div class="icon"><span class="mdi mdi-close-circle-o"></span></div> <div class="d-flex align-items-center">
<div class="message"> <i class="bi bi-exclamation-circle me-2"></i>
<div>
{% for field, error in form.errors.items %} {% for field, error in form.errors.items %}
{{ error }}<br /> {{ error }}<br />
{% endfor %} {% endfor %}
<button class="btn-close" type="button" data-dismiss="alert" aria-label="Close"></button>
</div> </div>
</div> </div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %} {% endif %}
{{ form.management_form }} {{ form.management_form }}
<div class="container" id="formset-container"> <div class="container" id="formset-container">
<div class="row mb-2"> <div class="row mb-3">
<div class="col"> <div class="col-md-4">
{% bootstrap_field form.0.type %} {% bootstrap_field form.0.type %}
</div> </div>
</div> <div class="col-md-4">
<div class="row mb-2">
<div class="col">
{% bootstrap_field form.0.amount %}
</div>
</div>
<div class="row mb-2">
<div class="col">
{% bootstrap_field form.0.custom_id %} {% bootstrap_field form.0.custom_id %}
</div> </div>
</div> <div class="col-md-4">
{% bootstrap_field form.0.amount %}
</div> </div>
<div class="row mb-2"> <div class="row mb-2">
<div class="col-10"> <div class="col-10">
<span class="fw-bold">{% trans 'Component details' %}</span> <span class="fw-bold">{% trans 'Component details' %}</span>

View file

@ -2,47 +2,44 @@
{% load i18n %} {% load i18n %}
<div class="tab-pane fade" id="user_properties"> <div class="tab-pane fade" id="user_properties">
<div class="d-flex justify-content-end mt-1 mb-3"> <div class="d-flex justify-content-end mt-3 mb-4">
<a href="{% url 'device:add_user_property' object.pk %}" <a href="{% url 'device:add_user_property' object.pk %}"
class="btn btn-green-admin d-flex align-items-center"> class="btn btn-green-user d-flex align-items-center">
<i class="bi bi-plus me-1"></i> <i class="bi bi-plus me-2"></i>
{% trans 'New user property' %} {% trans 'New user property' %}
</a> </a>
</div> </div>
<h5 class="card-title mb-4">{% trans 'User properties' %}</h5>
<h5 class="card-title">{% trans 'User properties' %}</h5> <div class="table-responsive">
<table class="table table-hover table-bordered align-middle">
<table class="table table-hover table-bordered table-responsive align-middle">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
<th scope="col">{% trans 'Key' %}</th> <th scope="col">{% trans 'Key' %}</th>
<th scope="col">{% trans 'Value' %}</th> <th scope="col">{% trans 'Value' %}</th>
<th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th> <th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th>
<th scope="col" width="5%" class="text-end" title="{% trans 'Actions' %}"></th> <th scope="col" width="10%" class="text-end">{% trans 'Actions' %}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for a in object.get_user_properties %} {% for a in object.get_user_properties %}
<tr> <tr>
<td>{{ a.key }} <td>{{ a.key }}</td>
</td> <td>{{ a.value }}</td>
<td>{{ a.value }} <td class="text-end">{{ a.created }}</td>
</td> <td class="text-end">
<td class="text-end">{{ a.created }} <div class="btn-group">
</td> <button type="button"
<td> class="btn btn-sm btn-outline-primary d-flex align-items-center me-2"
<div class="btn-group "> data-bs-toggle="modal"
<button data-bs-target="#editModal{{ a.id }}">
type="button"
class="btn btn-sm btn-outline-info d-flex align-items-center" data-bs-toggle="modal"
data-bs-target="#editModal{{ a.id }}" >
<i class="bi bi-pencil me-1"></i> <i class="bi bi-pencil me-1"></i>
{% trans 'Edit' %} {% trans 'Edit' %}
</button> </button>
<button <button type="button"
type="button"
class="btn btn-sm btn-outline-danger d-flex align-items-center" class="btn btn-sm btn-outline-danger d-flex align-items-center"
data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}"> data-bs-toggle="modal"
data-bs-target="#deleteModal{{ a.id }}">
<i class="bi bi-trash me-1"></i> <i class="bi bi-trash me-1"></i>
{% trans 'Delete' %} {% trans 'Delete' %}
</button> </button>
@ -53,39 +50,27 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<!-- pop up modal for delete confirmation --> <!-- pop up modal for delete confirmation -->
{% for a in object.get_user_properties %} {% for a in object.get_user_properties %}
<div class="modal fade" id="deleteModal{{ a.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ a.id }}" aria-hidden="true"> <div class="modal fade" id="deleteModal{{ a.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ a.id }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header bg-light">
<h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %} <h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %}</h5>
</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p><strong>{% trans "Key:" %}</strong> {{ a.key }}</p>
<strong>{% trans "Key:" %} <p><strong>{% trans "Value:" %}</strong> {{ a.value }}</p>
</strong> {{ a.key }} <p><strong>{% trans "Created on:" %}</strong> {{ a.created }}</p>
</p>
<p>
<strong>{% trans "Value:" %}
</strong> {{ a.value }}
</p>
<p>
<strong>{% trans "Created on:" %}
</strong> {{ a.created }}
</p>
</div> </div>
<div class="modal-footer justify-content-center"> <div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %} <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
</button>
<form method="post" action="{% url 'device:delete_user_property' object.id a.id %}"> <form method="post" action="{% url 'device:delete_user_property' object.id a.id %}">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-danger">{% trans "Delete" %} <button type="submit" class="btn btn-danger">{% trans "Delete" %}</button>
</button>
</form> </form>
</div> </div>
</div> </div>
@ -98,30 +83,24 @@
<div class="modal fade" id="editModal{{ a.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ a.id }}" aria-hidden="true"> <div class="modal fade" id="editModal{{ a.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ a.id }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header bg-light">
<h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %} <h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %}</h5>
</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' object.id a.id %}"> <form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' object.id a.id %}">
{% csrf_token %} {% csrf_token %}
<div class="mb-3"> <div class="mb-3">
<label for="key" class="form-label">{% trans "Key" %} <label for="key" class="form-label">{% trans "Key" %}</label>
</label>
<input type="text" class="form-control" id="key" name="key" value="{{ a.key }}"> <input type="text" class="form-control" id="key" name="key" value="{{ a.key }}">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="value" class="form-label">{% trans "Value" %} <label for="value" class="form-label">{% trans "Value" %}</label>
</label>
<input type="text" class="form-control" id="value" name="value" value="{{ a.value }}"> <input type="text" class="form-control" id="value" name="value" value="{{ a.value }}">
</div> </div>
<div class="modal-footer justify-content-center"> <div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %} <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
</button> <button type="submit" class="btn btn-primary">{% trans "Save changes" %}</button>
<button type="submit" class="btn btn-primary">{% trans "Save changes" %}
</button>
</div> </div>
</form> </form>
</div> </div>

View file

@ -1,25 +1,22 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% block actions %}
<a href="{% url 'lot:add_property' lot.pk %}" class="btn btn-green-admin d-flex align-items-center">
<i class="bi bi-plus pe-2"></i>
Add Property
<span class="caret"></span>
</a>
{% endblock %}
{% block content %} {% block content %}
<div class="row"> <h3>Lot {{ lot.name }}</h3>
<div class="col">
<h3>Lot {{ lot.name }}</h3>
</div>
</div>
<div class="row"> <div class="row">
<div class="tab-pane fade show active" id="details"> <div class="tab-pane fade show active" id="details">
<div class="d-flex justify-content-end mt-1 mb-3"> <div class="d-flex justify-content-end mt-1 mb-3">
<a href="{% url 'lot:add_property' lot.pk %}" class="btn btn-green-admin d-flex align-items-center">
<i class="bi bi-plus"></i>
Add new lot Property
<span class="caret"></span>
</a>
</div> </div>
<h5 class="card-title mt-2">Properties</h5>
<table class="table table-hover table-bordered table-responsive align-middle"> <table class="table table-hover table-bordered table-responsive align-middle">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>