Set max width for object edit forms

This commit is contained in:
jeremystretch 2021-08-13 13:35:23 -04:00
parent a6150f2578
commit 9f59f99663
8 changed files with 145 additions and 152 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -647,6 +647,11 @@ span.color-label {
}
}
.form-object-edit {
margin: 0 auto;
max-width: 800px;
}
textarea.form-control[rows='10'] {
height: 18rem;
}

View File

@ -4,7 +4,7 @@
{% block form_fields %}
{% if form.instance.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Device</label>
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
</div>

View File

@ -6,7 +6,7 @@
<h4 class="mb-3">Interface</h4>
{% if form.instance.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label required" for="id_device">Device</label>
<label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Device</label>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
</div>

View File

@ -5,100 +5,94 @@
{% block title %}{% if vc_form.instance %}Editing Virtual Chassis {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
{% block content %}
<form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
<form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
{% csrf_token %}
{{ pk_form.pk }}
{{ formset.management_form }}
<div class="row">
<div class="col col-md-8 offset-md-2">
<div class="card">
<h5 class="card-header">Virtual Chassis</h5>
<div class="card-body">
{% render_field vc_form.name %}
{% render_field vc_form.domain %}
{% render_field vc_form.master %}
{% render_field vc_form.tags %}
</div>
</div>
{% if vc_form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields vc_form %}
</div>
</div>
{% endif %}
<div class="card">
<h5 class="card-header">Members</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>ID</th>
<th>Rack/Unit</th>
<th>Serial</th>
<th>Position</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% with device=form.instance virtual_chassis=vc_form.instance %}
<tr>
<td>
<a href="{{ device.get_absolute_url }}">{{ device }}</a>
</td>
<td>{{ device.pk }}</td>
<td>
{% if device.rack %}
{{ device.rack }} / {{ device.position }}
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>{{ device.serial|placeholder }}</td>
<td>
{{ form.vc_position }}
{% if form.vc_position.errors %}
<br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
{% endif %}
</td>
<td>
{{ form.vc_priority }}
{% if form.vc_priority.errors %}
<br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
{% endif %}
</td>
<td>
{% if virtual_chassis.pk %}
<a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
<span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
</a>
{% endif %}
</td>
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="card">
<h5 class="card-header">Virtual Chassis</h5>
<div class="card-body">
{% render_field vc_form.name %}
{% render_field vc_form.domain %}
{% render_field vc_form.master %}
{% render_field vc_form.tags %}
</div>
</div>
<div class="row my-3">
<div class="col col-md-8 offset-md-2 text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if vc_form.instance.pk %}
<button type="submit" name="_update" class="btn btn-primary">Save</button>
{% else %}
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
{% if vc_form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields vc_form %}
</div>
</div>
{% endif %}
<div class="card">
<h5 class="card-header">Members</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>ID</th>
<th>Rack/Unit</th>
<th>Serial</th>
<th>Position</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% with device=form.instance virtual_chassis=vc_form.instance %}
<tr>
<td>
<a href="{{ device.get_absolute_url }}">{{ device }}</a>
</td>
<td>{{ device.pk }}</td>
<td>
{% if device.rack %}
{{ device.rack }} / {{ device.position }}
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>{{ device.serial|placeholder }}</td>
<td>
{{ form.vc_position }}
{% if form.vc_position.errors %}
<br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
{% endif %}
</td>
<td>
{{ form.vc_priority }}
{% if form.vc_priority.errors %}
<br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
{% endif %}
</td>
<td>
{% if virtual_chassis.pk %}
<a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
<span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
</a>
{% endif %}
</td>
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if vc_form.instance.pk %}
<button type="submit" name="_update" class="btn btn-primary">Save</button>
{% else %}
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
</div>
</form>
{% endblock %}

View File

@ -31,72 +31,66 @@
{% block content-wrapper %}
<div class="tab-content">
<div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
<form action="" method="post" enctype="multipart/form-data">
<form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
{% csrf_token %}
{% for field in form.hidden_fields %}{{ field }}{% endfor %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
{% block form %}
{% if form.Meta.fieldsets %}
{% block form %}
{% if form.Meta.fieldsets %}
{# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %}
<div class="field-group">
<h5 class="text-center">{{ group }}</h5>
{% for name in fields %}
{% render_field form|getfield:name %}
{% endfor %}
</div>
{# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %}
<div class="field-group">
<h5 class="text-center">{{ group }}</h5>
{% for name in fields %}
{% render_field form|getfield:name %}
{% endfor %}
</div>
{% endfor %}
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
{% render_custom_fields form %}
</div>
{% endif %}
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
{% render_custom_fields form %}
</div>
{% endif %}
{% if form.comments %}
<div class="field-group">
{% render_field form.comments label='Comments' %}
</div>
{% endif %}
{% if form.comments %}
<div class="field-group">
{% render_field form.comments label='Comments' %}
</div>
{% endif %}
{% else %}
{# Render all fields in a single group #}
<div class="field-group">
<h5 class="text-center">{{ obj_type|capfirst }}</h5>
{% block form_fields %}{% render_form form %}{% endblock %}
</div>
{% endif %}
{% else %}
{# Render all fields in a single group #}
<div class="field-group">
<h5 class="text-center">{{ obj_type|capfirst }}</h5>
{% block form_fields %}{% render_form form %}{% endblock %}
</div>
{% endif %}
{% endblock form %}
</div>
</div>
{% endblock form %}
<div class="row my-3">
<div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
<div class="text-end my-3">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if obj.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% if obj.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another
</button>
<button type="submit" name="_create" class="btn btn-primary">
Create
</button>
{% endif %}
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another
</button>
<button type="submit" name="_create" class="btn btn-primary">
Create
</button>
{% endif %}
{% endblock buttons %}
</div>
{% endblock buttons %}
</div>
</form>
</div>

View File

@ -6,7 +6,7 @@
<h5 class="text-center">Interface</h5>
{% if form.instance.virtual_machine %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label required" for="id_device">Virtual Machine</label>
<label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Virtual Machine</label>
<div class="col">
<input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
</div>
@ -36,12 +36,12 @@
{% endblock %}
{% block buttons %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if obj.pk %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if obj.pk %}
<button type="submit" formaction="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
<button type="submit" name="_update" class="btn btn-primary">Save</button>
{% else %}
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
{% endif %}
{% endblock %}