alberanid/diffido
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

#13: improve responsive layout

Browse source
This commit is contained in:
Diffido 2018-01-29 21:57:54 +01:00
parent 16146a14d0
commit dafcbb6060
3 changed files with 63 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dist/base.html vendored
View file

@ -17,6 +17,10 @@ body {
padding: 6px; padding: 6px;
} }
#app {
margin-bottom: 22px;
}
.md-table { .md-table {
height: 80%; height: 80%;
} }
@ -47,6 +51,10 @@ body {
text-decoration: underline; text-decoration: underline;
} }
.md-card {
margin-top: 6px;
}
{% block style %}{% end %} {% block style %}{% end %}
</style> </style>
</head> </head>

65
dist/index.html vendored
View file

@ -20,24 +20,42 @@
<md-card-content> <md-card-content>
<md-table id="schedules-table" v-model="schedules"> <md-table id="schedules-table" v-model="schedules">
<md-table-row slot="md-table-row" slot-scope="{item}"> <md-table-row slot="md-table-row" slot-scope="{item}">
<md-table-cell md-label="#" md-sort-by="id" md-numeric><a :href="'/schedule.html?id=' + item.id">${ item.id }</a></md-table-cell> <md-table-cell md-label="#" md-sort-by="id" md-numeric>
<a :href="'/schedule.html?id=' + item.id">${ item.id }</a>
</md-table-cell>
<md-table-cell md-label="enabled" md-sort-by="enabled"> <md-table-cell md-label="enabled" md-sort-by="enabled">
<md-icon v-if="item.enabled">check_box</md-icon> <md-icon v-if="item.enabled">check_box</md-icon>
<md-icon v-if="!item.enabled">check_box_outline_blank</md-icon> <md-icon v-if="!item.enabled">check_box_outline_blank</md-icon>
</md-table-cell> </md-table-cell>
<md-table-cell md-label="title" md-sort-by="title"><a :href="'/schedule.html?id=' + item.id">${ item.title }</a></md-table-cell> <md-table-cell md-label="schedule" md-sort-by="schedule">
<md-table-cell md-label="url" md-sort-by="url"><a :href="item.url" target="_new">${ item.url }</a></md-table-cell> <a :href="'/schedule.html?id=' + item.id"><strong>${ item.title }</strong></a>
<md-table-cell md-label="trigger" md-sort-by="trigger">${ triggerString(item) }</md-table-cell> <br />
<md-table-cell md-label="last check" md-sort-by="last_history">${ item.last_history && item.last_history.message }</md-table-cell> <span>
<md-table-cell md-label="history"> <md-icon>link</md-icon>
<md-button :href="'/history.html?id=' + item.id" class="md-icon-button md-primary"> <a :href="item.url" target="_new">${ prettifyLink(item) }</a>
<md-icon>history</md-icon> <md-tooltip md-direction="bottom">${ item.url }</md-tooltip>
</md-button> </span>
</md-table-cell> </md-table-cell>
<md-table-cell md-label="run now"> <md-table-cell md-label="trigger" md-sort-by="trigger">
<md-button class="md-icon-button md-primary" @click="runSchedule(item.id)"> ${ triggerString(item) }
<md-icon>play_circle_outline</md-icon> <br />
</md-button> last check: ${ prettifyLastCheck(item) }
</md-table-cell>
<md-table-cell md-label="actions" class="table-cell-left">
<div class="md-layout md-alignment-top-left">
<div class="md-layout-item md-medium-size-10 md-small-size-50">
<md-button :href="'/history.html?id=' + item.id" class="md-icon-button md-primary md-dense" :md-ripple="false">
<md-icon>history</md-icon>
<md-tooltip md-direction="bottom">show history</md-tooltip>
</md-button>
</div>
<div class="md-layout-item md-medium-size-10 md-small-size-50">
<md-button class="md-icon-button md-primary md-dense" @click="runSchedule(item.id)" :md-ripple="false">
<md-icon>play_circle_outline</md-icon>
<md-tooltip md-direction="bottom">run now</md-tooltip>
</md-button>
</div>
</div>
</md-table-cell> </md-table-cell>
</md-table-row> </md-table-row>
</md-table> </md-table>
@ -72,6 +90,20 @@ var app = new Vue({
self.schedules = schedules; self.schedules = schedules;
}); });
}, },
prettifyLink: function(item) {
var link = item.url;
if (!link) {
return '';
}
if (link.length > 40) {
link = link.substring(0, 40) + "\u2026";
}
return link;
},
prettifyLastCheck: function(item) {
var last = item.last_history && item.last_history.message;
return last.substring(0, last.indexOf('.'));
},
triggerString: function(item) { triggerString: function(item) {
if (item.trigger == 'cron') { if (item.trigger == 'cron') {
return 'cron: ' + item.cron_crontab; return 'cron: ' + item.cron_crontab;
@ -105,3 +137,10 @@ var app = new Vue({
</script> </script>
{% end %} {% end %}
{% block style %}
.table-cell-left > .md-table-cell-container {
padding-left: 12px;
}
{% end %}

6
dist/schedule.html vendored
View file

@ -2,7 +2,7 @@
{% block body %} {% block body %}
<div id="app"> <div id="app">
<div class="md-layout md-gutter"> <div class="md-layout md-gutter md-alignment-center">
<div class="md-layout-item md-size-100"> <div class="md-layout-item md-size-100">
<div class="md-title"> <div class="md-title">
<span> <span>
@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div class="md-layout-item md-size-60"> <div class="md-layout-item md-medium-size-60 md-small-size-100">
<md-card id="main-card"> <md-card id="main-card">
<md-card-header> <md-card-header>
<div class="md-title"> <div class="md-title">
@ -63,7 +63,7 @@
</md-card> </md-card>
</div> </div>
<div class="md-layout-item"> <div class="md-layout-item md-medium-size-40 md-small-size-100">
<md-card id="trigger-card"> <md-card id="trigger-card">
<md-card-header> <md-card-header>
<div class="md-title"> <div class="md-title">