Better styling

README.md

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

public/css/app.css

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

resources/sass/app.scss

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

resources/views/components/quickview.vue

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

resources/views/components/tasklist.vue

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

resources/views/taskdetails.vue

@@ -17,13 +17,16 @@
 				<option value="15">15 days</option>
 				<option value="30">30 days</option>
 			</select>
+			<div id="chart" class="round">
 				<h3>Uptime: past {{ chart.days }} days</h3>
-			<div id="chart">
+				<div class="block-content">
-				<apexchart v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+					<apexchart class="graph" v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+				</div>
 			</div>
 
+			<div v-if="task.history.length > 0" class="round">
 				<h3>Last {{ chart.days }} days history log</h3>
-			<div v-if="task.history.length > 0">
+				<div class="block-content">
 					<p><i>Showing only records where status has changed</i></p>
 					<table id="tasks_tbl">
 						<thead>
@@ -56,6 +59,7 @@
 						</tbody>
 					</table>
 				</div>
+			</div>
 			<p v-else>No history to display here</p>
 		</div>
 	</div>
@@ -181,7 +185,5 @@
 </script>
 
 <style scoped>
-#chart {
+
-	margin-top: 3rem;
-}
 </style>