From 84e72351e59768507edfb88ee30abda8e82f4644 Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Thu, 23 Jan 2020 00:38:26 +0300
Subject: [PATCH] feat(admin-plugin): update dropdowns for extends #211

---
 .../templates/extends/fieldsets/index.html    | 116 +++++-----
 .../templates/extends/plugins/index.html      | 104 +++++----
 .../templates/extends/snippets/index.html     | 179 +++++++--------
 .../admin/templates/extends/themes/index.html |  89 ++++----
 .../extends/themes/templates/index.html       | 207 +++++++++---------
 5 files changed, 365 insertions(+), 330 deletions(-)

diff --git a/site/plugins/admin/templates/extends/fieldsets/index.html b/site/plugins/admin/templates/extends/fieldsets/index.html
index 69560d1e..546ecda1 100644
--- a/site/plugins/admin/templates/extends/fieldsets/index.html
+++ b/site/plugins/admin/templates/extends/fieldsets/index.html
@@ -1,58 +1,64 @@
 {% extends "plugins/admin/templates/partials/base.html" %}
 
 {% block content %}
-{% if fieldsets_list|length > 0 %}
-<table>
-    <tbody>
-        {% for id, title in fieldsets_list %}
-        {% set fieldset_path = PATH_FIELDSETS ~ '/' ~ id ~ '.yaml' %}
-        {% if filesystem_has(fieldset_path) %}
-            {% set fieldset = parser_decode(filesystem_read(fieldset_path), 'yaml') %}
-        {% endif %}
-        <tr>
-            <td style="width: 50px; padding-right: 10px; text-align:center;" class="{% if fieldset.hide %}opacity-50{% endif %}">
-                {% if fieldset.icon %}
-                    <i class="{{ fieldset.icon }}"></i>
-                {% else %}
-                    <i class="far fa-file-alt"></i>
-                {% endif %}
-            </td>
-            <td style="padding-left:0px;" class="{% if fieldset.hide %}opacity-50{% endif %}">
-                <a href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}">{{ title }}</a>
-            </td>
-            <td class="text-right">
-              <button type="button" class="js-dropdown-btn">
-                <i class="fas fa-ellipsis-h"></i>
-              </button>
-              <div class="js-dropdown dropdown-menu">
-                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}"><i class="fas fa-edit dropdown-menu__icon"></i> {{ tr('admin_edit') }}</a>
-                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.rename') }}?id={{ id }}"><i class="fas fa-font dropdown-menu__icon"></i> {{ tr('admin_rename') }}</a>
-                <a class="dropdown-menu__item" href="javascript:;"
-                   onclick="event.preventDefault();
-                            document.getElementById('duplicate-fieldset-id-{{ id }}').submit();"><i class="fas fa-copy dropdown-menu__icon"></i> {{ tr('admin_duplicate') }}</a>
-                <div class="dropdown-menu__divider"></div>
-                <a class="dropdown-menu__item" href="javascript:;"
-                   onclick="event.preventDefault();
-                            document.getElementById('delete-fieldset-id-{{ id }}').submit();"><i class="fas fa-trash-alt dropdown-menu__icon"></i> {{ tr('admin_delete') }}</a>
-                <form id="delete-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.deleteProcess') }}" method="POST" style="display: none;">
-                    {{ csrf() }}
-                    <input type="hidden" name="fieldset-id" value="{{ id }}">
-                </form>
-                <form id="duplicate-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.duplicateProcess') }}" method="POST" style="display: none;">
-                    {{ csrf() }}
-                    <input type="hidden" name="fieldset-id" value="{{ id }}">
-                </form>
-              </div>
-            </td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
-{% else %}
-<div class="empty-list-message">
-    <i class="fas fa-list"></i>
-    <h3>{{ tr('admin_you_have_not_created_any_fieldsets_yet') }}</h3>
-    <a href="{{ path_for('admin.fieldsets.add') }}" class="btn">{{ tr('admin_create_new_fieldset') }}</a>
-</div>
-{% endif %}
-{% endblock %}
+    {% if fieldsets_list | length > 0 %}
+        <table>
+            <tbody>
+                {% for id, title in fieldsets_list %}
+                    {% set fieldset_path = PATH_FIELDSETS ~ '/' ~ id ~ '.yaml' %}
+                    {% if filesystem_has(fieldset_path) %}
+                        {% set fieldset = parser_decode(filesystem_read(fieldset_path), 'yaml') %}
+                    {% endif %}
+                    <tr>
+                        <td class="w-1 text-center {% if fieldset.hide %}opacity-50{% endif %}">
+                            {% if fieldset.icon %}
+                                <i class="{{ fieldset.icon }}"></i>
+                            {% else %}
+                                <i class="far fa-file-alt"></i>
+                            {% endif %}
+                        </td>
+                        <td class="pl-0 {% if fieldset.hide %}opacity-50{% endif %}">
+                            <a href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}">{{ title }}</a>
+                        </td>
+                        <td class="text-right">
+                            <button type="button" class="js-dropdown-btn">
+                                <i class="fas fa-ellipsis-h"></i>
+                            </button>
+                            <div class="js-dropdown dropdown-menu">
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}">
+                                    <i class="fas fa-edit dropdown-menu__icon"></i>
+                                    {{ tr('admin_edit') }}</a>
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.rename') }}?id={{ id }}">
+                                    <i class="fas fa-font dropdown-menu__icon"></i>
+                                    {{ tr('admin_rename') }}</a>
+                                <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                            document.getElementById('duplicate-fieldset-id-{{ id }}').submit();">
+                                    <i class="fas fa-copy dropdown-menu__icon"></i>
+                                    {{ tr('admin_duplicate') }}</a>
+                                <div class="dropdown-menu__divider"></div>
+                                <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                            document.getElementById('delete-fieldset-id-{{ id }}').submit();">
+                                    <i class="fas fa-trash-alt dropdown-menu__icon"></i>
+                                    {{ tr('admin_delete') }}</a>
+                                <form id="delete-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.deleteProcess') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="fieldset-id" value="{{ id }}">
+                                </form>
+                                <form id="duplicate-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.duplicateProcess') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="fieldset-id" value="{{ id }}">
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <div class="empty-list-message">
+            <i class="fas fa-list"></i>
+            <h3>{{ tr('admin_you_have_not_created_any_fieldsets_yet') }}</h3>
+            <a href="{{ path_for('admin.fieldsets.add') }}" class="btn">{{ tr('admin_create_new_fieldset') }}</a>
+        </div>
+    {% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/site/plugins/admin/templates/extends/plugins/index.html b/site/plugins/admin/templates/extends/plugins/index.html
index 5ee15369..31eca4bc 100644
--- a/site/plugins/admin/templates/extends/plugins/index.html
+++ b/site/plugins/admin/templates/extends/plugins/index.html
@@ -1,48 +1,62 @@
 {% extends "plugins/admin/templates/partials/base.html" %}
 
 {% block content %}
-{% if (plugins_list|length > 0) %}
-<table class="table no-margin">
-  <tbody>
-      {% for key, plugin in plugins_list %}
-      <tr>
-          <td style="width: 50px; padding-right: 10px; text-align:center;">
-              {% if plugin.icon %}
-                   <i class="{{ plugin.icon }} {% if plugin.enabled == false %}opacity-50{% endif %}"></i>
-              {% else %}
-                  <i class="fas fa-plug {% if plugin.enabled == false %}opacity-50{% endif %}"></i>
-              {% endif %}
-          </td>
-          <td style="padding-left:0px;"><a href="{{ path_for('admin.plugins.information') }}?id={{ key }}" class="{% if plugin.enabled == false %}opacity-50{% endif %}">{{ plugin.name }}</a></td>
-          <td class="text-right">
-              <button type="button" class="js-dropdown-btn">
-                <i class="fas fa-ellipsis-h"></i>
-              </button>
-              <div class="js-dropdown dropdown-menu">
-                  <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.information') }}?id={{ key }}"><i class="fas fa-info-circle dropdown-menu__icon"></i> {{ tr('admin_information') }}</a>
-                  <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.settings') }}?id={{ key }}"><i class="fas fa-cog dropdown-menu__icon"></i> {{ tr('admin_settings') }}</a>
-                  {% if key == 'admin' or key == 'site' or key == '' %}
-                     <a class="dropdown-menu__item opacity-50" href="javascript:;"><i class="fas fa-toggle-on dropdown-menu__icon"></i> {{ tr('admin_deactivate') }}</a>
-                  {% else %}
-                     <a class="dropdown-menu__item"
-                        onclick="event.preventDefault(); document.getElementById('update-status-{{ key }}').submit();"
-                        href="javascript:;">{% if plugin.enabled %}<i class="fas fa-toggle-on dropdown-menu__icon"></i> {{ tr('admin_deactivate') }}{% else %}<i class="fas fa-toggle-off dropdown-menu__icon"></i> {{ tr('admin_activate') }}{% endif %}</a>
-                  {% endif %}
-                  <form id="update-status-{{ key }}" action="{{ path_for('admin.plugins.update-status') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="plugin-key" value="{{ key }}">
-                        <input type="hidden" name="plugin-status" value="{% if plugin.enabled %}false{% else %}true{% endif %}">
-                  </form>
-                </div>
-          </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<div class="empty-list-message">
-    <i class="fas fa-list"></i>
-    <h3>{{ tr('admin_you_have_no_plugins') }}</h3>
-</div>
-{% endif %}
-{% endblock %}
+    {% if (plugins_list | length > 0) %}
+        <table>
+            <tbody>
+                {% for key, plugin in plugins_list %}
+                    <tr>
+                        <td class="w-1 text-center">
+                            {% if plugin.icon %}
+                                <i class="{{ plugin.icon }} {% if plugin.enabled == false %}opacity-50{% endif %}"></i>
+                            {% else %}
+                                <i class="fas fa-plug {% if plugin.enabled == false %}opacity-50{% endif %}"></i>
+                            {% endif %}
+                        </td>
+                        <td class="pl-0">
+                            <a href="{{ path_for('admin.plugins.information') }}?id={{ key }}" class="{% if plugin.enabled == false %}opacity-50{% endif %}">{{ plugin.name }}</a>
+                        </td>
+                        <td class="text-right">
+                            <button type="button" class="js-dropdown-btn">
+                                <i class="fas fa-ellipsis-h"></i>
+                            </button>
+                            <div class="js-dropdown dropdown-menu">
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.information') }}?id={{ key }}">
+                                    <i class="fas fa-info-circle dropdown-menu__icon"></i>
+                                    {{ tr('admin_information') }}</a>
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.settings') }}?id={{ key }}">
+                                    <i class="fas fa-cog dropdown-menu__icon"></i>
+                                    {{ tr('admin_settings') }}</a>
+                                {% if key == 'admin' or key == 'site' or key == '' %}
+                                    <a class="dropdown-menu__item opacity-50" href="javascript:;">
+                                        <i class="fas fa-toggle-on dropdown-menu__icon"></i>
+                                        {{ tr('admin_deactivate') }}</a>
+                                {% else %}
+                                    <a class="dropdown-menu__item" onclick="event.preventDefault(); document.getElementById('update-status-{{ key }}').submit();" href="javascript:;">
+                                        {% if plugin.enabled %}
+                                            <i class="fas fa-toggle-on dropdown-menu__icon"></i>
+                                            {{ tr('admin_deactivate') }}
+                                        {% else %}
+                                            <i class="fas fa-toggle-off dropdown-menu__icon"></i>
+                                            {{ tr('admin_activate') }}
+                                        {% endif %}
+                                    </a>
+                                {% endif %}
+                                <form id="update-status-{{ key }}" action="{{ path_for('admin.plugins.update-status') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="plugin-key" value="{{ key }}">
+                                    <input type="hidden" name="plugin-status" value="{% if plugin.enabled %}false{% else %}true{% endif %}">
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <div class="empty-list-message">
+            <i class="fas fa-list"></i>
+            <h3>{{ tr('admin_you_have_no_plugins') }}</h3>
+        </div>
+    {% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/site/plugins/admin/templates/extends/snippets/index.html b/site/plugins/admin/templates/extends/snippets/index.html
index d8f82051..a11d6fa3 100644
--- a/site/plugins/admin/templates/extends/snippets/index.html
+++ b/site/plugins/admin/templates/extends/snippets/index.html
@@ -1,97 +1,100 @@
 {% extends "plugins/admin/templates/partials/base.html" %}
 
 {% block content %}
-{% if snippets_list|length > 0 %}
-<table class="table no-margin">
-    <tbody>
-        {% for id in snippets_list %}
-        <tr>
-            <td style="width: 50px; padding-right: 10px; text-align:center;">
-                <i class="far fa-file-code"></i>
-            </td>
-            <td style="padding-left:0px;">
-                <a href="{{ path_for('admin.snippets.edit') }}?id={{ id }}">{{ id }}</a>
-            </td>
-            <td class="text-right">
-                <div class="btn-group">
-                  <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-ellipsis-h"></i>
-                  </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
-                    <a class="dropdown-item" href="{{ path_for('admin.snippets.edit') }}?id={{ id }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
-                    <a class="dropdown-item" href="{{ path_for('admin.snippets.rename') }}?id={{ id }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
-                    <form id="duplicate-snippet-id-{{ id }}" action="{{ path_for('admin.snippets.duplicateProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="snippet-id" value="{{ id }}">
-                    </form>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('duplicate-snippet-id-{{ id }}').submit();"><i class="fas fa-copy"></i> {{ tr('admin_duplicate') }}</a>
-                    <a class="dropdown-item js-snippets-info" href="javascript:;"  data-toggle="modal" data-target="#snippetsInfoModal" data-name="{{ id }}"><i class="fas fa-code"></i> {{ tr('admin_embeded_code') }}</a>
-                    <div class="dropdown-divider"></div>
-                    <form id="delete-snippet-id-{{ id }}" action="{{ path_for('admin.snippets.deleteProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="snippet-id" value="{{ id }}">
-                    </form>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('delete-snippet-id-{{ id }}').submit();"><i class="fas fa-trash-alt"></i> {{ tr('admin_delete') }}</a>
+    {% if snippets_list | length > 0 %}
+        <table>
+            <tbody>
+                {% for id in snippets_list %}
+                    <tr>
+                        <td class="w-1 text-center">
+                            <i class="far fa-file-code"></i>
+                        </td>
+                        <td class="pl-0">
+                            <a href="{{ path_for('admin.snippets.edit') }}?id={{ id }}">{{ id }}</a>
+                        </td>
+                        <td class="text-right">
+                            <button type="button" class="js-dropdown-btn">
+                                <i class="fas fa-ellipsis-h"></i>
+                            </button>
+                            <div class="js-dropdown dropdown-menu">
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.snippets.edit') }}?id={{ id }}">
+                                    <i class="fas fa-edit dropdown-menu__icon"></i>
+                                    {{ tr('admin_edit') }}</a>
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.snippets.rename') }}?id={{ id }}">
+                                    <i class="fas fa-font dropdown-menu__icon"></i>
+                                    {{ tr('admin_rename') }}</a>
+                                <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('duplicate-snippet-id-{{ id }}').submit();">
+                                    <i class="fas fa-copy dropdown-menu__icon"></i>
+                                    {{ tr('admin_duplicate') }}</a>
+                                <a class="dropdown-menu__item js-snippets-info" href="javascript:;" data-toggle="modal" data-target="#snippetsInfoModal" data-name="{{ id }}">
+                                    <i class="fas fa-code dropdown-menu__icon"></i>
+                                    {{ tr('admin_embeded_code') }}</a>
+                                <div class="dropdown-menu__divider"></div>
+                                <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('delete-snippet-id-{{ id }}').submit();">
+                                    <i class="fas fa-trash-alt dropdown-menu__icon"></i>
+                                    {{ tr('admin_delete') }}</a>
+                                <form id="delete-snippet-id-{{ id }}" action="{{ path_for('admin.snippets.deleteProcess') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="snippet-id" value="{{ id }}">
+                                </form>
+                                <form id="duplicate-snippet-id-{{ id }}" action="{{ path_for('admin.snippets.duplicateProcess') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="snippet-id" value="{{ id }}">
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <div class="empty-list-message">
+            <i class="far fa-file-code"></i>
+            <h3>{{ tr('admin_you_have_not_created_any_snippets_yet') }}</h3>
+            <a href="{{ path_for('admin.snippets.add') }}" class="btn">{{ tr('admin_create_new_snippet') }}</a>
+        </div>
+    {% endif %}
 
-                  </div>
+    <!-- Modal -->
+    <div class="modal fade" id="snippetsInfoModal" tabindex="-1" role="dialog" aria-labelledby="snippetsInfoModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="snippetsInfoModalLabel">{{ tr('admin_embeded_code') }}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
                 </div>
-            </td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
-{% else %}
-<div class="empty-list-message">
-    <i class="far fa-file-code"></i>
-    <h3>{{ tr('admin_you_have_not_created_any_snippets_yet') }}</h3>
-    <a href="{{ path_for('admin.snippets.add') }}" class="btn">{{ tr('admin_create_new_snippet') }}</a>
-</div>
-{% endif %}
-
-
-
-<!-- Modal -->
-<div class="modal fade" id="snippetsInfoModal" tabindex="-1" role="dialog" aria-labelledby="snippetsInfoModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="snippetsInfoModalLabel">{{ tr('admin_embeded_code') }}</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-          <label for="shortcode">{{ tr('admin_shortcode') }}</label>
-          <div class="alert alert-dark clipboard" role="alert">
-              <span id="snippet">[snippets_exec id="<span class="js-snippets-snippet-placeholder"></span>"]</span>
-              <button class="js-clipboard-btn btn" data-clipboard-target="#snippet">
-                  {{ tr('admin_copy') }}
-              </button>
-          </div>
-          <br>
-          <label for="template_code">{{ tr('admin_template_code') }}</label>
-           <div id="template_code" class="alert alert-dark clipboard" role="alert">
-               <span id="html">&lcub;&lcub; snippets.exec('<span class="js-snippets-php-placeholder"></span>') &rcub;&rcub;</span>
-               <button class="js-clipboard-btn btn" data-clipboard-target="#html">
-                    {{ tr('admin_copy') }}
-               </button>
-          </div>
-      </div>
+                <div class="modal-body">
+                    <label for="shortcode">{{ tr('admin_shortcode') }}</label>
+                    <div class="alert alert-dark clipboard" role="alert">
+                        <span id="snippet">[snippets_exec id="<span class="js-snippets-snippet-placeholder"></span>"]</span>
+                        <button class="js-clipboard-btn btn" data-clipboard-target="#snippet">
+                            {{ tr('admin_copy') }}
+                        </button>
+                    </div>
+                    <br>
+                    <label for="template_code">{{ tr('admin_template_code') }}</label>
+                    <div id="template_code" class="alert alert-dark clipboard" role="alert">
+                        <span id="html">&lcub;&lcub; snippets.exec('<span class="js-snippets-php-placeholder"></span>') &rcub;&rcub;</span>
+                        <button class="js-clipboard-btn btn" data-clipboard-target="#html">
+                            {{ tr('admin_copy') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
 {% endblock %}
 
 {% block tail %}
-<script type="text/javascript">
-    $('.js-snippets-info').click(function () {
-        $('#snippetsInfoModal').modal();
-        $('.js-snippets-snippet-placeholder').html($(this).attr('data-name'));
-        $('.js-snippets-php-placeholder').html($(this).attr('data-name'));
-    });
-</script>
-{% endblock %}
+    <script type="text/javascript">
+        $('.js-snippets-info').click(function () {
+            $('#snippetsInfoModal').modal();
+            $('.js-snippets-snippet-placeholder').html($(this).attr('data-name'));
+            $('.js-snippets-php-placeholder').html($(this).attr('data-name'));
+        });
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/site/plugins/admin/templates/extends/themes/index.html b/site/plugins/admin/templates/extends/themes/index.html
index 35dda01d..bb40d127 100644
--- a/site/plugins/admin/templates/extends/themes/index.html
+++ b/site/plugins/admin/templates/extends/themes/index.html
@@ -1,45 +1,50 @@
 {% extends "plugins/admin/templates/partials/base.html" %}
 
 {% block content %}
-{% if (themes_list|length > 0) %}
-<table class="table no-margin">
-  <tbody>
-      {% for key, theme in themes_list %}
-      <tr>
-          <td style="width: 50px; padding-right: 10px; text-align:center;">
-            <i class="fas fa-palette {% if key == registry.settings.theme %}{% else %}opacity-50{% endif %}" aria-hidden="true"></i>
-          </td>
-          <td style="padding-left:0px;"><a href="{{ path_for('admin.templates.index') }}?theme={{ key }}">{{ theme.name }}</a></td>
-          <td class="text-right">
-              <div class="btn-group">
-                <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                  <i class="fas fa-ellipsis-h"></i>
-                </button>
-                <div class="dropdown-menu dropdown-menu-lg-right hidden">
-                  <form id="activate-theme-id-{{ key }}" action="{{ path_for('admin.themes.activateProcess') }}" method="POST" style="display: none;">
-                    {{ csrf() }}
-                    <input type="hidden" name="theme-id" value="{{ key }}">
-                    <input type="hidden" name="theme-status" value="true">
-                  </form>
-                  {% if key == registry.settings.theme %}
-                  {% else %}
-                  <a class="dropdown-item" href="javascript:;"
-                     onclick="event.preventDefault();
-                              document.getElementById('activate-theme-id-{{ key }}').submit();"><i class="far fa-star"></i> {{ tr('admin_activate') }}</a>
-                  {% endif %}
-                  <a class="dropdown-item" href="{{ path_for('admin.themes.information') }}?id={{ key }}"><i class="fas fa-info-circle"></i> {{ tr('admin_information') }}</a>
-                  <a class="dropdown-item" href="{{ path_for('admin.themes.settings') }}?id={{ key }}"><i class="fas fa-cog"></i> {{ tr('admin_settings') }}</a>
-                </div>
-              </div>
-          </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<div class="empty-list-message">
-    <i class="fas fa-list"></i>
-    <h3>{{ tr('admin_you_have_no_themes') }}</h3>
-</div>
-{% endif %}
-{% endblock %}
+    {% if (themes_list | length > 0) %}
+        <table>
+            <tbody>
+                {% for key, theme in themes_list %}
+                    <tr>
+                        <td class="w-1 text-center">
+                            <i class="fas fa-palette {% if key == registry.settings.theme %}{% else %}opacity-50{% endif %}" aria-hidden="true"></i>
+                        </td>
+                        <td class="pl-0">
+                            <a href="{{ path_for('admin.templates.index') }}?theme={{ key }}">{{ theme.name }}</a>
+                        </td>
+                        <td class="text-right">
+                            <button type="button" class="js-dropdown-btn">
+                                <i class="fas fa-ellipsis-h"></i>
+                            </button>
+                            <div class="js-dropdown dropdown-menu">
+                                {% if key == registry.settings.theme %}
+                                {% else %}
+                                    <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                              document.getElementById('activate-theme-id-{{ key }}').submit();">
+                                        <i class="far fa-star dropdown-menu__icon"></i>
+                                        {{ tr('admin_activate') }}</a>
+                                {% endif %}
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.themes.information') }}?id={{ key }}">
+                                    <i class="fas fa-info-circle dropdown-menu__icon"></i>
+                                    {{ tr('admin_information') }}</a>
+                                <a class="dropdown-menu__item" href="{{ path_for('admin.themes.settings') }}?id={{ key }}">
+                                    <i class="fas fa-cog dropdown-menu__icon"></i>
+                                    {{ tr('admin_settings') }}</a>
+                                <form id="activate-theme-id-{{ key }}" action="{{ path_for('admin.themes.activateProcess') }}" method="POST" style="display: none;">
+                                    {{ csrf() }}
+                                    <input type="hidden" name="theme-id" value="{{ key }}">
+                                    <input type="hidden" name="theme-status" value="true">
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <div class="empty-list-message">
+            <i class="fas fa-list"></i>
+            <h3>{{ tr('admin_you_have_no_themes') }}</h3>
+        </div>
+    {% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/site/plugins/admin/templates/extends/themes/templates/index.html b/site/plugins/admin/templates/extends/themes/templates/index.html
index b48264ed..910235cc 100644
--- a/site/plugins/admin/templates/extends/themes/templates/index.html
+++ b/site/plugins/admin/templates/extends/themes/templates/index.html
@@ -1,104 +1,111 @@
 {% extends "plugins/admin/templates/partials/base.html" %}
 
 {% block content %}
-{% if (templates_list|length > 0) or (partials_list|length > 0) %}
-<table class="table no-margin">
-    <tbody>
-    {% if templates_list|length > 0 %}
-        {% for template in templates_list %}
-        <tr>
-            <td style="width: 50px; padding-right: 10px; text-align:center;">
-                <i class="far fa-file-code"></i>
-            </td>
-            <td style="padding-left:0px;">
-                <a href="{{ path_for('admin.templates.edit') }}?id={{ template.basename }}&type=template&theme={{ theme }}">{{ template.basename }}</a>
-            </td>
-            <td>{{ tr('admin_template') }}</td>
-            <td class="text-right">
-                <div class="btn-group">
-                  <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-ellipsis-h"></i>
-                  </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
-                    <a class="dropdown-item" href="{{ path_for('admin.templates.edit') }}?id={{ template.basename }}&type=template&theme={{ theme }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
-                    <a class="dropdown-item" href="{{ path_for('admin.templates.rename') }}?id={{ template.basename }}&type=template&theme={{ theme }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('duplicate-template-id-{{ template.basename }}').submit();"><i class="fas fa-copy"></i> {{ tr('admin_duplicate') }}</a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('delete-template-id-{{ template.basename }}').submit();"><i class="fas fa-trash-alt"></i>  {{ tr('admin_delete') }}</a>
-
-                    <form id="duplicate-template-id-{{ template.basename }}" action="{{ path_for('admin.templates.duplicateProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="template-id" value="{{ template.basename }}">
-                        <input type="hidden" name="type" value="template">
-                        <input type="hidden" name="theme" value="{{ theme }}">
-                    </form>
-                    <form id="delete-template-id-{{ template.basename }}" action="{{ path_for('admin.templates.deleteProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="template-id" value="{{ template.basename }}">
-                        <input type="hidden" name="type" value="template">
-                        <input type="hidden" name="theme" value="{{ theme }}">
-                    </form>
-                  </div>
-                </div>
-            </td>
-        </tr>
-        {% endfor %}
+    {% if (templates_list | length > 0) 
+        or(partials_list | length > 0) %}
+        <table>
+            <tbody>
+                {% if templates_list | length > 0 %}
+                    {% for template in templates_list %}
+                        <tr>
+                            <td class="w-1 text-center">
+                                <i class="far fa-file-code"></i>
+                            </td>
+                            <td class="pl-0">
+                                <a href="{{ path_for('admin.templates.edit') }}?id={{ template.basename }}&type=template&theme={{ theme }}">{{ template.basename }}</a>
+                            </td>
+                            <td>{{ tr('admin_template') }}</td>
+                            <td class="text-right">
+                                <button type="button" class="js-dropdown-btn">
+                                    <i class="fas fa-ellipsis-h"></i>
+                                </button>
+                                <div class="js-dropdown dropdown-menu">
+                                    <a class="dropdown-menu__item" href="{{ path_for('admin.templates.edit') }}?id={{ template.basename }}&type=template&theme={{ theme }}">
+                                        <i class="fas fa-edit dropdown-menu__icon"></i>
+                                        {{ tr('admin_edit') }}</a>
+                                    <a class="dropdown-menu__item" href="{{ path_for('admin.templates.rename') }}?id={{ template.basename }}&type=template&theme={{ theme }}">
+                                        <i class="fas fa-font dropdown-menu__icon"></i>
+                                        {{ tr('admin_rename') }}</a>
+                                    <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('duplicate-template-id-{{ template.basename }}').submit();">
+                                        <i class="fas fa-copy dropdown-menu__icon"></i>
+                                        {{ tr('admin_duplicate') }}</a>
+                                    <div class="dropdown-menu__divider"></div>
+                                    <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('delete-template-id-{{ template.basename }}').submit();">
+                                        <i class="fas fa-trash-alt dropdown-menu__icon"></i>
+                                        {{ tr('admin_delete') }}</a>
+                                    <form id="duplicate-template-id-{{ template.basename }}" action="{{ path_for('admin.templates.duplicateProcess') }}" method="POST" style="display: none;">
+                                        {{ csrf() }}
+                                        <input type="hidden" name="template-id" value="{{ template.basename }}">
+                                        <input type="hidden" name="type" value="template">
+                                        <input type="hidden" name="theme" value="{{ theme }}">
+                                    </form>
+                                    <form id="delete-template-id-{{ template.basename }}" action="{{ path_for('admin.templates.deleteProcess') }}" method="POST" style="display: none;">
+                                        {{ csrf() }}
+                                        <input type="hidden" name="template-id" value="{{ template.basename }}">
+                                        <input type="hidden" name="type" value="template">
+                                        <input type="hidden" name="theme" value="{{ theme }}">
+                                    </form>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                {% endif %}
+                {% if partials_list | length > 0 %}
+                    {% for partial in partials_list %}
+                        <tr>
+                            <td class="w-1 text-center">
+                                <i class="far fa-file-code"></i>
+                            </td>
+                            <td class="pl-0">
+                                <a href="{{ path_for('admin.templates.edit') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}">{{ partial.basename }}</a>
+                            </td>
+                            <td>{{ tr('admin_partial') }}</td>
+                            <td class="text-right">
+                                <button type="button" class="js-dropdown-btn">
+                                    <i class="fas fa-ellipsis-h"></i>
+                                </button>
+                                <div class="js-dropdown dropdown-menu">
+                                    <a class="dropdown-menu__item" href="{{ path_for('admin.templates.edit') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}">
+                                        <i class="fas fa-edit dropdown-menu__icon"></i>
+                                        {{ tr('admin_edit') }}</a>
+                                    <a class="dropdown-menu__item" href="{{ path_for('admin.templates.rename') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}">
+                                        <i class="fas fa-font dropdown-menu__icon"></i>
+                                        {{ tr('admin_rename') }}</a>
+                                    <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('duplicate-partial-id-{{ partial.basename }}').submit();">
+                                        <i class="fas fa-copy dropdown-menu__icon"></i>
+                                        {{ tr('admin_duplicate') }}</a>
+                                    <div class="dropdown-menu__divider"></div>
+                                    <a class="dropdown-menu__item" href="javascript:;" onclick="event.preventDefault();
+                                document.getElementById('delete-partial-id-{{ partial.basename }}').submit();">
+                                        <i class="fas fa-trash-alt dropdown-menu__icon"></i>
+                                        {{ tr('admin_delete') }}</a>
+                                    <form id="duplicate-partial-id-{{ partial.basename }}" action="{{ path_for('admin.templates.duplicateProcess') }}" method="POST" style="display: none;">
+                                        {{ csrf() }}
+                                        <input type="hidden" name="partial-id" value="{{ partial.basename }}">
+                                        <input type="hidden" name="type" value="partial">
+                                        <input type="hidden" name="theme" value="{{ theme }}">
+                                    </form>
+                                    <form id="delete-partial-id-{{ partial.basename }}" action="{{ path_for('admin.templates.deleteProcess') }}" method="POST" style="display: none;">
+                                        {{ csrf() }}
+                                        <input type="hidden" name="partial-id" value="{{ partial.basename }}">
+                                        <input type="hidden" name="type" value="partial">
+                                        <input type="hidden" name="theme" value="{{ theme }}">
+                                    </form>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                {% endif %}
+            </tbody>
+        </table>
+    {% else %}
+        <div class="empty-list-message">
+            <i class="fas fa-layer-group"></i>
+            <h3>{{ tr('admin_you_have_not_created_any_templates_yet') }}</h3>
+            <a href="{{ path_for('admin.templates.add') }}" class="btn">{{ tr('admin_create_new_template') }}</a>
+        </div>
     {% endif %}
-    {% if partials_list|length > 0 %}
-        {% for partial in partials_list %}
-        <tr>
-            <td style="width: 50px; padding-right: 10px; text-align:center;">
-                <i class="far fa-file-code"></i>
-            </td>
-            <td style="padding-left:0px;">
-                <a href="{{ path_for('admin.templates.edit') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}">{{ partial.basename }}</a>
-            </td>
-            <td>{{ tr('admin_partial') }}</td>
-            <td class="text-right">
-                <div class="btn-group">
-                  <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-ellipsis-h"></i>
-                  </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
-                    <a class="dropdown-item" href="{{ path_for('admin.templates.edit') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
-                    <a class="dropdown-item" href="{{ path_for('admin.templates.rename') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('duplicate-partial-id-{{ partial.basename }}').submit();"><i class="fas fa-copy"></i> {{ tr('admin_duplicate') }}</a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('delete-partial-id-{{ partial.basename }}').submit();"><i class="fas fa-trash-alt"></i>  {{ tr('admin_delete') }}</a>
-
-                    <form id="duplicate-partial-id-{{ partial.basename }}" action="{{ path_for('admin.templates.duplicateProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="partial-id" value="{{ partial.basename }}">
-                        <input type="hidden" name="type" value="partial">
-                        <input type="hidden" name="theme" value="{{ theme }}">
-                    </form>
-                    <form id="delete-partial-id-{{ partial.basename }}" action="{{ path_for('admin.templates.deleteProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="partial-id" value="{{ partial.basename }}">
-                        <input type="hidden" name="type" value="partial">
-                        <input type="hidden" name="theme" value="{{ theme }}">
-                    </form>
-                  </div>
-                </div>
-            </td>
-        </tr>
-        {% endfor %}
-    {% endif %}
-    </tbody>
-</table>
-{% else %}
-<div class="empty-list-message">
-    <i class="fas fa-layer-group"></i>
-    <h3>{{ tr('admin_you_have_not_created_any_templates_yet') }}</h3>
-    <a href="{{ path_for('admin.templates.add') }}" class="btn">{{ tr('admin_create_new_template') }}</a>
-</div>
-{% endif %}
-{% endblock %}
+{% endblock %}
\ No newline at end of file