From 5a0fd488e64b10da680d0293790bb34c466854fb Mon Sep 17 00:00:00 2001 From: axel Date: Sat, 9 Jan 2021 13:32:04 +0100 Subject: [PATCH] Better dashboard with collapsable blocks --- web/css/styles.css | 58 +++++++++++++++- web/index.php | 160 ++++++++++++++++++++++++--------------------- web/js/scripts.js | 25 +++++++ 3 files changed, 165 insertions(+), 78 deletions(-) diff --git a/web/css/styles.css b/web/css/styles.css index 6380eb0..1af524c 100644 --- a/web/css/styles.css +++ b/web/css/styles.css @@ -70,17 +70,19 @@ td { width: 100%; } -#task { +.task { margin: 3rem auto; - max-width: 80%; + max-width: 1000px; padding: 1rem; -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3); -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3); box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3); border-radius: 5px; - + position: relative; } + + .highlight { background-color: #000; padding: 0px 1rem; @@ -89,3 +91,53 @@ td { font-size: 1rem; vertical-align: middle; } + +.hidden { + display: none; +} + +.task.show .task-overlay { + display: none; +} + +.exp-icon { + position: absolute; + right: 1rem; + top: 1rem; + width: 20px; + min-height: 27px; + height: 27px; + background-repeat: no-repeat; + cursor: pointer; + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + animation-iteration-count: 3; + animation-delay: 3s; +} + +.task .exp-icon { + background-image: url('../img/expand.png'); +} + +.task.active .exp-icon { + background-image: url('../img/collapse.png'); +} + +@keyframes shake { + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, 60% { + transform: translate3d(4px, 0, 0); + } +} diff --git a/web/index.php b/web/index.php index db0faa6..b067337 100644 --- a/web/index.php +++ b/web/index.php @@ -1,7 +1,15 @@ - - + + + + + MonitoLite - Network monitoring tool + @@ -12,8 +20,9 @@ get_all_tasks()): ?> - -
+
+

 

+

Task # ยป for host

@@ -52,80 +61,81 @@
- -
-

Task history

- get_all_history($task['id'], 5)): ?> - - - - - - - - - - - - +
DatetimeStatus
+ + + + + + + + + + + - - - - - - - - -
DatetimeStatus
- Success SUCCESS - - Success ERROR -
-

Only the 5 latest entries are displayed

- -

No history found here

- -
- -
-

Task contacts

+ + + Success SUCCESS + + + + Success ERROR + + + + + + +

Only the 5 latest entries are displayed

+ +

No history found here

+ +
- get_all_contacts($task['id'])): ?> - - - - - - - - - - - - - - - - - - - - - - - -
SurnameFirstnameEmailPhoneCreation dateActive
- -

- Warning - No contact found here. That means that nobody will get any notification in case of an error. -

- +
+

Task contacts

+ + get_all_contacts($task['id'])): ?> + + + + + + + + + + + + + + + + + + + + + + + +
SurnameFirstnameEmailPhoneCreation dateActive
+ +

+ Warning + No contact found here. That means that nobody will get any notification in case of an error. +

+ +
-
+ diff --git a/web/js/scripts.js b/web/js/scripts.js index e69de29..f06dc8c 100644 --- a/web/js/scripts.js +++ b/web/js/scripts.js @@ -0,0 +1,25 @@ +$(document).ready(function() { + $('.task .exp-icon').on('click', function() { + var el = $(this).parent('.task'); + + if (el.hasClass('active')) { + el.removeClass('active'); + el.children('.hidden').slideUp(); + } + else { + $('.task').removeClass('active'); + $('.task').children('.hidden').slideUp(); + el.addClass('active'); + el.children('.hidden').slideDown(); + } + }); + + $('.task').not('.active').on('mouseover', function() { + $(this).children('.task-overlay').show(); + }); + + $('.task').not('.active').on('mouseout', function() { + $(this).children('.task-overlay').hide(); + }); + +})