NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-19 05:21:55 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

#6372: Reduce padding of top-level menu items & improve home page stat badge coloring

Browse Source
This commit is contained in:
checktheroads 2021-05-07 14:27:32 -07:00
parent 308820b8a1
commit fabd751f20
9 changed files with 50 additions and 29 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/dist/netbox.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/rack_elevation.css.map vendored
View File

File diff suppressed because one or more lines are too long

48
netbox/project-static/netbox.scss
View File

@ -22,6 +22,7 @@
--nbx-cable-termination-border-color: #{$gray-300}; --nbx-cable-termination-border-color: #{$gray-300};
--nbx-search-filter-border-left-color: #{$gray-300}; --nbx-search-filter-border-left-color: #{$gray-300};
--nbx-color-mode-toggle-color: #{$primary}; --nbx-color-mode-toggle-color: #{$primary};
--nbx-stat-badge-bg: #{$gray-600};
body[data-netbox-color-mode='dark'] { body[data-netbox-color-mode='dark'] {
--nbx-logo-color-1: #{$white}; --nbx-logo-color-1: #{$white};
@ -43,6 +44,7 @@
--nbx-cable-termination-border-color: #{$gray-700}; --nbx-cable-termination-border-color: #{$gray-700};
--nbx-search-filter-border-left-color: #{$gray-600}; --nbx-search-filter-border-left-color: #{$gray-600};
--nbx-color-mode-toggle-color: #{$yellow-300}; --nbx-color-mode-toggle-color: #{$yellow-300};
--nbx-stat-badge-bg: #{$gray-600};
} }
} }
@ -72,6 +74,11 @@ body {
fill: #1685fc; fill: #1685fc;
stroke: #1685fc; stroke: #1685fc;
} }
span.badge.stat-badge {
margin-left: map.get($spacers, 2);
background-color: var(--nbx-stat-badge-bg);
}
&[data-netbox-color-mode='light'] { &[data-netbox-color-mode='light'] {
.btn.btn-primary { .btn.btn-primary {
color: $white; color: $white;
@ -219,7 +226,8 @@ h3.accordion-item-title,
h4.accordion-item-title, h4.accordion-item-title,
h5.accordion-item-title, h5.accordion-item-title,
h6.accordion-item-title { h6.accordion-item-title {
padding: 0 0.5rem; // padding: 0 0.5rem;
padding: 0.25rem 0.5rem;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
text-transform: uppercase; text-transform: uppercase;
color: var(--nbx-sidebar-title-color); color: var(--nbx-sidebar-title-color);
@ -277,11 +285,14 @@ li.dropdown-item.dropdown-item-btns {
nav.nav.nav-pills { nav.nav.nav-pills {
.nav-item.nav-link { .nav-item.nav-link {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: $font-size-base; // font-size: $font-size-base;
font-size: $font-size-sm;
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
color: $body-color; // color: $body-color;
background-color: var(--nbx-sidebar-link-hover-bg); // background-color: var(--nbx-sidebar-link-hover-bg);
background-color: $accordion-button-active-bg;
color: $accordion-button-active-color;
} }
} }
} }
@ -307,13 +318,17 @@ nav.nav.nav-pills {
top: 8.125rem; top: 8.125rem;
} }
.sidebar-nav-link { div.accordion-item > a.accordion-button.nav-link {
color: var(--nbx-sidebar-link-color); &:hover {
} // color: $body-color;
// background-color: var(--nbx-sidebar-link-hover-bg);
div.accordion-item > a.accordion-button.nav-link:focus { color: $accordion-button-active-color;
border-color: unset; background-color: $accordion-button-active-bg;
box-shadow: unset; }
&:focus {
border-color: unset;
box-shadow: unset;
}
} }
.accordion-body { .accordion-body {
@ -321,12 +336,15 @@ nav.nav.nav-pills {
overflow-y: auto; overflow-y: auto;
.nav-item { .nav-item {
.nav-link { .nav-link {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.6rem;
font-size: $font-size-base; // font-size: $font-size-base;
font-size: $font-size-sm;
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
color: $body-color; // color: $body-color;
background-color: var(--nbx-sidebar-link-hover-bg); // background-color: var(--nbx-sidebar-link-hover-bg);
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
} }
} }
} }

3
netbox/project-static/theme-base.scss
View File

@ -217,3 +217,6 @@ $font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystem
'Segoe UI Symbol', 'Noto Color Emoji'; 'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', $font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace; 'Courier New', monospace;
$accordion-padding-y: 0.8125rem;
$accordion-padding-x: 0.8125rem;

4
netbox/project-static/theme-dark.scss
View File

@ -174,8 +174,8 @@ $accordion-bg: transparent;
$accordion-border-color: rgba($white, 0.125); $accordion-border-color: rgba($white, 0.125);
$accordion-button-color: $accordion-color; $accordion-button-color: $accordion-color;
$accordion-button-bg: $accordion-bg; $accordion-button-bg: $accordion-bg;
$accordion-button-active-bg: tint-color($component-active-bg, 5%); $accordion-button-active-bg: rgba($blue-300, 0.15);
$accordion-button-active-color: shade-color($primary, 10%); $accordion-button-active-color: $gray-300;
$accordion-button-focus-border-color: $input-focus-border-color; $accordion-button-focus-border-color: $input-focus-border-color;
$accordion-icon-color: $accordion-color; $accordion-icon-color: $accordion-color;
$accordion-icon-active-color: $accordion-button-active-color; $accordion-icon-active-color: $accordion-button-active-color;

2
netbox/project-static/theme-light.scss
View File

@ -17,6 +17,8 @@ $card-cap-color: $gray-800;
$accordion-bg: transparent; $accordion-bg: transparent;
$accordion-button-bg: $accordion-bg; $accordion-button-bg: $accordion-bg;
$accordion-button-active-bg: $blue-100;
$accordion-button-active-color: $gray-800;
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E"); $breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

2
netbox/templates/home.html
View File

@ -22,7 +22,7 @@
<small class="mb-1 text-muted">{{ item.description }}</small> <small class="mb-1 text-muted">{{ item.description }}</small>
{% endif %} {% endif %}
</div> </div>
<span class="badge bg-secondary rounded-pill"> <span class="badge stat-badge rounded-pill">
{% if item.count == None %} {% if item.count == None %}
<i class="mdi mdi-lock"></i> <i class="mdi mdi-lock"></i>
{% else %} {% else %}

16
netbox/utilities/templates/navigation/nav_items.html
View File

@ -7,14 +7,12 @@
aria-expanded="true" aria-expanded="true"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#{{ menu.label|lower }}" data-bs-target="#{{ menu.label|lower }}"
class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed" class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed">
><span class="fw-bold sidebar-nav-link">{{ menu.label }}</span></a <span class="fw-bold sidebar-nav-link">
> {{ menu.label }}
<div </span>
id="{{ menu.label|lower }}" </a>
class="accordion-collapse collapse" <div id="{{ menu.label|lower }}" class="accordion-collapse collapse" data-bs-parent="#sidenav-accordion">
data-bs-parent="#sidenav-accordion"
>
<div class="multi-level accordion-body px-0"> <div class="multi-level accordion-body px-0">
{% for group in menu.groups %} {% for group in menu.groups %}
<div class="flex-column nav px-2"> <div class="flex-column nav px-2">
@ -27,7 +25,7 @@
{% endfor %} {% endfor %}
</div> </div>
{% if forloop.counter != menu.groups|length %} {% if forloop.counter != menu.groups|length %}
<hr class="dropdown-divider my-3" /> <hr class="dropdown-divider my-2" />
{% endif %} {% endfor %} {% endif %} {% endfor %}
</div> </div>
</div> </div>