From 2ae48a2ef2b87084a656149133be68f5e3543541 Mon Sep 17 00:00:00 2001
From: Nels885 <voirin.lionel@gmail.com>
Date: Thu, 5 Dec 2019 11:15:29 +0100
Subject: [PATCH 1/2] Changing the display style of the plugins page

---
 pwnagotchi/ui/web/static/css/style.css   | 14 ++++++++++++++
 pwnagotchi/ui/web/templates/plugins.html | 20 +++++++++++---------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index a005a1d6..dcf0e19e 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -65,3 +65,17 @@ li.navitem {
         width: 1.875em;
     }
 }
+
+#container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.element {
+    margin: 0.5rem;
+    padding: 0.2rem;
+    border-style: groove;
+    border-radius: 0.5rem;
+    background-color: lightgrey;
+}
diff --git a/pwnagotchi/ui/web/templates/plugins.html b/pwnagotchi/ui/web/templates/plugins.html
index 82714d58..e7abaa79 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="element">
+          <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 %}

From 7693e42aa19942b82b2189f3bf9efbf4447a7404 Mon Sep 17 00:00:00 2001
From: Nels885 <voirin.lionel@gmail.com>
Date: Thu, 5 Dec 2019 11:49:34 +0100
Subject: [PATCH 2/2] Change the name of the CSS class 'element' to
 'plugins-box' and centering the text

---
 pwnagotchi/ui/web/static/css/style.css   | 3 ++-
 pwnagotchi/ui/web/templates/plugins.html | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index dcf0e19e..1ed13fa5 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -72,10 +72,11 @@ li.navitem {
     justify-content: space-around;
 }
 
-.element {
+.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 e7abaa79..5835c180 100644
--- a/pwnagotchi/ui/web/templates/plugins.html
+++ b/pwnagotchi/ui/web/templates/plugins.html
@@ -28,7 +28,7 @@ $(function(){
 {% block content %}
 <div id="container">
     {% for name in database.keys() %}
-        <div class="element">
+        <div class="plugins-box">
           <h4>
             <a {% if name in loaded and loaded[name].on_webhook is defined %} href="/plugins/{{name}}" {% endif %}>{{name}}</a>
           </h4>