Small design improvements

README.md

@@ -43,6 +43,8 @@ I rewrote a couple of things today to make sure the script still works.
  * clone this repo
  * install Perl dependencies
  * install PHP composer dependencies: `cd ./web && composer install`
+ * install Javascript dependencies: `cd ./web && npm install`
+ * compile the Javascript sources: `cd ./web && npx mix production`
  * create a Database and import the schema from `sql/create.sql`
  * create your own `.env` file: `cp .env.example .env` and adapt it to your needs
  * create a webserver vhost with document root to the `web` directory

web/DB.php

@@ -46,7 +46,7 @@ class DB {
 				LEFT JOIN `tasks_history` as h ON (h.task_id = t.id)
 				LEFT JOIN `groups` as g ON (g.id = t.group_id)
 				WHERE (t.last_execution IS NULL OR h.datetime = t.last_execution)
-				ORDER BY group_id DESC
+				ORDER BY group_name ASC
 			';
 		}
 		else {

web/css/app.scss

@@ -101,10 +101,13 @@ html {
           color: #3D3D3D;
           padding: 0.3rem;
           background-color: #FFF;
-          vertical-align: top;
           border: 1px solid #9ccece;
           text-align: center;
           vertical-align: middle;
+
+          &.right {
+            text-align: right;
+          }
         }
 
         &#tasks_tbl, &#contacts_tbl {
@@ -124,7 +127,7 @@ html {
       overflow: hidden;
 
       .new-group {
-        margin: .1rem;
+        margin: .2rem;
         display: inline-block;
         border-radius: .4rem;
         overflow: hidden;
@@ -138,6 +141,7 @@ html {
           float: left;
           line-height: 1.2rem;
           min-width: 1.4rem;
+          padding: .2rem .6rem;
 
           &:not(:first-of-type) {
             border-left: 1px solid white;
@@ -182,6 +186,11 @@ html {
       font-size: 1rem;
       vertical-align: middle;
       border-radius: .5rem;
+      font-size: 0.8rem;
+    }
+
+    .small {
+      font-size: .8rem;
     }
 
     .hidden {

web/resources/app.vue

@@ -9,8 +9,8 @@
 
 <script>
 
-    import QuickView from '../resources/quickview.vue'
     import GroupList from './grouplist.vue'
+    import QuickView from './quickview.vue'
 
     export default{
         components: {

web/resources/grouplist.vue

@@ -8,7 +8,7 @@
 			<a :name="'group-'+group.id"></a>
 			<h3>
 				Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
-				<p class="context-menu"><img src="img/menu.svg" width="40" /></p>
+				<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
 			</h3>
 
 			<div class="block-content">

web/resources/quickview.vue

@@ -18,7 +18,7 @@
 						:class="statusText(task.status)"
 						class="square"
 					>
-						 
+						<span class="small">{{task.id }}</span>
 					</p>
 				</a>
 			</div>

web/resources/tasklist.vue

@@ -6,8 +6,8 @@
 					<th width="5%">Up?</th>
 					<th width="*">Host</th>
 					<th width="5%">Type</th>
-					<th width="20%">Last execution</th>
+					<th width="20%">Last checked</th>
-					<th width="20%">Frequency (min)</th>
+					<th width="13%">Frequency (min)</th>
 					<th width="5%">Active</th>
 				</tr>
 			</thead>
@@ -19,7 +19,7 @@
 					<td :class="statusText(task.status)">
 						<img :src="'img/'+statusText(task.status)+'.png'" width="16" alt="Status" />
 					</td>
-					<td :class="statusText(task.status)">
+					<td>
 						<a :href="task.host" target="_blank">{{ task.host }}</a>
 					</td>
 					<td>