From db68bee4973952cb304b4704e38f9fde41adcafe Mon Sep 17 00:00:00 2001
From: thelastWallE <12502210+thelastWallE@users.noreply.github.com>
Date: Sun, 11 Apr 2021 22:27:04 +0200
Subject: [PATCH] css

---
 octoprint_klipper/static/css/klipper.css      | 44 ++++++++++++-------
 .../templates/klipper_settings.jinja2         | 24 +++++-----
 .../templates/klipper_tab_main.jinja2         |  4 +-
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/octoprint_klipper/static/css/klipper.css b/octoprint_klipper/static/css/klipper.css
index ba55bb5..25d4afb 100644
--- a/octoprint_klipper/static/css/klipper.css
+++ b/octoprint_klipper/static/css/klipper.css
@@ -1,5 +1,5 @@
 .plugin-klipper-log {
-   padding: 3px;
+   padding: 0px;
    overflow-y: scroll;
    height: 400px;
    border: 1px solid #eee;
@@ -10,7 +10,7 @@
    margin: 3px auto 0 auto;
    border: 1px solid #ddd;
    border-radius: 3px;
-   background-color: #eeeeef;
+   background-color: #efefef;
    color: #333;
 }
 
@@ -57,26 +57,30 @@ ul#klipper-settings {
 
 #tab_plugin_klipper_main .row-fluid {
    display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
+   flex: row wrap;
+   align-items: stretch;
 }
 
-#tab_plugin_klipper_main .span8 {
-   flex-grow: 8;
-   float: left;
-   box-sizing: border-box;
+@media all and (max-width: 940px) {
+   #tab_plugin_klipper_main .row-fluid {
+     /* On small screens, we are no longer using row direction but column */
+     flex-direction: column;
+   }
+ }
+
+#tab_plugin_klipper_main #left-side {
+   flex: 3 1;
+   padding-right: 10px;
 }
 
 #tab_plugin_klipper_main .span8 label {
    float: left;
 }
 
-#tab_plugin_klipper_main .span4 {
-   flex-grow: 0;
-   flex-shrink: 1;
-   /* max-width: 13%; */
-   float: left;
-   box-sizing: border-box;
+#tab_plugin_klipper_main #right-side {
+   flex: 1 1;
+   max-width: 200px;
+   min-width: 100px;
 }
 
 #settings_plugin_klipper {
@@ -94,7 +98,7 @@ ul#klipper-settings {
 }
 
 #settings_plugin_klipper form .tab-content .tab-pane {
-   height: calc(100% - 35px);
+   height: 100%;
 }
 
 div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group {
@@ -102,13 +106,19 @@ div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content
    height: 100%;
 }
 
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group .editor-controls{
+   margin-bottom: 0px;
+   height: 26px;
+}
+
 div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor {
-   height: 100%;
+   height: calc(100% - 28px);
    width: 100%;
+   padding-top: 2px;
 }
 
 div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor div#plugin-klipper-config {
-   position: absolute;
+   position: relative;
    top: 0;
    right: 0;
    bottom: 0;
diff --git a/octoprint_klipper/templates/klipper_settings.jinja2 b/octoprint_klipper/templates/klipper_settings.jinja2
index a05bea6..51e358a 100644
--- a/octoprint_klipper/templates/klipper_settings.jinja2
+++ b/octoprint_klipper/templates/klipper_settings.jinja2
@@ -206,17 +206,19 @@
       <script src="plugin/klipper/static/js/lib/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="plugin/klipper/static/js/lib/ace/theme-monokai.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="plugin/klipper/static/js/lib/ace/mode-klipper_config.js" type="text/javascript"></script>
-      <button class="btn btn-small" data-bind="click: loadLastSession"
-         title="Reloads the last changes">
-         <i class="fas fa-redo"></i> {{ _('Reload last changes') }}
-      </button>
-      <button class="btn btn-small" data-bind='click: reloadFromFile'>
-         <i class="fas fa-upload"></i> {{ _('Reload from file') }}
-      </button>
-      <label class="inline"><input class="inline-checkbox" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check"> {{ _('Check parsing on save') }}</label>
-      &nbsp;&nbsp;
-      <a href='#' data-bind="click: minusFontsize" class="fas fa-search-minus"></a>
-      <a href='#' data-bind="click: plusFontsize" class="fas fa-search-plus"></a>
+      <div class="editor-controls">
+        <button class="btn btn-small" data-bind="click: loadLastSession"
+          title="Reloads the last changes">
+          <i class="fas fa-redo"></i> {{ _('Reload last changes') }}
+        </button>
+        <button class="btn btn-small" data-bind='click: reloadFromFile'>
+          <i class="fas fa-upload"></i> {{ _('Reload from file') }}
+        </button>
+        <label class="inline"><input class="inline-checkbox" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check"> {{ _('Check parsing on save') }}</label>
+        &nbsp;&nbsp;
+        <a href='#' data-bind="click: minusFontsize" class="fas fa-search-minus"></a>
+        <a href='#' data-bind="click: plusFontsize" class="fas fa-search-plus"></a>
+      </div>
       <div class="conf-editor">
         <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(settings.settings.plugins.klipper.config)" />
         <div id="plugin-klipper-config"></div>
diff --git a/octoprint_klipper/templates/klipper_tab_main.jinja2 b/octoprint_klipper/templates/klipper_tab_main.jinja2
index e9875f6..b7a8840 100644
--- a/octoprint_klipper/templates/klipper_tab_main.jinja2
+++ b/octoprint_klipper/templates/klipper_tab_main.jinja2
@@ -1,5 +1,5 @@
 <div class="row-fluid">
-  <div class="span8">
+  <div id="left-side">
     <label> <i class="icon-tasks"></i> {{ _("Messages") }} </label>
     <div class="plugin-klipper-log" data-bind="foreach: logMessages">
       <div class="log-item" data-bind="css: type">
@@ -16,7 +16,7 @@
       <i class="fa fa-trash"></i> {{ _("Clear") }}
     </button>
   </div>
-  <div class="span4">
+  <div id="right-side">
     <div class="control-group">
       <div class="control-group">
         <div class="controls">