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 ## Screenshot
### Tasks list with quick preview
![screenshot](https://github.com/axeloz/monitolite/raw/main/screenshot.png "Logo") ![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 ## Requirements

18
public/css/app.css
View file

@ -69,6 +69,17 @@ html body h3 .context-menu {
cursor: pointer; cursor: pointer;
font-size: 1rem; 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 { html body img {
vertical-align: sub; vertical-align: sub;
} }
@ -100,13 +111,6 @@ html body table td.right {
html body table#tasks_tbl, html body table#contacts_tbl { html body table#tasks_tbl, html body table#contacts_tbl {
width: 100%; 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 { html body .quick-view .new-group {
margin: 0.2rem; margin: 0.2rem;
display: inline-block; 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 { img {
vertical-align: sub; vertical-align: sub;
@ -133,13 +148,6 @@ html {
.quick-view { .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 { .new-group {
margin: .2rem; margin: .2rem;

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

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

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

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

82
resources/views/taskdetails.vue
View file

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