From a2ce724dd3e75f964d383c1eb38420daaf8b076b Mon Sep 17 00:00:00 2001
From: Martin Muehlhaeuser <github@mmone.de>
Date: Tue, 14 Aug 2018 16:31:27 +0000
Subject: [PATCH] [view] Optimized sidebar layout

---
 .../templates/klipper_sidebar.jinja2          | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/octoprint_klipper/templates/klipper_sidebar.jinja2 b/octoprint_klipper/templates/klipper_sidebar.jinja2
index d4af402..cbbaaef 100644
--- a/octoprint_klipper/templates/klipper_sidebar.jinja2
+++ b/octoprint_klipper/templates/klipper_sidebar.jinja2
@@ -1,12 +1,17 @@
-<label for="connection_printers" data-bind="css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
-<select id="connection_printers" data-bind="options: connectionState.printerOptions, optionsText: 'name', optionsValue: 'id', value: connectionState.selectedPrinter, css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()"></select>
-<button class="btn btn-block" data-bind="click: connectionState.connect, text: connectionState.buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
-<hr>
-<div>
-   <label><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
-   <div data-bind="foreach: settings.settings.plugins.klipper.macros">
-      <!-- ko if: sidebar -->
-      <button class="btn btn-block" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"></button>
-      <!-- /ko -->
+<div class="control-group">
+   <div class="controls">
+      <label for="connection_printers" data-bind="css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
+      <select id="connection_printers" data-bind="options: connectionState.printerOptions, optionsText: 'name', optionsValue: 'id', value: connectionState.selectedPrinter, css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()"></select>
+      <button class="btn btn-block" data-bind="click: connectionState.connect, text: connectionState.buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
+   </div>
+</div>
+<div class="control-group">
+   <div class="controls">
+      <label class="control-label small"><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
+      <div data-bind="foreach: settings.settings.plugins.klipper.macros">
+         <!-- ko if: sidebar -->
+         <button class="btn btn-block" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"></button>
+         <!-- /ko -->
+      </div>
    </div>
 </div>
\ No newline at end of file