diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css index a005a1d..1ed13fa 100644 --- a/pwnagotchi/ui/web/static/css/style.css +++ b/pwnagotchi/ui/web/static/css/style.css @@ -65,3 +65,18 @@ li.navitem { width: 1.875em; } } + +#container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.plugins-box { + margin: 0.5rem; + padding: 0.2rem; + border-style: groove; + border-radius: 0.5rem; + background-color: lightgrey; + text-align: center; +} diff --git a/pwnagotchi/ui/web/templates/plugins.html b/pwnagotchi/ui/web/templates/plugins.html index 82714d5..5835c18 100644 --- a/pwnagotchi/ui/web/templates/plugins.html +++ b/pwnagotchi/ui/web/templates/plugins.html @@ -26,16 +26,18 @@ $(function(){ }); {% endblock %} {% block content %} -<div style="padding: 1em"> +<div id="container"> {% for name in database.keys() %} - <h4> - <a {% if name in loaded and loaded[name].on_webhook is defined %} href="/plugins/{{name}}" {% endif %}>{{name}}</a> - </h4> - <form method="POST" action="/plugins/toggle"> - <input type="checkbox" data-role="flipswitch" name="enabled" id="flip-checkbox-{{name}}" data-on-text="Enabled" data-off-text="Disabled" data-wrapper-class="custom-size-flipswitch" {% if name in loaded %} checked {% endif %}> - <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> - <input type="hidden" name="plugin" value="{{ name }}"/> - </form> + <div class="plugins-box"> + <h4> + <a {% if name in loaded and loaded[name].on_webhook is defined %} href="/plugins/{{name}}" {% endif %}>{{name}}</a> + </h4> + <form method="POST" action="/plugins/toggle"> + <input type="checkbox" data-role="flipswitch" name="enabled" id="flip-checkbox-{{name}}" data-on-text="Enabled" data-off-text="Disabled" data-wrapper-class="custom-size-flipswitch" {% if name in loaded %} checked {% endif %}> + <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> + <input type="hidden" name="plugin" value="{{ name }}"/> + </form> + </div> {% endfor %} </div> {% endblock %}