From caf2c88ae1443ff1fdd86b4543a0e619875c730b Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Thu, 25 Jan 2018 23:53:09 +0100
Subject: [PATCH] improve schedule layout

---
 diffido.py         |   2 +-
 dist/base.html     |   3 +-
 dist/diff.html     |   5 ++
 dist/schedule.html | 170 +++++++++++++++++++++++++++------------------
 4 files changed, 110 insertions(+), 70 deletions(-)
diff --git a/diffido.py b/diffido.py
index b3ed4f6..e0c1c9e 100755
--- a/diffido.py
+++ b/diffido.py
@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-
 import os
 import re
 import io
@@ -44,6 +43,7 @@ from tornado.options import define, options
 import tornado.web
 from tornado import gen, escape
 
+
 JOBS_STORE = 'sqlite:///conf/jobs.db'
 API_VERSION = '1.0'
 SCHEDULES_FILE = 'conf/schedules.json'
diff --git a/dist/base.html b/dist/base.html
index dc16df2..cd7ed54 100644
--- a/dist/base.html
+++ b/dist/base.html
@@ -6,12 +6,11 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
         <link rel="stylesheet" href="/static/css/vue-material.min.css">
         <link rel="stylesheet" href="/static/css/themes/default.css">
-        <link rel="stylesheet" href="/static/css/diff2html.css">
         <script src="/static/js/lodash.min.js"></script>
         <script src="/static/js/vue.js"></script>
         <script src="/static/js/vue-material.min.js"></script>
         <script src="/static/js/axios.min.js"></script>
-        <script src="/static/js/diff2html.js"></script>
+        {% block head %}{% end %}
     </head>
     <body>
         {% block body %}{% end %}
diff --git a/dist/diff.html b/dist/diff.html
index efbbcad..b9cb387 100644
--- a/dist/diff.html
+++ b/dist/diff.html
@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 
+{% block head %}
+        <link rel="stylesheet" href="/static/css/diff2html.css">
+        <script src="/static/js/diff2html.js"></script>
+{% end %}
+
 {% block body %}
 <div id="app">
     <div class="md-layout">
diff --git a/dist/schedule.html b/dist/schedule.html
index 75c833a..0b15829 100644
--- a/dist/schedule.html
+++ b/dist/schedule.html
@@ -2,27 +2,35 @@
 
 {% block body %}
 <div id="app">
-    <div class="md-layout">
-        <div class="md-layout-item">
+    <div class="md-layout md-gutter">
+        <div class="md-layout-item md-size-100">
+            <div class="md-title">
+                <span>
+                <md-button href="/" class="md-icon-button md-primary home-icon">
+                    <md-icon>home</md-icon>
+                </md-button>
+                Diffido: ${(schedule && schedule.title) || 'new'} schedule
+                </span>
+            </div>
+        </div>
+
+        <div class="md-layout-item md-size-60">
             <md-card id="main-card">
                 <md-card-header>
                     <div class="md-title">
-                        <md-button href="/" class="md-icon-button md-primary">
-                            <md-icon>home</md-icon>
-                        </md-button>
-                        Diffido: ${(schedule && schedule.title) || 'new'} schedule
+                        Settings
                     </div>
                 </md-card-header>
 
                 <md-card-content>
                     <div class="md-layout md-gutter">
-                        <div class="md-layout-item">
+                        <div class="md-layout-item md-size-50">
                             <md-field>
                                 <label>title</label>
                                 <md-input v-model="schedule.title" required></md-input>
                             </md-field>
                         </div>
-                        <div class="md-layout-item">
+                        <div class="md-layout-item md-size-50">
                             <md-field>
                                 <label>url</label>
                                 <md-input v-model="schedule.url" required></md-input>
@@ -30,59 +38,6 @@
                         </div>
                     </div>
 
-                    <div class="md-layout md-gutter">
-                        <div class="md-layout-item md-size-25">
-                            <md-field>
-                                <label>trigger</label>
-                                <md-select v-model="schedule.trigger">
-                                    <md-option value="interval">interval</md-option>
-                                    <md-option value="cron">cron</md-option>
-                                </md-select>
-                            </md-field>
-                        </div>
-                        <div class="md-layout-item md-size-25">
-                            <div v-if="schedule.trigger == 'cron'">
-                                <md-field>
-                                    <label>crontab</label>
-                                    <md-input v-model="schedule.cron_crontab"></md-input>
-                                </md-field>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
-                        <div class="md-layout-item md-size-20">
-                            <md-field>
-                                <label>weeks</label>
-                                <md-input v-model="schedule.interval_weeks" type="number"></md-input>
-                            </md-field>
-                        </div>
-                        <div class="md-layout-item md-size-20">
-                            <md-field>
-                                <label>days</label>
-                                <md-input v-model="schedule.interval_days" type="number"></md-input>
-                            </md-field>
-                        </div>
-                        <div class="md-layout-item md-size-20">
-                            <md-field>
-                                <label>hours</label>
-                                <md-input v-model="schedule.interval_hours" type="number"></md-input>
-                            </md-field>
-                        </div>
-                        <div class="md-layout-item md-size-20">
-                            <md-field>
-                                <label>minutes</label>
-                                <md-input v-model="schedule.interval_minutes" type="number"></md-input>
-                            </md-field>
-                        </div>
-                        <div class="md-layout-item md-size-20">
-                            <md-field>
-                                <label>seconds</label>
-                                <md-input v-model="schedule.interval_seconds" type="number"></md-input>
-                            </md-field>
-                        </div>
-                    </div>
-
                     <div class="md-layout md-gutter">
                         <div class="md-layout-item md-size-33">
                             <md-field>
@@ -104,14 +59,84 @@
                         </div>
                     </div>
                     <md-switch v-model="schedule.enabled">enabled</md-switch>
-                    
-                    <br />
-                    <md-button class="md-raised md-primary" @click="saveSchedule()">save</md-button>
-                    <md-button class="md-raised md-accent" :disabled="!hasID()" @click="deleteSchedule()">delete</md-button>
-                    <md-button href="/">back</md-button>
                 </md-card-content>
             </md-card>
         </div>
+
+        <div class="md-layout-item">
+            <md-card id="trigger-card">
+                <md-card-header>
+                    <div class="md-title">
+                        Trigger
+                    </div>
+                </md-card-header>
+                <md-card-content>
+                    <div class="md-layout md-gutter">
+                        <div class="md-layout-item md-size-25">
+                            <md-field>
+                                <label>trigger</label>
+                                <md-select v-model="schedule.trigger">
+                                    <md-option value="interval">interval</md-option>
+                                    <md-option value="cron">cron</md-option>
+                                </md-select>
+                            </md-field>
+                        </div>
+                    </div>
+                    <div v-if="schedule.trigger == 'cron'" class="md-layout md-gutter">
+                        <div class="md-layout-item md-size-50">
+                            <md-field>
+                                <label>crontab</label>
+                                <md-input v-model="schedule.cron_crontab"></md-input>
+                            </md-field>
+                        </div>
+                    </div>
+
+                    <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
+                        <div class="md-layout-item md-size-20">
+                            <md-field>
+                                <label>weeks</label>
+                                <md-input v-model="schedule.interval_weeks" type="number"></md-input>
+                            </md-field>
+                        </div>
+                        <div class="md-layout-item md-size-20">
+                            <md-field>
+                                <label>days</label>
+                                <md-input v-model="schedule.interval_days" type="number"></md-input>
+                            </md-field>
+                        </div>
+                    </div>
+                    <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
+                        <div class="md-layout-item md-size-20">
+                            <md-field>
+                                <label>hours</label>
+                                <md-input v-model="schedule.interval_hours" type="number"></md-input>
+                            </md-field>
+                        </div>
+                        <div class="md-layout-item md-size-20">
+                            <md-field>
+                                <label>minutes</label>
+                                <md-input v-model="schedule.interval_minutes" type="number"></md-input>
+                            </md-field>
+                        </div>
+                        <div class="md-layout-item md-size-20">
+                            <md-field>
+                                <label>seconds</label>
+                                <md-input v-model="schedule.interval_seconds" type="number"></md-input>
+                            </md-field>
+                        </div>
+                    </div>
+                </md-card-content>
+            </md-card>
+        </div>
+
+        <div class="md-layout-item md-size-100">
+            <div class="md-title">
+                <br />
+                <md-button class="md-raised md-primary" @click="saveSchedule()">save</md-button>
+                <md-button class="md-raised md-accent" :disabled="!hasID()" @click="deleteSchedule()">delete</md-button>
+                <md-button href="/">back</md-button>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -179,13 +204,24 @@ var app = new Vue({
 
 body {
     background-color: white;
-    padding: 6px;
+    padding: 12px 20px 12px 20px;
 }
 
 .md-table {
     height: 80%;
 }
 
+.home-icon {
+    margin-top: -6px;
+}
+
+.md-card-content {
+    padding: 20px;
+}
+
+#trigger-card, #main-card {
+    min-height: 350px;
+}
 
 </style>
 {% end %}
