Github
/
Ward
mirror of
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed animation bug on setup screen 

Added controls and pages
This commit is contained in:
Rudolf Barbu 2020-07-18 01:30:44 +03:00
parent d83184c644
commit 9f3dc88915
10 changed files with 207 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/java/org/bsoftware/ward/controllers/IndexController.java
View File

@ -41,10 +41,10 @@ public class IndexController
@GetMapping
public String getIndex(Model model) throws Exception
{
if (Ward.isFirstLaunch())
{
return "setup";
}
// if (Ward.isFirstLaunch())
// {
// return "setup";
// }
model.addAttribute("infoDto", infoService.get());

126
src/main/resources/static/css/animations.css
View File

@ -16,8 +16,10 @@
:root
{
/* animation-duration */
--animation-duration-wiggle: 0.6s;
--animation-duration-fade-in-triangles: 0.5s;
--animation-duration-wiggle-span: 0.6s;
--animation-duration-wiggle-first-control: 1s;
--animation-duration-wiggle-second-control: 1s;
--animation-duration-fade-in-triangle: 0.5s;
--animation-duration-fade-in-error-div: 0.8s;
/* animation-delay */
@ -27,50 +29,6 @@
--animation-delay-third-span: 0.6s;
}
@keyframes wiggle
{
0%
{
top: 0.000rem;
}
50%
{
top: -2rem;
}
100%
{
top: 0.000rem;
}
}
@keyframes fade-in-triangles
{
0%
{
top: 0.000rem;
opacity: 0;
}
100%
{
top: 0.563rem;
opacity: 1;
}
}
@keyframes fade-out-triangles
{
0%
{
top: 0.563rem;
opacity: 1;
}
100%
{
top: 0.000rem;
opacity: 0;
}
}
@keyframes fade-in-square
{
0%
@ -99,6 +57,82 @@
}
}
@keyframes wiggle-span
{
0%
{
top: 0.000rem;
}
50%
{
top: -2rem;
}
100%
{
top: 0.000rem;
}
}
@keyframes wiggle-first-control
{
0%
{
left: 0.750rem;
}
50%
{
left: 1.750rem;
}
100%
{
left: 0.750rem;
}
}
@keyframes wiggle-second-control
{
0%
{
left: 19.250rem;
}
50%
{
left: 18.250rem;
}
100%
{
left: 19.250rem;
}
}
@keyframes fade-in-triangle
{
0%
{
top: 0.000rem;
opacity: 0;
}
100%
{
top: 0.563rem;
opacity: 1;
}
}
@keyframes fade-out-triangle
{
0%
{
top: 0.563rem;
opacity: 1;
}
100%
{
top: 0.000rem;
opacity: 0;
}
}
@keyframes fade-in-error-div
{
0%

1
src/main/resources/static/css/colors.css
View File

@ -16,6 +16,7 @@
{
/* white */
--white: rgba(255, 255, 255, 1);
--white-opacity-50: rgba(255, 255, 255, 0.6);
--white-opacity-70: rgba(255, 255, 255, 0.7);
--white-opacity-90: rgba(255, 255, 255, 0.9);

31
src/main/resources/static/css/dimensions.css
View File

@ -17,8 +17,8 @@
/* top */
--top-logo: 2.188rem;
--top-logo-description: 5.300rem;
--top-logo-cloud-left: 2.875rem;
--top-logo-cloud-right: 2.875rem;
--top-cloud-left: 2.875rem;
--top-cloud-right: 2.875rem;
--top-form-field-div: 0.313rem;
--top-form-field-input: 0.125rem;
--top-label-additional-settings: 1.500rem;
@ -31,8 +31,8 @@
--top-info-label: 4.188rem;
--top-inner-dot: 0.375rem;
--top-detailed-hw-info-div: 1.168rem;
--top-uptime-dashboard-logo: 2.188rem;
--top-uptime-dashboard-logo-description: 5.300rem;
--top-controls-div: 0.750rem;
--top-controls-div-before: 1.250rem;
--top-uptime-rectangle-grid: 1.925rem;
--top-chart-label: 1.500rem;
--top-chart-triangle-grid: 0.500rem;
@ -55,7 +55,7 @@
--bottom-error-advice: 0.563rem;
/* left */
--left-logo-cloud-right: 12.875rem;
--left-cloud-right: 12.875rem;
--left-form-squares-grid: 9.250rem;
--left-form-field: 1.500rem;
--left-button-squares-grid-first: 1.500rem;
@ -75,6 +75,9 @@
--left-third-label: 15.385rem;
--left-first-divider: 7.313rem;
--left-second-divider: 14.563rem;
--left-controls-first: 0.750rem;
--left-controls-second: 19.250rem;
--left-controls-div-before: 0.313rem;
--left-uptime-squares-grid: 9.250rem;
--left-uptime-rectangle-grid: 2.781rem;
--left-chart-label: 1.500rem;
@ -96,7 +99,6 @@
/* margin-right */
--margin-right-form-squares-grid-div: 0.488rem;
--margin-right-theme-button-first: 1.938rem;
--margin-right-usage-value: 2.937rem;
--margin-right-uptime-squares-grid-div: 0.488rem;
--margin-right-values-grid-div: 0.125rem;
@ -114,7 +116,7 @@
--height-setup-div: 26.706rem;
--height-clouds: 8.281rem;
--height-clouds-img: 5.438rem;
--height-logo-background: 8.281rem;
--height-background: 8.281rem;
--height-form: 18.425rem;
--height-form-squares-grid-div: 0.625rem;
--height-form-field: 1.875rem;
@ -137,9 +139,10 @@
--height-inner-dot: 0.750rem;
--height-detailed-hw-info-div: 1.063rem;
--height-dividers-div: 3.125rem;
--height-controls: 2.625rem;
--height-controls-div: 1.875rem;
--height-uptime: 8.281rem;
--height-uptime-squares-grid-div: 0.625rem;
--height-uptime-dashboard-logo-background: 8.281rem;
--height-values-grid-div: 3.188rem;
--height-labels-grid-div: 0.813rem;
--height-chart-rectangle-grid-div: 0.625rem;
@ -158,7 +161,7 @@
--width-logo-description: 21.875rem;
--width-clouds: 21.875rem;
--width-clouds-img: 4.375rem;
--width-logo-background: 21.875rem;
--width-background: 21.875rem;
--width-form: 21.875rem;
--width-form-squares-grid-div: 0.625rem;
--width-form-field: 18.875rem;
@ -180,9 +183,8 @@
--width-inner-dot: 0.750rem;
--width-detailed-hw-info-div: 5.625rem;
--width-dividers-div: 0.063rem;
--width-uptime-dashboard-logo: 21.875rem;
--width-uptime-dashboard-logo-description: 21.875rem;
--width-uptime-dashboard-logo-background: 21.875rem;
--width-controls: 100%;
--width-controls-div: 1.875rem;
--width-uptime: 100%;
--width-uptime-squares-grid-div: 0.625rem;
--width-values-grid-div: 3.750rem;
@ -209,6 +211,8 @@
--border-chart-container: 0.063rem;
/* border-width */
--border-width-controls-first-before: 0.638rem 0.638rem 0.000rem 0.638rem;
--border-width-controls-second-before: 0.638rem 0.638rem 0.000rem 0.638rem;
--border-width-chart-triangle-grid-div: 0.438rem 0.438rem 0.000rem 0.438rem;
/* border-radius */
@ -219,6 +223,7 @@
--border-radius-card-footer-dots-grid-div: 50%;
--border-radius-inner-dot: 50%;
--border-radius-error-gif: 50%;
--border-radius-controls-div: 50%;
--border-radius-error-div: 1.250rem;
/* letter-spacing */
@ -234,5 +239,7 @@
/* transform */
--transform-theme-button-div-active: scale(0.9);
--transform-submit-button: scale(0.9);
--transform-controls-first: rotate(90deg);
--transform-controls-second: rotate(-90deg);
--transform-chart-rectangle-grid-div-active: scale(0.9);
}

93
src/main/resources/static/css/layout.css
View File

@ -80,23 +80,23 @@ body
width: var(--width-clouds-img);
}
.logo-cloud-left
.cloud-left
{
top: var(--top-logo-cloud-left);
top: var(--top-cloud-left);
}
.logo-cloud-right
.cloud-right
{
top: var(--top-logo-cloud-right);
left: var(--left-logo-cloud-right);
top: var(--top-cloud-right);
left: var(--left-cloud-right);
}
.logo-background
.background
{
position: absolute;
top: 0;
height: var(--height-logo-background);
width: var(--width-logo-background);
height: var(--height-background);
width: var(--width-background);
}
.form
@ -243,14 +243,10 @@ body
.button-squares-grid > .second
{
left: var(--left-button-squares-grid-second);
visibility: hidden;
background: var(--background-button-squares-grid-second);
}
.tooltip
{
visibility: visible;
}
.theme-button
{
letter-spacing: var(--letter-spacing-2px);
@ -493,24 +489,24 @@ body
height: var(--height-usage-value-span);
width: var(--width-usage-value-span);
color: var(--color-usage-value-span);
animation-duration: var(--animation-duration-wiggle);
animation-duration: var(--animation-duration-wiggle-span);
}
.first-span
{
animation: wiggle;
animation: wiggle-span;
animation-delay: var(--animation-delay-first-span);
}
.second-span
{
animation: wiggle;
animation: wiggle-span;
animation-delay: var(--animation-delay-second-span);
}
.third-span
{
animation: wiggle;
animation: wiggle-span;
animation-delay: var(--animation-delay-third-span)
}
@ -692,6 +688,65 @@ body
left: var(--left-second-divider);
}
.controls
{
position: absolute;
height: var(--height-controls);
width: var(--width-controls);
}
.controls > div
{
position: absolute;
top: var(--top-controls-div);
z-index: 1;
height: var(--height-controls-div);
width: var(--width-controls-div);
border-radius: var(--border-radius-controls-div);
background: var(--background-controls-div);
}
.controls > .first
{
left: var(--left-controls-first);
transform: var(--transform-controls-first);
animation: wiggle-first-control;
animation-duration: var(--animation-duration-wiggle-first-control);
}
.controls > .second
{
left: var(--left-controls-second);
transform: var(--transform-controls-second);
animation: wiggle-second-control;
animation-duration: var(--animation-duration-wiggle-second-control);
}
.controls > div::before
{
position: relative;
top: var(--top-controls-div-before);
left: var(--left-controls-div-before);
content: "";
border-style: solid;
border-color: var(--background-controls-div-before) transparent;
}
.controls > .first::before
{
border-width: var(--border-width-controls-first-before);
}
.controls > .second::before
{
border-width: var(--border-width-controls-second-before);
}
.pages
{
position: absolute;
}
.uptime
{
position: absolute;
@ -795,8 +850,8 @@ body
border-style: solid;
border-width: var(--border-width-chart-triangle-grid-div);
opacity: 0;
animation: fade-in-triangles;
animation-duration: var(--animation-duration-fade-in-triangles);
animation: fade-in-triangle;
animation-duration: var(--animation-duration-fade-in-triangle);
animation-delay: var(--animation-delay-chart-triangle-grid-div);
animation-fill-mode: forwards;
}

4
src/main/resources/static/css/themes.css
View File

@ -79,6 +79,8 @@ html[theme = "light"]
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green);
--background-card-footer-dots-grid-div: var(--white);
--background-dividers-div: var(--white);
--background-controls-div: var(--white-opacity-50);
--background-controls-div-before: var(--white);
--background-uptime: var(--linear-gradient-uptime-light);
--background-uptime-squares-grid-first: var(--blue-light);
--background-uptime-squares-grid-second: var(--red-light);
@ -160,6 +162,8 @@ html[theme = "dark"]
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--grey-light);
--background-card-footer-dots-grid-div: var(--grey-dark);
--background-dividers-div: var(--grey-dark);
--background-controls-div: var(--white-opacity-50);
--background-controls-div-before: var(--white);
--background-uptime: var(--linear-gradient-uptime-dark);
--background-uptime-squares-grid-first: var(--grey-light);
--background-uptime-squares-grid-second: var(--grey-light);

6
src/main/resources/static/js/chart.js
View File

@ -198,21 +198,21 @@ function hideDataset(element)
{
case "processor-rectangle":
{
processorTriangle.style.animation = chart.getDatasetMeta(0).hidden ? "fade-in-triangles 0.5s forwards" : "fade-out-triangles 0.5s forwards";
processorTriangle.style.animation = chart.getDatasetMeta(0).hidden ? "fade-in-triangle 0.5s forwards" : "fade-out-triangle 0.5s forwards";
chart.getDatasetMeta(0).hidden = chart.getDatasetMeta(0).hidden ? false : true;
break;
}
case "ram-rectangle":
{
ramTriangle.style.animation = chart.getDatasetMeta(1).hidden ? "fade-in-triangles 0.5s forwards" : "fade-out-triangles 0.5s forwards";
ramTriangle.style.animation = chart.getDatasetMeta(1).hidden ? "fade-in-triangle 0.5s forwards" : "fade-out-triangle 0.5s forwards";
chart.getDatasetMeta(1).hidden = chart.getDatasetMeta(1).hidden ? false : true;
break;
}
case "storage-rectangle":
{
storageTriangle.style.animation = chart.getDatasetMeta(2).hidden ? "fade-in-triangles 0.5s forwards" : "fade-out-triangles 0.5s forwards";
storageTriangle.style.animation = chart.getDatasetMeta(2).hidden ? "fade-in-triangle 0.5s forwards" : "fade-out-triangle 0.5s forwards";
chart.getDatasetMeta(2).hidden = chart.getDatasetMeta(2).hidden ? false : true;
break;

2
src/main/resources/static/js/setup.js
View File

@ -42,6 +42,8 @@ function changeTheme(element)
}
else
{
darkThemeSquare.style.visibility = "visible";
lightThemeSquare.style.animation = "fade-out-square 0.5s forwards";
darkThemeSquare.style.animation = "fade-in-square 0.5s forwards";

22
src/main/resources/templates/index.html
View File

@ -186,13 +186,23 @@
<script type = "text/javascript" th:inline = "javascript"> labelsInitialization(); </script>
<div class = "col-6 col-lg-6 col-xl-4">
<div class = "card">
<div class = "logo">WARD</div>
<div class = "logo-description">SERVER DASHBOARD</div>
<div class = "clouds">
<img class = "logo-cloud-left" th:src = @{/img/logo/clouds/left.png} />
<img class = "logo-cloud-right" th:src = @{/img/logo/clouds/right.png} />
<div class = "controls">
<div id = "first-control" class = "first"></div>
<div id = "second-control" class = "second"></div>
</div>
<img class = "logo-background" th:src = @{/img/logo/background.png} />
<div class = "pages">
<div id = "location"></div>
<div id = "logo">
<div class = "logo">WARD</div>
<div class = "logo-description">SERVER DASHBOARD</div>
</div>
<div id = "info"></div>
</div>
<div class = "clouds">
<img class = "cloud-left" th:src = @{/img/logo/clouds/left.png} />
<img class = "cloud-right" th:src = @{/img/logo/clouds/right.png} />
</div>
<img class = "background" th:src = @{/img/logo/background.png} />
<div class = "uptime">
<div class = "uptime-squares-grid">
<div class = "first"></div>

8
src/main/resources/templates/setup.html
View File

@ -25,14 +25,14 @@
<body id = "background">
<script type = "text/javascript" th:inline = "javascript"> backgroundInitialization(); </script>
<div class = "container setup">
<div class = "setup-div" >
<div class = "setup-div">
<div class = "logo">WARD</div>
<div class = "logo-description">SERVER DASHBOARD</div>
<div class = "clouds">
<img class = "logo-cloud-left" th:src = @{/img/logo/clouds/left.png} />
<img class = "logo-cloud-right" th:src = @{/img/logo/clouds/right.png} />
<img class = "cloud-left" th:src = @{/img/logo/clouds/left.png} />
<img class = "cloud-right" th:src = @{/img/logo/clouds/right.png} />
</div>
<img class = "logo-background" th:src = @{/img/logo/background.png} />
<img class = "background" th:src = @{/img/logo/background.png} />
<div class = "form">
<div class = "form-squares-grid">
<div class = "first"></div>