base.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. {# Base template for (almost) all NetBox pages #}
  2. {% load static %}
  3. {% load helpers %}
  4. <!DOCTYPE html>
  5. <html
  6. lang="en"
  7. data-netbox-url-name="{{ request.resolver_match.url_name }}"
  8. data-netbox-base-path="{{ settings.BASE_PATH }}"
  9. {% with preferences|get_key:'ui.colormode' as color_mode %}
  10. {% if color_mode == 'dark'%}
  11. data-netbox-color-mode="dark"
  12. {% elif color_mode == 'light' %}
  13. data-netbox-color-mode="light"
  14. {% else %}
  15. data-netbox-color-mode="unset"
  16. {% endif %}
  17. {% endwith %}
  18. >
  19. <head>
  20. <meta charset="UTF-8" />
  21. <meta
  22. name="viewport"
  23. content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover"
  24. />
  25. {# Page title #}
  26. <title>{% block title %}Home{% endblock %} | NetBox</title>
  27. <script type="text/javascript">
  28. /**
  29. * Set the color mode on the `<html/>` element and in local storage.
  30. *
  31. * @param mode {"dark" | "light"} NetBox Color Mode.
  32. * @param inferred {boolean} Value is inferred from browser/system preference.
  33. */
  34. function setMode(mode, inferred) {
  35. document.documentElement.setAttribute("data-netbox-color-mode", mode);
  36. localStorage.setItem("netbox-color-mode", mode);
  37. localStorage.setItem("netbox-color-mode-inferred", inferred);
  38. }
  39. /**
  40. * Determine the best initial color mode to use prior to rendering.
  41. */
  42. (function () {
  43. try {
  44. // Browser prefers dark color scheme.
  45. var preferDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  46. // Browser prefers light color scheme.
  47. var preferLight = window.matchMedia("(prefers-color-scheme: light)").matches;
  48. // Client NetBox color-mode override.
  49. var clientMode = localStorage.getItem("netbox-color-mode");
  50. // NetBox server-rendered value.
  51. var serverMode = document.documentElement.getAttribute("data-netbox-color-mode");
  52. // Color mode is inferred from browser/system preference and not deterministically set by
  53. // the client or server.
  54. var inferred = JSON.parse(localStorage.getItem("netbox-color-mode-inferred"));
  55. if (inferred === true && (serverMode === "light" || serverMode === "dark")) {
  56. // The color mode was previously inferred from browser/system preference, but
  57. // the server now has a value, so we should use the server's value.
  58. return setMode(serverMode, false);
  59. }
  60. if (clientMode === null && (serverMode === "light" || serverMode === "dark")) {
  61. // If the client mode is not set but the server mode is, use the server mode.
  62. return setMode(serverMode, false);
  63. }
  64. if (clientMode !== null && serverMode === "unset") {
  65. // The color mode has been set, deterministically or otherwise, and the server
  66. // has no preference or has not been set. Use the client mode, but allow it to
  67. /// be overridden by the server if/when a server value exists.
  68. return setMode(clientMode, true);
  69. }
  70. if (
  71. clientMode !== null &&
  72. (serverMode === "light" || serverMode === "dark") &&
  73. clientMode !== serverMode
  74. ) {
  75. // If the client mode is set and is different than the server mode (which is also set),
  76. // use the client mode over the server mode, as it should be more recent.
  77. return setMode(clientMode, false);
  78. }
  79. if (clientMode === serverMode) {
  80. // If the client and server modes match, use that value.
  81. return setMode(clientMode, false);
  82. }
  83. if (preferDark && serverMode === "unset") {
  84. // If the server mode is not set but the browser prefers dark mode, use dark mode, but
  85. // allow it to be overridden by an explicit preference.
  86. return setMode("dark", true);
  87. }
  88. if (preferLight && serverMode === "unset") {
  89. // If the server mode is not set but the browser prefers light mode, use light mode,
  90. // but allow it to be overridden by an explicit preference.
  91. return setMode("light", true);
  92. }
  93. } catch (error) {
  94. // In the event of an error, log it to the console and set the mode to light mode.
  95. console.error(error);
  96. }
  97. return setMode("light", true);
  98. })();
  99. </script>
  100. {# Static resources #}
  101. <link
  102. rel="stylesheet"
  103. href="{% static 'netbox-external.css'%}?v={{ settings.VERSION }}"
  104. onerror="window.location='{% url 'media_failure' %}?filename=netbox-external.css'"
  105. />
  106. <link
  107. rel="stylesheet"
  108. href="{% static 'netbox-light.css'%}?v={{ settings.VERSION }}"
  109. onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'"
  110. />
  111. <link
  112. rel="stylesheet"
  113. href="{% static 'netbox-dark.css'%}?v={{ settings.VERSION }}"
  114. onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
  115. />
  116. <link
  117. rel="stylesheet"
  118. media="print"
  119. href="{% static 'netbox-print.css'%}?v={{ settings.VERSION }}"
  120. onerror="window.location='{% url 'media_failure' %}?filename=netbox-print.css'"
  121. />
  122. <link rel="icon" type="image/png" href="{% static 'netbox.ico' %}" />
  123. <link rel="apple-touch-icon" type="image/png" href="{% static 'netbox_touch-icon-180.png' %}" />
  124. {# Javascript #}
  125. <script
  126. type="text/javascript"
  127. src="{% static 'netbox.js' %}?v={{ settings.VERSION }}"
  128. onerror="window.location='{% url 'media_failure' %}?filename=netbox.js'">
  129. </script>
  130. {# Additional <head> content #}
  131. {% block head %}{% endblock %}
  132. </head>
  133. <body>
  134. <script type="text/javascript">
  135. function checkSideNav() {
  136. // Check localStorage to see if the sidebar should be pinned.
  137. var sideNavRaw = localStorage.getItem('netbox-sidenav');
  138. // Determine if the device has a small screeen. This media query is equivalent to
  139. // bootstrap's media-breakpoint-down(lg) breakpoint mixin, which is what the sidenav's
  140. // CSS uses.
  141. var isSmallScreen = window.matchMedia('(max-width: 991.98px)').matches;
  142. if (typeof sideNavRaw === 'string') {
  143. var sideNavState = JSON.parse(sideNavRaw);
  144. if (sideNavState.pinned === true && !isSmallScreen) {
  145. // If the sidebar should be pinned and this is not a small screen, set the appropriate
  146. // body attributes prior to the rest of the content rendering. This prevents
  147. // jumpy/glitchy behavior on page reloads.
  148. document.body.setAttribute('data-sidenav-pinned', '');
  149. document.body.setAttribute('data-sidenav-show', '');
  150. document.body.removeAttribute('data-sidenav-hidden');
  151. } else {
  152. document.body.removeAttribute('data-sidenav-pinned');
  153. document.body.setAttribute('data-sidenav-hidden', '');
  154. }
  155. }
  156. }
  157. window.addEventListener('resize', function(){ checkSideNav() });
  158. checkSideNav();
  159. </script>
  160. {# Page layout #}
  161. {% block layout %}{% endblock %}
  162. {# Additional Javascript #}
  163. {% block javascript %}{% endblock %}
  164. {# User messages #}
  165. {% include 'inc/messages.html' %}
  166. {# Data container #}
  167. <div id="netbox-data" style="display: none!important; visibility: hidden!important">
  168. {% block data %}{% endblock %}
  169. </div>
  170. </body>
  171. </html>