Change Proxbox custom links to be like Pull Request #8733

netdevopsbr · Feb 26, 2022 · 2c19d93 · 2c19d93
1 parent b0e9944
commit 2c19d93
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 66 deletions.
diff --git a/netbox_proxbox/templates/netbox_proxbox/proxbox_layout.html b/netbox_proxbox/templates/netbox_proxbox/proxbox_layout.html
@@ -110,88 +110,58 @@ <h1 class="h2 w-100">{% block title %}Proxmox Full Update{% endblock %}</h1>
 
             {# BS5 pop-up modals #}
             {% block modals %}{% endblock %}
-
+            
             {# Page footer #}
             <footer class="footer container-fluid">
-
-                {# Proxbox Custom Footer #}
-                {% block plugin-info %}
-                    <hr></hr>
+                {% block footer %}
                     <div class="row align-items-center justify-content-between mx-0">
-                        {# Proxbox - Docs & Community Links #}
+
                         <div class="col-sm-12 col-md-auto fs-4 noprint">
-                            <nav class="nav justify-content-center justify-content-lg-start">
+                        <nav class="nav justify-content-center justify-content-lg-start">
+                            {% block footer_links %}
                                 {# Documentation #}
-                                <a type="button" class="nav-link" href="https://github.com/N-Multifibra/netbox-proxbox/blob/develop/README.md" target="_blank">
-                                    <i title="Proxbox | Docs" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                                <a type="button" class="nav-link" href="{% static 'docs/' %}" target="_blank">
+                                <i title="Docs" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                                </a>
+
+                                {# REST API #}
+                                <a type="button" class="nav-link" href="{% url 'api-root' %}" target="_blank">
+                                <i title="REST API" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                                 </a>
+
+                                {# API docs #}
+                                <a type="button" class="nav-link" href="{% url 'api_docs' %}" target="_blank">
+                                <i title="REST API documentation" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                                </a>
+
+                                {# GraphQL API #}
+                                {% if config.GRAPHQL_ENABLED %}
+                                <a type="button" class="nav-link" href="{% url 'graphql' %}" target="_blank">
+                                    <i title="GraphQL API" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                                </a>
+                                {% endif %}
+
                                 {# GitHub #}
-                                <a type="button" class="nav-link" href="https://github.com/N-Multifibra/netbox-proxbox" target="_blank">
-                                    <i title="Proxbox | Source Code" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                                <a type="button" class="nav-link" href="https://github.com/netbox-community/netbox" target="_blank">
+                                <i title="Source Code" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                                 </a>
-                                {# Telegram (Brazil) #}
-                                <a type="button" class="nav-link" href="https://t.me/netboxbr" target="_blank">
-                                    <i title="Proxbox | Telegram (Brazil)" class="mdi mdi-telegram text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+
+                                {# NetDev Slack #}
+                                <a type="button" class="nav-link" href="https://netdev.chat/" target="_blank">
+                                <i title="Community" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                                 </a>
-                            </nav>
+                            {% endblock footer_links %}
+                        </nav>
                         </div>
 
-                        {# Proxbox - Info #}
                         <div class="col-sm-12 col-md-auto text-center text-lg-end text-muted">
-                            <span class="ms-md-3 d-block d-md-inline">Proxbox (v0.0.3)</span>
-                        </div>
-                    </div>
-                    <hr></hr>
-                {% endblock %}
-
-                <div class="row align-items-center justify-content-between mx-0">
-
-                    {# Docs & Community Links #}
-                    <div class="col-sm-12 col-md-auto fs-4 noprint">
-                    <nav class="nav justify-content-center justify-content-lg-start">
-                        {# Documentation #}
-                        <a type="button" class="nav-link" href="{% static 'docs/' %}" target="_blank">
-                            <i title="Docs" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-
-                        {# REST API #}
-                        <a type="button" class="nav-link" href="{% url 'api-root' %}" target="_blank">
-                            <i title="REST API" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-
-                        {# API docs #}
-                        <a type="button" class="nav-link" href="{% url 'api_docs' %}" target="_blank">
-                            <i title="REST API documentation" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-
-                        {# GraphQL API #}
-                        {% if config.GRAPHQL_ENABLED %}
-                        <a type="button" class="nav-link" href="{% url 'graphql' %}" target="_blank">
-                            <i title="GraphQL API" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-                        {% endif %}
-
-                        {# GitHub #}
-                        <a type="button" class="nav-link" href="https://github.com/netbox-community/netbox" target="_blank">
-                            <i title="Source Code" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-
-                        {# NetDev Slack #}
-                        <a type="button" class="nav-link" href="https://netdev.chat/" target="_blank">
-                            <i title="Community" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                        </a>
-                    </nav>
-                    </div>
-
-                    {# System Info #}
-                    <div class="col-sm-12 col-md-auto text-center text-lg-end text-muted">
                         <span class="d-block d-md-inline">{% annotated_now %} {% now 'T' %}</span>
                         <span class="ms-md-3 d-block d-md-inline">{{ settings.HOSTNAME }} (v{{ settings.VERSION }})</span>
+                        </div>
+
                     </div>
-
-                </div>
+                {% endblock footer %}
             </footer>
-
         </div>
 
         </main>

diff --git a/netbox_proxbox/templates/netbox_proxbox/proxmox_vm_full_update.html b/netbox_proxbox/templates/netbox_proxbox/proxmox_vm_full_update.html
@@ -79,4 +79,40 @@ <h3>Logs:</h3>
         <br>
     {% endfor %}
     </ul>
+{% endblock %}
+
+{% block footer_links %}
+    {{ block.super }}
+
+    {# Proxbox Custom Links #}
+    <li class="nav-item dropdown dropup">
+        <a type="button" class="nav-link dropdown-toggle text-primary" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i title="Proxbox Plugin" class="mdi mdi-puzzle" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+        </a>
+        <ul class="dropdown-menu disabled" aria-labelledby="navbarDropdown">
+            <li>
+                {# Proxbox - Documentation #}
+                <a type="button" class="dropdown-item" href="https://github.com/N-Multifibra/netbox-proxbox/blob/develop/README.md" target="_blank">
+                    <i title="Proxbox | Docs" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>  Docs
+                </a>
+            <li>
+                {# Proxbox - GitHub #}
+                <a type="button" class="dropdown-item" href="https://github.com/N-Multifibra/netbox-proxbox" target="_blank">
+                    <i title="Proxbox | Source Code" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i> GitHub
+                </a>
+            </li>
+            <li>
+                {# Proxbox - Telegram (Brazil) #}
+                <a type="button" class="dropdown-item" href="https://t.me/netboxbr" target="_blank">
+                    <i title="Proxbox | Telegram (Brazil)" class="mdi mdi-telegram text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i> Telegram (BR)
+                </a>
+            </li>
+            <li>
+                <hr class="dropdown-divider">
+            </li>
+            <li>
+                <span class="dropdown-item disabled">Proxbox (v0.0.3)</span>
+            </li>
+        </ul>
+    </li>
 {% endblock %}
diff --git a/netbox_proxbox/templates/netbox_proxbox/proxmox_vm_list.html b/netbox_proxbox/templates/netbox_proxbox/proxmox_vm_list.html
@@ -65,3 +65,39 @@ <h1>{% block title %}All Proxmox Virtual Machines (in Development, Wait!){% endb
         </div>
     </div>
 {% endblock %}
+
+{% block footer_links %}
+    {{ block.super }}
+
+    {# Proxbox Custom Links #}
+    <li class="nav-item dropdown dropup">
+        <a type="button" class="nav-link dropdown-toggle text-primary" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i title="Proxbox Plugin" class="mdi mdi-puzzle" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+        </a>
+        <ul class="dropdown-menu disabled" aria-labelledby="navbarDropdown">
+            <li>
+                {# Proxbox - Documentation #}
+                <a type="button" class="dropdown-item" href="https://github.com/N-Multifibra/netbox-proxbox/blob/develop/README.md" target="_blank">
+                    <i title="Proxbox | Docs" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>  Docs
+                </a>
+            <li>
+                {# Proxbox - GitHub #}
+                <a type="button" class="dropdown-item" href="https://github.com/N-Multifibra/netbox-proxbox" target="_blank">
+                    <i title="Proxbox | Source Code" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i> GitHub
+                </a>
+            </li>
+            <li>
+                {# Proxbox - Telegram (Brazil) #}
+                <a type="button" class="dropdown-item" href="https://t.me/netboxbr" target="_blank">
+                    <i title="Proxbox | Telegram (Brazil)" class="mdi mdi-telegram text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i> Telegram (BR)
+                </a>
+            </li>
+            <li>
+                <hr class="dropdown-divider">
+            </li>
+            <li>
+                <span class="dropdown-item disabled">Proxbox (v0.0.3)</span>
+            </li>
+        </ul>
+    </li>
+{% endblock %}