Merge pull request #693 from Nels885/improve-plugins-web-page

improvement of the plugins web page

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;
+}

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 %}