1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Jeremy Stretch 073c2dc8ca Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#14833)
* Remove dark mode styling

* Condense & rename light mode stylesheet

* Upgrade to Bootstrap 5.3.2

* Swap out Bootstrap for Tabler; remove custom styling

* Update base page layout for Tabler

* Update login page

* Bump node to v18

* Update button styles

* Update object list view

* Tweak navbar size

* Clean up dashboard widgets

* Ditch separate stylesheet for print media

* Remove simplebar

* Remove obsolete sidebar styling

* Clean up object view template

* Clean up object edit template

* Standardize primary button sizing

* Clean up object list styling

* Add buttons for add & import to navigation menu

* Fix global search bar

* Fix slim-select form widget styling

* Fix toast styling

* Set base fonts

* Clean up paginator styling

* Clean up navigation menu group headings

* Clean up footer links

* Clean up card styles

* Move SVG styles to a designated directory

* Restructure SCSS files

* Remove obsolete/redundant dependencies

* Fix icon spacing

* Update background color classes

* Tweak banner & footer styling and spacing

* Fix badge background colors in table content

* Bump @types/bootstrap to 5.2.10

* Clean up form layouts

* Fix object selector button style

* Fix icon padding inside small buttons

* Fix icon & badge spacing inside buttons and tabs

* Hide paginator for empty pages

* Fix hover color for list items (Tabler bug #1694)

* Fix width of checkbox column in empty tables

* Clean up bulk edit template

* Fix border color of reslug button

* Package & serve Google fonts locally

* Fix tab styling

* Reduce vetical space at top of dashboard

* Remove obsolete content-wrapper template block

* Fix icon spacing in dropdown menu items

* Fix color label sizing

* Separate bulk delete form & object list into tabs

* Fix styling of filter group headings

* Fix styling for object changelog & journal views

* Standardize ordering & styling of action buttons

* Fix designation of active menu item

* Automatically expand menu section containing the active link

* Clean up nav menu styling

* Remove button colors; hide buttons except on hover/active

* Highlight menu group containing the active item

* Update & standardize alert styling

* Refactor base templates to ensure consistent display of header content

* Tweak styling for links inside badges

* Clean up top menu

* Fix JSON/YAML toggles for config context data

* Fix object template header

* Constrain tabs to container-xl; tweak header margins

* Fix object identifier styling

* Fix positioning of card header buttons

* Remove padding from HTMX tables inside cards

* Ensure consistent use of row headings in attribute tables

* Remove padding surrounding tables inside cards

* Remove obsolete CSS classes

* Misc cleanup of old styling

* Refactor 'controls' template block; ditch old classes

* Fix login button sizing

* Limit object edit form width

* Append asterisk to required form field labels

* Remove obsolete styling

* Remove obsolete styling

* Fix position of progress bar outside label

* Fix alignment of delete button in report/script lists

* Fix <pre> styling

* Clean up page headers

* Replace SVG icons with Material Design icons

* Restore dark mode togle functionality

* Fix top navbar background color under dark mode

* Rebuild static assets
2024-01-17 16:25:42 -05:00

203 lines
9.5 KiB
HTML

{% extends 'generic/_base.html' %}
{% load helpers %}
{% load form_helpers %}
{% load i18n %}
{% comment %}
Context:
model: The model class being imported
form: The bulk import form
fields: A dictionary of form fields, to display import options (optional)
return_url: The URL to which the user is redirected after submitting the form
{% endcomment %}
{% block title %}{{ model|meta:"verbose_name"|bettertitle }} {% trans "Bulk Import" %}{% endblock %}
{% block tabs %}
<ul class="nav nav-tabs">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="import-form-tab" data-bs-toggle="tab" data-bs-target="#import-form" data-href="#tab_import-form" type="button" role="tab" aria-controls="import-form" aria-selected="true">
{% trans "Direct Import" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="upload-form-tab" data-bs-toggle="tab" data-bs-target="#upload-form" data-href="#tab_upload-form" type="button" role="tab" aria-controls="upload-form" aria-selected="false">
{% trans "Upload File" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="datafile-form-tab" data-bs-toggle="tab" data-bs-target="#datafile-form" data-href="#tab_datafile-form" type="button" role="tab" aria-controls="datafile-form" aria-selected="false">
{% trans "Data File" %}
</button>
</li>
</ul>
{% endblock tabs %}
{% block content %}
{# Data Import Form #}
<div class="tab-pane show active" id="import-form" role="tabpanel" aria-labelledby="import-form-tab">
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
<form action="" method="post" enctype="multipart/form-data" class="form">
{% csrf_token %}
<input type="hidden" name="import_method" value="direct" />
{% render_field form.data %}
{% render_field form.format %}
{% render_field form.csv_delimiter %}
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
{% endif %}
<button type="submit" name="data_submit" class="btn btn-primary">{% trans "Submit" %}</button>
</div>
</div>
</form>
</div>
</div>
</div>
{# File Upload Form #}
<div class="tab-pane show" id="upload-form" role="tabpanel" aria-labelledby="upload-form-tab">
<div class="col col-md-12 col-lg-10 offset-lg-1">
<form action="" method="post" enctype="multipart/form-data" class="form">
{% csrf_token %}
<input type="hidden" name="import_method" value="upload" />
{% render_field form.upload_file %}
{% render_field form.format %}
{% render_field form.csv_delimiter %}
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
{% endif %}
<button type="submit" name="file_submit" class="btn btn-primary">{% trans "Submit" %}</button>
</div>
</div>
</form>
</div>
</div>
{# DataFile Form #}
<div class="tab-pane show" id="datafile-form" role="tabpanel" aria-labelledby="datafile-form-tab">
<div class="col col-md-12 col-lg-10 offset-lg-1">
<form action="" method="post" enctype="multipart/form-data" class="form">
{% csrf_token %}
<input type="hidden" name="import_method" value="datafile" />
{% render_field form.data_source %}
{% render_field form.data_file %}
{% render_field form.format %}
{% render_field form.csv_delimiter %}
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
{% endif %}
<button type="submit" name="file_submit" class="btn btn-primary">{% trans "Submit" %}</button>
</div>
</div>
</form>
</div>
</div>
{% if fields %}
<div class="row my-3">
<div class="col col-md-12">
<div class="card">
<h5 class="card-header">{% trans "Field Options" %}</h5>
<table class="table">
<tr>
<th>{% trans "Field" %}</th>
<th>{% trans "Required" %}</th>
<th>{% trans "Accessor" %}</th>
<th>{% trans "Description" %}</th>
</tr>
{% for name, field in fields.items %}
<tr>
<td>
<code>{% if field.required %}<strong>{% endif %}{{ name }}{% if field.required %}</strong>{% endif %}</code>
</td>
<td>
{% if field.required %}
{% checkmark True true="Required" %}
{% else %}
{{ ''|placeholder }}
{% endif %}
</td>
<td>
{% if field.to_field_name %}
<code>{{ field.to_field_name }}</code>
{% else %}
{{ ''|placeholder }}
{% endif %}
</td>
<td>
{% if field.STATIC_CHOICES %}
<button type="button" class="btn btn-link float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices">
<i class="mdi mdi-help-circle"></i>
</button>
<div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><code>{{ name }}</code> {% trans "Choices" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-striped">
<tr>
<th>{% trans "Import Value" %}</th>
<th>{% trans "Label" %}</th>
</tr>
{% for value, label in field.choices %}
{% if value %}
<tr>
<td>
<samp>{{ value }}</samp>
</td>
<td>
{{ label }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</div>
</div>
</div>
{% endif %}
{% if field.help_text %}
{{ field.help_text }}<br />
{% elif field.label %}
{{ field.label }}<br />
{% endif %}
{% if field|widget_type == 'dateinput' %}
<small class="text-muted">{% trans "Format: YYYY-MM-DD" %}</small>
{% elif field|widget_type == 'checkboxinput' %}
<small class="text-muted">{% trans "Specify true or false" %}</small>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<p class="small text-muted">
<i class="mdi mdi-check-bold text-success"></i>
{% blocktrans trimmed %}
Required fields <strong>must</strong> be specified for all objects.
{% endblocktrans %}
</p>
<p class="small text-muted">
<i class="mdi mdi-information-outline"></i>
{% blocktrans trimmed with example="vrf.rd" %}
Related objects may be referenced by any unique attribute. For example, <code>{{ example }}</code> would identify a VRF by its route distinguisher.
{% endblocktrans %}
</p>
{% endif %}
{% endblock content %}