From f7189147bf22a8e8772256156eea40fcae1f22fa Mon Sep 17 00:00:00 2001
From: Sebastien Clement <sebastien.clement@univ-pau.fr>
Date: Tue, 27 Apr 2021 00:52:39 +0200
Subject: [PATCH] :ambulance: Fix issue with little button and UiCustomizer #18

---
 .../static/css/simpleemergencystop.css        | 13 ++++
 .../simpleemergencystop_navbar.jinja2         | 60 ++++++++++---------
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/octoprint_simpleemergencystop/static/css/simpleemergencystop.css b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
index 72253a4..e8cb5d0 100644
--- a/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
+++ b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
@@ -1,7 +1,16 @@
+.ses_small, .ses_small_disabled{
+    padding: 12px 0px 12px;
+}
+
 .ses_small i {
     color: red;
 }
 
+.ses_small span, .ses_small_disabled span {
+    padding: 5px 10px 5px;
+    font-size: 15px
+}
+
 .ses_small_disabled i {
     color: grey;
     cursor: default;
@@ -11,6 +20,10 @@
     cursor: default;
 }
 
+.ses_big, .ses_big_disabled{
+    padding: 0px 5px 0px 5px
+}
+
 .ses_big_disabled {
     cursor: default;
 }
diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
index accd807..ad43ab5 100644
--- a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
+++ b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
@@ -1,30 +1,29 @@
-<a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
-   href="#" style="padding: 5px 5px 5px 5px">
-    <span class="fa-stack" style="font-size: 15px">
-        <i class="far fa-circle fa-stack-2x" ></i>
-        <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-    </span>
-{#    <i class="" style="font-size: 22px"></i>#}
-</a>
-
-<a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
-   href="#"
-   style="padding: 0px 5px 0px 5px">
-
-    <div class="ses_big_middle">
-        <span class="fa-stack" style="font-size: 11px">
-            <i class="far fa-circle fa-stack-2x" ></i>
+<div>
+    <a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
+        href="#">
+        <span class="fa-stack">
+            <i class="far fa-circle fa-stack-2x"></i>
             <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
         </span>
-        <h5>{{ _('Emergency Stop') }}</h5>
-        <span class="fa-stack" style="font-size: 11px">
-            <i class="far fa-circle fa-stack-2x" ></i>
-            <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-        </span>
-    </div>
-
-</a>
+    </a>
+</div>
 
+<div>
+    <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
+        href="#">
+        <div class="ses_big_middle">
+            <span class="fa-stack" style="font-size: 11px">
+                <i class="far fa-circle fa-stack-2x"></i>
+                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+            </span>
+            <h5>{{ _("Emergency Stop") }}</h5>
+            <span class="fa-stack" style="font-size: 11px">
+                <i class="far fa-circle fa-stack-2x"></i>
+                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+            </span>
+        </div>
+    </a>
+</div>
 
 <div id="confirmation" class="modal hide fade">
     <div class="modal-header">
@@ -33,12 +32,15 @@
     </div>
     <div class="modal-body">
         <p>
-            {{ _('Are you sure you want to stop your printer?') }}
+            {{ _("Are you sure you want to stop your printer?") }}
         </p>
     </div>
     <div class="modal-footer">
-        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
-        <a href="#" class="btn btn-danger" data-bind="click: sendCommand">{{ _('Proceed') }}</a>
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{
+            _("Cancel")
+            }}</a>
+        <a href="#" class="btn btn-danger" data-bind="click: sendCommand">{{
+            _("Proceed")
+            }}</a>
     </div>
-</div>
-
+</div>
\ No newline at end of file