NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-08-18 05:28:16 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix tab styling

Browse Source
This commit is contained in:
Jeremy Stretch 2024-01-08 17:10:09 -05:00
parent dab4302da0
commit 6439a91f11
7 changed files with 62 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox.css vendored
View File

Binary file not shown.

2
netbox/project-static/styles/netbox.scss
View File

@ -9,4 +9,6 @@
// Transitional styling to ease migration of templates from NetBox v3.x
@import 'transitional/cards';
@import 'transitional/layout';
@import 'transitional/tables';
@import 'transitional/tabs';

8
netbox/project-static/styles/transitional/_layout.scss Normal file
View File

@ -0,0 +1,8 @@
// Tweak layout section colors
.page {
background-color: var(--#{$prefix}bg-surface-secondary);
}
.page-header {
background-color: var(--#{$prefix}bg-surface);
min-height: 0;
}

21
netbox/project-static/styles/transitional/_tabs.scss Normal file
View File

@ -0,0 +1,21 @@
// In-page content tabs
.page-tabs {
.nav-tabs {
position: relative;
.nav-link {
&.active,
&:active,
&:hover {
border-color: $card-border-color;
border-bottom-color: transparent;
}
&.active {
color: $headings-color;
background: var(--#{$prefix}bg-surface-secondary);
border-bottom-color: transparent;
}
}
}
}

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

@ -116,7 +116,9 @@ Blocks:
<div class="page-wrapper">
{# Page header #}
<div class="container-xl mt-2 d-print-none">
<div class="page-header m-0">
{# Banners #}
{% if config.BANNER_TOP %}
<div class="text-center mx-3 mb-2">
{{ config.BANNER_TOP|safe }}
@ -140,30 +142,39 @@ Blocks:
</div>
</div>
{% endif %}
{# /Banners #}
{% block header %}
<div class="row align-items-center">
<div class="container-xl mt-2 d-print-none">
<div class="row align-items-center">
{# Title #}
<div class="col">
<h2 class="page-title mb-1">{% block title %}{% endblock title %}</h2>
{% block subtitle %}{% endblock %}
</div>
{# Controls #}
<div class="col-auto d-print-none">
{% block controls %}{% endblock controls %}
</div>
{# Title #}
<div class="col">
<h2 class="page-title mb-1">{% block title %}{% endblock title %}</h2>
{% block subtitle %}{% endblock %}
</div>
{# Controls #}
<div class="col-auto d-print-none">
{% block controls %}{% endblock controls %}
</div>
</div>
{# Tabs #}
<div class="page-tabs mt-3">
{% block tabs %}{% endblock %}
</div>
{% endblock header %}
</div>
{# /Page header #}
{# Page body #}
<div class="page-body">
<div class="container-xl">
{% block tabs %}{% endblock %}
<div class="container-xl tab-content py-3">
{# TODO: Remove content-wrapper block #}
{% block content-wrapper %}
{% block content %}{% endblock %}

10
netbox/templates/generic/object.html
View File

@ -19,7 +19,7 @@ Context:
{% endcomment %}
{% block header %}
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex justify-content-between align-items-center mx-3 my-2">
{# Breadcrumbs #}
<ol class="breadcrumb" aria-label="breadcrumbs">
@ -80,7 +80,7 @@ Context:
{% endblock controls %}
{% block tabs %}
<ul class="nav nav-tabs mb-2 px-3">
<ul class="nav nav-tabs px-3">
{# Primary tab #}
<li class="nav-item" role="presentation">
<a class="nav-link{% if not tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
@ -91,11 +91,7 @@ Context:
</ul>
{% endblock tabs %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}{% endblock %}
</div>
{% endblock content-wrapper %}
{% block content %}{% endblock %}
{% block modals %}
{% include 'inc/htmx_modal.html' %}

8
netbox/templates/generic/object_list.html
View File

@ -40,7 +40,7 @@ Context:
{% endblock controls %}
{% block tabs %}
<ul class="nav nav-tabs page-header-tabs px-3 mb-2" role="tablist">
<ul class="nav nav-tabs px-3" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
{% trans "Results" %} {% badge table.page.paginator.count %}
@ -57,8 +57,7 @@ Context:
</ul>
{% endblock tabs %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}
{# Object list #}
<div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
@ -137,9 +136,8 @@ Context:
{% include 'inc/filter_list.html' %}
</div>
{% endif %}
</div>
{% endblock content-wrapper %}
{% endblock content %}
{% block modals %}
{% table_config_form table table_name="ObjectTable" %}