mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#14833)

Browse Source 
* 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
This commit is contained in:
Jeremy Stretch
2024-01-17 16:25:42 -05:00
committed by GitHub
parent 8254e707b6
commit 073c2dc8ca
384 changed files with 11579 additions and 10019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/templates/base/40x.html
View File

@@ -14,7 +14,7 @@
{% block message %}{% endblock %}
</div>
<div class="card-footer text-end">
<a href="{% url 'home' %}" class="btn btn-sm btn-primary">{% trans "Home Page" %}</a>
<a href="{% url 'home' %}" class="btn btn-primary">{% trans "Home Page" %}</a>
</div>
</div>
</div>

61
netbox/templates/base/base.html
View File

@@ -19,24 +19,12 @@
>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover"
/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover" />
{# Page title #}
<title>{% block title %}{% trans "Home" %}{% endblock %} | NetBox</title>
<script
type="text/javascript"
src="{% static 'setmode.js' %}"
onerror="window.location='{% url 'media_failure' %}?filename=setmode.js'">
</script>
<script type="text/javascript">
(function () {
initMode()
})();
window.CSRF_TOKEN = "{{ csrf_token }}";
</script>
@@ -48,19 +36,8 @@
/>
<link
rel="stylesheet"
href="{% static 'netbox-light.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'"
/>
<link
rel="stylesheet"
href="{% static 'netbox-dark.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
/>
<link
rel="stylesheet"
media="print"
href="{% static 'netbox-print.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox-print.css'"
href="{% static 'netbox.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox.css'"
/>
<link rel="icon" type="image/png" href="{% static 'netbox.ico' %}" />
<link rel="apple-touch-icon" type="image/png" href="{% static 'netbox_touch-icon-180.png' %}" />
@@ -76,33 +53,11 @@
{% block head %}{% endblock %}
</head>
<body>
<script type="text/javascript">
function checkSideNav() {
// Check localStorage to see if the sidebar should be pinned.
var sideNavRaw = localStorage.getItem('netbox-sidenav');
// Determine if the device has a small screeen. This media query is equivalent to
// bootstrap's media-breakpoint-down(lg) breakpoint mixin, which is what the sidenav's
// CSS uses.
var isSmallScreen = window.matchMedia('(max-width: 991.98px)').matches;
if (typeof sideNavRaw === 'string') {
var sideNavState = JSON.parse(sideNavRaw);
if (sideNavState.pinned === true && !isSmallScreen) {
// If the sidebar should be pinned and this is not a small screen, set the appropriate
// body attributes prior to the rest of the content rendering. This prevents
// jumpy/glitchy behavior on page reloads.
document.body.setAttribute('data-sidenav-pinned', '');
document.body.setAttribute('data-sidenav-show', '');
document.body.removeAttribute('data-sidenav-hidden');
} else {
document.body.removeAttribute('data-sidenav-pinned');
document.body.setAttribute('data-sidenav-hidden', '');
}
}
}
window.addEventListener('resize', function(){ checkSideNav() });
checkSideNav();
</script>
<body
{% if preferences|get_key:'ui.colormode' == 'dark' %}
data-bs-theme="dark"
{% endif %}
>
{# Page layout #}
{% block layout %}{% endblock %}

270
netbox/templates/base/layout.html
View File

@@ -1,6 +1,7 @@
{# Base layout for the core NetBox UI w/navbar and page content #}
{% extends 'base/base.html' %}
{% load helpers %}
{% load navigation %}
{% load static %}
{% load i18n %}
@@ -14,167 +15,184 @@ Blocks:
{% block layout %}
<div class="container-fluid px-0">
<main class="layout">
<div class="page">
{# Sidebar #}
{% include 'base/sidenav.html' %}
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
{# Body #}
<div class="content-container" tabindex="-2">
{# Header icon #}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark">
<a href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" height="32" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
</a>
</h1>
{# NetBox Logo, only visible when printing #}
<div class="p-2 printonly">
<img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox logo" %}" width="200px" />
{# Navigation menu #}
<div class="collapse navbar-collapse" id="sidebar-menu">
{% nav %}
</div>
{# Top bar #}
<nav class="navbar navbar-light sticky-top flex-md-nowrap p-1 mb-3 search container-fluid noprint">
</div>
</aside>
{# Mobile Navigation #}
<div class="nav-mobile">
<div class="nav-mobile-top">
<a class="sidebar-logo p-2 d-block" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox logo" %}" height="40" />
</a>
<button type="button" aria-label="Toggle Navigation" class="navbar-toggler sidenav-toggle-mobile">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-flex my-1 flex-grow-1 justify-content-center w-100">
{% include 'inc/searchbar.html' %}
</div>
{# Top menu #}
<header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
<div class="container-xl">
{# Nav menu toggle #}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav flex-row align-items-center order-md-last">
{# Dark/light mode toggle #}
<div class="d-none d-md-flex">
<button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="mdi mdi-lightbulb"></i>
</button>
<button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="mdi mdi-lightbulb-on"></i>
</button>
</div>
{# User menu #}
{% include 'inc/user_menu.html' %}
</div>
{# Search box #}
<div class="collapse navbar-collapse" id="navbar-menu">
<form action="{% url 'search' %}" method="get" autocomplete="off" novalidate>
<div class="input-icon">
<span class="input-icon-addon">
<i class="mdi mdi-magnify"></i>
</span>
<input type="text" name="q" value="" class="form-control" placeholder="Search…" aria-label="Search NetBox">
</div>
</form>
</div>
{# Desktop Navigation #}
<div class="row search-container">
</div>
</header>
{# Empty spacer column to ensure search is centered. #}
<div class="col-3 d-flex flex-grow-1 ps-0"></div>
{# Page content #}
<div class="page-wrapper">
{# Search bar #}
<div class="col-6 d-flex flex-grow-1 justify-content-center">
{% include 'inc/searchbar.html' %}
</div>
{# Proflie/login button #}
<div class="col-3 d-flex flex-grow-1 pe-0 justify-content-end">
{% include 'inc/profile_button.html' %}
</div>
</div>
</nav>
{# Page header #}
{% block header %}
{# Top banner #}
{% if config.BANNER_TOP %}
<div class="text-center mx-3">
{{ config.BANNER_TOP|safe }}
</div>
{% include 'inc/banner.html' with content=config.BANNER_TOP %}
{% endif %}
{# /Top banner #}
{# Alerts #}
{% if settings.DEBUG and not settings.DEVELOPER %}
<div class="alert alert-warning text-center mx-3" role="alert">
<strong><i class="mdi mdi-alert"></i> {% trans "Debug mode is enabled" %}.</strong>
{% trans "Performance may be limited. Debugging should never be enabled on a production system" %}.
</div>
{% include 'inc/alerts/warning.html' with title="Debug mode is enabled" message="Performance may be limited. Debugging should never be enabled on a production system." %}
{% endif %}
{% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
<div class="alert alert-warning text-center mx-3" role="alert">
<h5><i class="mdi mdi-alert"></i> {% trans "Maintenance Mode" %}</h5>
{{ config.BANNER_MAINTENANCE|escape }}
</div>
{% include 'inc/alerts/warning.html' with title="Maintenance Mode" message=config.BANNER_MAINTENANCE|escape %}
{% endif %}
{# /Alerts #}
{# Page header #}
{% block header %}
<div class="title-container px-3 pb-3">
{% endblock header %}
{# /Page header #}
{# Title #}
<div id="content-title">
{# Center-align title in object-edit views #}
<h1 class="h2 w-100">{% block title %}{% endblock title %}</h1>
{% block subtitle %}{% endblock %}
</div>
{# Page body #}
{% block page %}
<div class="page-body my-1">
<div class="container-xl tab-content py-3">
{# Controls #}
{% block controls %}{% endblock controls %}
{# Page content #}
{% block content %}{% endblock %}
{# /Page content #}
</div>
{% endblock header %}
{# Page content #}
<div id="content" class="container-fluid content px-0 m-0">
{% block tabs %}{% endblock %}
{% block content-wrapper %}
<div class="px-3">
{% block content %}{% endblock %}
</div>
{% endblock %}
{# Bottom banner #}
{% if config.BANNER_BOTTOM %}
<div class="text-center mx-3">
{{ config.BANNER_BOTTOM|safe }}
</div>
{% endif %}
</div>
{% endblock page %}
{# /Page body #}
{# BS5 pop-up modals #}
{% block modals %}{% endblock %}
{# Bottom banner #}
{% if config.BANNER_BOTTOM %}
{% include 'inc/banner.html' with content=config.BANNER_BOTTOM %}
{% endif %}
{# /Bottom banner #}
{# Page footer #}
<footer class="footer container-fluid">
{# Page footer #}
<footer class="footer footer-transparent d-print-none py-2">
<div class="container-xl d-flex justify-content-between align-items-center">
{% block footer %}
<div class="row align-items-center justify-content-between mx-0">
<div class="col-sm-12 col-md-auto fs-4 noprint">
<nav class="nav justify-content-center justify-content-lg-start">
{% block footer_links %}
{# Documentation #}
<a type="button" class="nav-link" href="{% static 'docs/' %}" target="_blank">
<i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{# REST API #}
<a type="button" class="nav-link" href="{% url 'api-root' %}" target="_blank">
<i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{# API docs #}
<a type="button" class="nav-link" href="{% url 'api_docs' %}" target="_blank">
<i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{# GraphQL API #}
{% if config.GRAPHQL_ENABLED %}
<a type="button" class="nav-link" href="{% url 'graphql' %}" target="_blank">
{# Footer links #}
<ul class="list-inline mb-0 fs-2">
{% block footer_links %}
{# Documentation #}
<li class="list-inline-item">
<a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
</li>
{# REST API #}
<li class="list-inline-item">
<a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
</li>
{# API docs #}
<li class="list-inline-item">
<a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
</li>
{# GraphQL API #}
{% if config.GRAPHQL_ENABLED %}
<li class="list-inline-item">
<a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "GraphQL API" %}" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{% endif %}
</li>
{% endif %}
{# GitHub #}
<li class="list-inline-item">
<a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
</li>
{# NetDev Slack #}
<li class="list-inline-item">
<a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener">
<i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
</li>
{% endblock footer_links %}
</ul>
{# /Footer links #}
{# GitHub #}
<a type="button" class="nav-link" href="https://github.com/netbox-community/netbox" target="_blank">
<i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{# Footer text #}
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
{% annotated_now %} {% now 'T' %}
</li>
<li class="list-inline-item">
{{ settings.HOSTNAME }} (v{{ settings.VERSION }})
</li>
</ul>
{# /Footer text #}
{# NetDev Slack #}
<a type="button" class="nav-link" href="https://netdev.chat/" target="_blank">
<i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
</a>
{% endblock footer_links %}
</nav>
</div>
<div class="col-sm-12 col-md-auto text-center text-lg-end text-muted">
<span class="d-block d-md-inline">{% annotated_now %} {% now 'T' %}</span>
<span class="ms-md-3 d-block d-md-inline">{{ settings.HOSTNAME }} (v{{ settings.VERSION }})</span>
</div>
</div>
{% endblock footer %}
</footer>
</div>
</footer>
{# /Page footer #}
</div>
{# /Page content #}
</div>
{# BS5 pop-up modals #}
{% block modals %}{% endblock %}
</main>
</div>
{% endblock layout %}

44
netbox/templates/base/sidenav.html
View File

@@ -1,44 +0,0 @@
{% load navigation %}
{% load static %}
{% load i18n %}
<nav class="sidenav noprint" id="sidenav" data-simplebar>
<div class="sidenav-header">
{# Brand #}
{# Full Logo #}
<a class="sidenav-brand" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" height="48" class="sidenav-brand-img" alt="{% trans "NetBox Logo" %}">
</a>
{# Icon Logo #}
<a class="sidenav-brand-icon" href="{% url 'home' %}">
<img src="{% static 'netbox_icon.svg' %}" height="32" class="sidenav-brand-img" alt="{% trans "NetBox Logo" %}">
</a>
{# Pin/Unpin Toggle #}
<button class="btn btn-sm btn-ghost-primary sidenav-toggle">
<div class="sidenav-toggle-icon">
<i class="mdi mdi-pin"></i>
</div>
</button>
</div>
<div class="sidenav-inner h-100 mb-auto">
{# Collapse #}
<div class="collapse sidenav-collapse pb-4">
{# Nav Items #}
{% nav %}
</div>
{# Profile controls #}
<div class="profile-button-container">
{% include 'inc/profile_button.html' %}
</div>
</div>
</nav>