Merge branch 'feature-ui' into 16849-document-hierarchy-issues

netbox/netbox/tables/columns.py

@@ -275,7 +275,7 @@ class ActionsColumn(tables.Column):
                 if len(self.actions) == 1 or (self.split_actions and idx == 0):
                     dropdown_class = attrs.css_class
                     button = (
-                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button">'
+                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button" aria-label="{attrs.title}">'
                         f'<i class="mdi mdi-{attrs.icon}"></i></a>'
                     )
 

netbox/project-static/package.json

@@ -22,6 +22,7 @@
     "validate:formatting:scripts": "prettier -c src/**/*.ts"
   },
   "dependencies": {
+    "@fontsource-variable/plus-jakarta-sans": "^5.0.21",
     "@mdi/font": "7.4.47",
     "@tabler/core": "1.0.0-beta20",
     "bootstrap": "5.3.3",
@@ -32,7 +33,6 @@
     "query-string": "9.0.0",
     "sass": "1.77.6",
     "tom-select": "2.3.1",
-    "typeface-inter": "3.18.1",
     "typeface-roboto-mono": "1.1.13"
   },
   "devDependencies": {

netbox/project-static/styles/_variables.scss

@@ -1,7 +1,7 @@
 // Global variables
 
 // Set base fonts
-$font-family-sans-serif: 'Inter';
+$font-family-sans-serif: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
 // See https://github.com/tabler/tabler/issues/1812
 $font-family-monospace: 'Roboto Mono';
 

netbox/project-static/styles/external.scss

@@ -6,3 +6,4 @@
 // Fonts
 @import url("../node_modules/typeface-inter/inter.css");
 @import url("../node_modules/typeface-roboto-mono/index.css");
+@import url("../node_modules/@fontsource-variable/plus-jakarta-sans/index.css");

netbox/project-static/styles/netbox.scss

@@ -6,6 +6,7 @@
 
 // Overrides of external libraries
 @import 'overrides/bootstrap';
+@import 'overrides/gridstack';
 @import 'overrides/tabler';
 @import 'overrides/tomselect';
 

netbox/project-static/styles/overrides/_gridstack.scss

@@ -0,0 +1,12 @@
+// Altering dashboard card colors
+.grid-stack {
+  .card-header {
+    // Default color of card header changes depending on theme
+    &.bg-default {
+      background: var(--tblr-bg-surface-secondary)!important;
+    }
+    a {
+      color: inherit!important;
+    }
+  }
+}

netbox/project-static/styles/overrides/_tabler.scss

@@ -93,6 +93,10 @@ body[data-bs-theme=dark] {
     .btn {
       color: var(--#{$prefix}body-color);
     }
+    // Stops table headers from appearing as primary link color
+    th.orderable a {
+      color: var(--#{$prefix}body-color);
+    }
   }
 
   // Adjusting text colors

netbox/project-static/yarn.lock

@@ -80,6 +80,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
+"@fontsource-variable/plus-jakarta-sans@^5.0.21":
+  version "5.0.21"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/plus-jakarta-sans/-/plus-jakarta-sans-5.0.21.tgz#3bb6e0d16add99f0b93981443d4d763ea85ad13b"
+  integrity sha512-VTQB+MnaYbjLNmfxQJ/Fc2rayLGlqTiZa6nZTpplS0lJF3XKcWPPItilGFMZW4lfwIiroo+FIfBewBOF3MrMPQ==
+
 "@graphiql/plugin-explorer@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-2.0.0.tgz#d6869cba019ae6fac006ce61ae3470d8c8a83938"
@@ -2774,11 +2779,6 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typeface-inter@3.18.1:
-  version "3.18.1"
-  resolved "https://registry.yarnpkg.com/typeface-inter/-/typeface-inter-3.18.1.tgz#24cccdf29923f318589783997be20a662cd3ab9c"
-  integrity sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==
-
 typeface-roboto-mono@1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz#2af8662db8f9119c00efd55d6ed8877d2a69ec94"

netbox/templates/base/base.html

@@ -11,7 +11,7 @@
   >
   <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=5, width=device-width, viewport-fit=cover" />
     <meta name="htmx-config" content='{"scrollBehavior": "auto"}'>
 
     {# Page title #}

netbox/templates/dcim/rack_elevation_list.html

@@ -11,7 +11,7 @@
       <a href="{% url 'dcim:rack_list' %}{% querystring request %}" class="btn btn-primary">
         <i class="mdi mdi-format-list-checkbox"></i> {% trans "View List" %}
       </a>
-      <select class="btn btn-outline-secondary no-ts rack-view">
+      <select class="btn btn-outline-secondary no-ts rack-view" aria-label="Select rack view">
         <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
         <option value="images-only">{% trans "Images only" %}</option>
         <option value="labels-only">{% trans "Labels only" %}</option>

netbox/templates/extras/dashboard/widget.html

@@ -9,14 +9,14 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
+    <div class="card-header {% if widget.color %} text-{{ widget.fg_color }} {% endif %} bg-{{ widget.color|default:'default' }} px-2 py-1 d-flex flex-row">
       <a href="#"
         hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
       >
-        <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
       <div class="card-title flex-fill text-center">
         {% if widget.title %}
@@ -29,7 +29,7 @@
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
       >
-        <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
     </div>
     <div class="card-body p-2 pt-1 overflow-auto">

netbox/templates/generic/_base.html

@@ -10,7 +10,7 @@
 
           {# Title #}
           <div>
-            <h1 class="page-title my-1">{% block title %}{% endblock title %}</h1>
+            <h1 class="page-title mt-1 mb-2">{% block title %}{% endblock title %}</h1>
             {% block subtitle %}{% endblock %}
           </div>