base.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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
  28. type="text/javascript"
  29. src="{% static 'setmode.js' %}"
  30. onerror="window.location='{% url 'media_failure' %}?filename=setmode.js'">
  31. </script>
  32. <script type="text/javascript">
  33. (function () {
  34. initMode()
  35. })();
  36. window.CSRF_TOKEN = "{{ csrf_token }}";
  37. </script>
  38. {# Static resources #}
  39. <link
  40. rel="stylesheet"
  41. href="{% static 'netbox-external.css'%}?v={{ settings.VERSION }}"
  42. onerror="window.location='{% url 'media_failure' %}?filename=netbox-external.css'"
  43. />
  44. <link
  45. rel="stylesheet"
  46. href="{% static 'netbox-light.css'%}?v={{ settings.VERSION }}"
  47. onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'"
  48. />
  49. <link
  50. rel="stylesheet"
  51. href="{% static 'netbox-dark.css'%}?v={{ settings.VERSION }}"
  52. onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
  53. />
  54. <link
  55. rel="stylesheet"
  56. media="print"
  57. href="{% static 'netbox-print.css'%}?v={{ settings.VERSION }}"
  58. onerror="window.location='{% url 'media_failure' %}?filename=netbox-print.css'"
  59. />
  60. <link rel="icon" type="image/png" href="{% static 'netbox.ico' %}" />
  61. <link rel="apple-touch-icon" type="image/png" href="{% static 'netbox_touch-icon-180.png' %}" />
  62. {# Javascript #}
  63. <script
  64. type="text/javascript"
  65. src="{% static 'netbox.js' %}?v={{ settings.VERSION }}"
  66. onerror="window.location='{% url 'media_failure' %}?filename=netbox.js'">
  67. </script>
  68. {# Additional <head> content #}
  69. {% block head %}{% endblock %}
  70. </head>
  71. <body>
  72. <script type="text/javascript">
  73. function checkSideNav() {
  74. // Check localStorage to see if the sidebar should be pinned.
  75. var sideNavRaw = localStorage.getItem('netbox-sidenav');
  76. // Determine if the device has a small screeen. This media query is equivalent to
  77. // bootstrap's media-breakpoint-down(lg) breakpoint mixin, which is what the sidenav's
  78. // CSS uses.
  79. var isSmallScreen = window.matchMedia('(max-width: 991.98px)').matches;
  80. if (typeof sideNavRaw === 'string') {
  81. var sideNavState = JSON.parse(sideNavRaw);
  82. if (sideNavState.pinned === true && !isSmallScreen) {
  83. // If the sidebar should be pinned and this is not a small screen, set the appropriate
  84. // body attributes prior to the rest of the content rendering. This prevents
  85. // jumpy/glitchy behavior on page reloads.
  86. document.body.setAttribute('data-sidenav-pinned', '');
  87. document.body.setAttribute('data-sidenav-show', '');
  88. document.body.removeAttribute('data-sidenav-hidden');
  89. } else {
  90. document.body.removeAttribute('data-sidenav-pinned');
  91. document.body.setAttribute('data-sidenav-hidden', '');
  92. }
  93. }
  94. }
  95. window.addEventListener('resize', function(){ checkSideNav() });
  96. checkSideNav();
  97. </script>
  98. {# Page layout #}
  99. {% block layout %}{% endblock %}
  100. {# Additional Javascript #}
  101. {% block javascript %}{% endblock %}
  102. {# User messages #}
  103. {% include 'inc/messages.html' %}
  104. {# Data container #}
  105. <div id="netbox-data" style="display: none!important; visibility: hidden!important">
  106. {% block data %}{% endblock %}
  107. </div>
  108. </body>
  109. </html>