Home Explore Help
Register Sign In
alberanid
/
diffido
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

improve schedule layout

Davide Alberani 6 years ago
parent
7e94cfb43f
commit
caf2c88ae1
4 changed files with 86 additions and 46 deletions
Split View Show Diff Stats
  1. 1 1
      diffido.py
  2. 1 2
      dist/base.html
  3. 5 0
      dist/diff.html
  4. 79 43
      dist/schedule.html

+ 1 - 1
diffido.py
View File 

@@ -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'

+ 1 - 2
dist/base.html
View File 

@@ -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 %}

+ 5 - 0
dist/diff.html
View File 

@@ -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">

+ 79 - 43
dist/schedule.html
View File 

@@ -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>
 
@@ -31,6 +39,39 @@
 
                     </div>
 
 
                     <div class="md-layout md-gutter">
 
+                        <div class="md-layout-item md-size-33">
 
+                            <md-field>
 
+                                <label>notify email</label>
 
+                                <md-input v-model="schedule.email" type="email"></md-input>
 
+                            </md-field>
 
+                        </div>
 
+                        <div class="md-layout-item md-size-33">
 
+                            <md-field>
 
+                                <label>XPath selector</label>
 
+                                <md-input v-model="schedule.xpath"></md-input>
 
+                            </md-field>
 
+                        </div>
 
+                        <div class="md-layout-item md-size-33">
 
+                            <md-field>
 
+                                <label>minimum change</label>
 
+                                <md-input v-model="schedule.minimum_change"></md-input>
 
+                            </md-field>
 
+                        </div>
 
+                    </div>
 
+                    <md-switch v-model="schedule.enabled">enabled</md-switch>
 
+                </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>
 
@@ -40,13 +81,13 @@
 
                                 </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 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>
 
 
@@ -63,6 +104,8 @@
 
                                 <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>
 
@@ -82,36 +125,18 @@
 
                             </md-field>
 
                         </div>
 
                     </div>
 
-
 
-                    <div class="md-layout md-gutter">
 
-                        <div class="md-layout-item md-size-33">
 
-                            <md-field>
 
-                                <label>notify email</label>
 
-                                <md-input v-model="schedule.email" type="email"></md-input>
 
-                            </md-field>
 
-                        </div>
 
-                        <div class="md-layout-item md-size-33">
 
-                            <md-field>
 
-                                <label>XPath selector</label>
 
-                                <md-input v-model="schedule.xpath"></md-input>
 
-                            </md-field>
 
-                        </div>
 
-                        <div class="md-layout-item md-size-33">
 
-                            <md-field>
 
-                                <label>minimum change</label>
 
-                                <md-input v-model="schedule.minimum_change"></md-input>
 
-                            </md-field>
 
-                        </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-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 %}