webinno/monitolite
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Better styling

Browse source
This commit is contained in:
Axel 2021-12-23 16:55:10 +01:00
parent 3981724c86
commit 387d910e44
8 changed files with 83 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -21,8 +21,14 @@ It comes with a very straightforward dashboard written in PHP. This is **optiona
## Screenshot
### Tasks list with quick preview
![screenshot](https://github.com/axeloz/monitolite/raw/main/screenshot.png "Logo")
### Task details with graph and history
![screenshot](https://github.com/axeloz/monitolite/raw/main/screenshot2.png "Logo")
## Requirements

18
public/css/app.css
View file

@ -69,6 +69,17 @@ html body h3 .context-menu {
cursor: pointer;
font-size: 1rem;
}
html body div.round {
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
border-radius: 5px;
position: relative;
background-color: white;
overflow: hidden;
margin-bottom: 3rem;
}
html body div.round h3 {
margin-bottom: 1rem;
}
html body img {
vertical-align: sub;
}
@ -100,13 +111,6 @@ html body table td.right {
html body table#tasks_tbl, html body table#contacts_tbl {
width: 100%;
}
html body .quick-view {
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
border-radius: 5px;
position: relative;
background-color: white;
overflow: hidden;
}
html body .quick-view .new-group {
margin: 0.2rem;
display: inline-block;

82
public/js/app.js
View file

File diff suppressed because one or more lines are too long

22
resources/sass/app.scss
View file

@ -90,6 +90,21 @@ html {
}
}
div.round {
-webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
border-radius: 5px;
position: relative;
background-color: white;
overflow: hidden;
margin-bottom: 3rem;
h3 {
margin-bottom: 1rem;
}
}
img {
vertical-align: sub;
@ -133,13 +148,6 @@ html {
.quick-view {
-webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
border-radius: 5px;
position: relative;
background-color: white;
overflow: hidden;
.new-group {
margin: .2rem;

2
resources/views/components/quickview.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="quick-view">
<div class="quick-view round">
<h3>
Quick overview
</h3>

2
resources/views/components/tasklist.vue
View file

@ -3,7 +3,7 @@
<div
v-for="group in tasks"
v-bind:key="group.id"
class="task"
class="task round"
>
<a :name="'group-'+group.id"></a>
<h3>

82
resources/views/taskdetails.vue
View file

@ -17,44 +17,48 @@
<option value="15">15 days</option>
<option value="30">30 days</option>
</select>
<h3>Uptime: past {{ chart.days }} days</h3>
<div id="chart">
<apexchart v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
<div id="chart" class="round">
<h3>Uptime: past {{ chart.days }} days</h3>
<div class="block-content">
<apexchart class="graph" v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>
<h3>Last {{ chart.days }} days history log</h3>
<div v-if="task.history.length > 0">
<p><i>Showing only records where status has changed</i></p>
<table id="tasks_tbl">
<thead>
<tr>
<th width="20%">Date</th>
<th width="20%">Time</th>
<th width="*">Output</th>
<th width="10%">Status</th>
</tr>
</thead>
<tbody>
<tr
v-for="history in task.history"
v-bind:key="history.id"
>
<td>{{ moment(history.date).format('YYYY-MM-DD') }}</td>
<td>{{ moment(history.created_at).format('HH:mm:ss') }}</td>
<td>
<span v-if="history.output">
{{ history.output }}
</span>
<span v-else>
<i>No output</i>
</span>
</td>
<td :class="statusText(history.status)">
<img :src="'/img/'+statusText(history.status)+'.svg'" width="16" alt="Status" />
</td>
</tr>
</tbody>
</table>
<div v-if="task.history.length > 0" class="round">
<h3>Last {{ chart.days }} days history log</h3>
<div class="block-content">
<p><i>Showing only records where status has changed</i></p>
<table id="tasks_tbl">
<thead>
<tr>
<th width="20%">Date</th>
<th width="20%">Time</th>
<th width="*">Output</th>
<th width="10%">Status</th>
</tr>
</thead>
<tbody>
<tr
v-for="history in task.history"
v-bind:key="history.id"
>
<td>{{ moment(history.date).format('YYYY-MM-DD') }}</td>
<td>{{ moment(history.created_at).format('HH:mm:ss') }}</td>
<td>
<span v-if="history.output">
{{ history.output }}
</span>
<span v-else>
<i>No output</i>
</span>
</td>
<td :class="statusText(history.status)">
<img :src="'/img/'+statusText(history.status)+'.svg'" width="16" alt="Status" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p v-else>No history to display here</p>
</div>
@ -181,7 +185,5 @@
</script>
<style scoped>
#chart {
margin-top: 3rem;
}
</style>
</style>

BIN
screenshot2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 394 KiB