From e890c8115ce608f15c8e35ea9017b32e9c9dfee1 Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Wed, 7 Apr 2021 17:31:04 +0200
Subject: [PATCH] fixes some subtile design layout quirks
---
.../group-monitor/group-monitor.component.css | 270 +++++++++---------
.../test-view/test-view-table.css | 25 +-
.../test-view/test-view.component.css | 158 +++++-----
3 files changed, 232 insertions(+), 221 deletions(-)
diff --git a/src/app/group-monitor/group-monitor.component.css b/src/app/group-monitor/group-monitor.component.css
index c6315510..5ead0449 100644
--- a/src/app/group-monitor/group-monitor.component.css
+++ b/src/app/group-monitor/group-monitor.component.css
@@ -1,256 +1,260 @@
.page-body {
- overflow-x: hidden;
+ overflow-x: hidden;
}
.test-view-table {
- border-collapse: collapse;
- display: table;
+ border-collapse: collapse;
+ display: table;
}
.test-view-table thead {
- position: sticky;
- top: 0;
- z-index: 2;
- background: rgba(255, 255, 255, 0.8);
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background: rgba(255, 255, 255, 0.8);
}
.test-view-table td {
- padding-top: 15px;
- margin-right: 1em;
+ padding-top: 15px;
+ margin-right: 1em;
+}
+
+.test-view-table td[mat-sort-header="_checked"] {
+ padding-left: 5px;
}
.adminbackground {
- box-shadow: 5px 10px 20px black;
- background-color: white;
- margin: 0 0 0 15px;
- padding: 0 25px 25px 25px;
- height: 100%;
- overflow: auto;
- scroll-behavior: smooth;
+ box-shadow: 5px 10px 20px black;
+ background-color: white;
+ margin: 0 0 0 15px;
+ padding: 0 25px 25px 25px;
+ height: 100%;
+ overflow: auto;
+ scroll-behavior: smooth;
}
.page-header {
- display: flex;
- flex-wrap: wrap;
+ display: flex;
+ flex-wrap: wrap;
}
.page-header > p:last-child {
- margin-right: 15px;
+ margin-right: 15px;
}
.page-header > div {
- text-align: right;
- vertical-align: middle;
+ text-align: right;
+ vertical-align: middle;
}
.page-header .fill-remaining-space {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.connection-status {
- text-transform: uppercase;
- color: white;
- font-size: 80%;
- justify-content: space-between;
- width: 120px
+ text-transform: uppercase;
+ color: white;
+ font-size: 80%;
+ justify-content: space-between;
+ width: 120px
}
.connection-status mat-icon {
- font-size: 100%;
- padding: 0;
- top: 2px;
+ font-size: 100%;
+ padding: 0;
+ top: 2px;
}
.connection-status.error {
- background: #821123
+ background: #821123
}
.connection-status.ws-offline {
- background: orange;
+ background: orange;
}
.connection-status.ws-online {
- animation-name: pulse;
- animation-duration: 2s;
- animation-iteration-count: infinite;
+ animation-name: pulse;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
}
.connection-status.polling-fetch,
.connection-status.polling-sleep {
- position: relative;
- background-image: linear-gradient(90deg, rgba(0,146,0,1) 0%, rgba(0,199,0,1) 100%, rgba(0,146,0,1) 200%);
- background-repeat: repeat-x;
- background-position: 0;
- animation-name: move-gradient;
- animation-duration: 5s;
- animation-iteration-count: infinite;
+ position: relative;
+ background-image: linear-gradient(90deg, rgba(0,146,0,1) 0%, rgba(0,199,0,1) 100%, rgba(0,146,0,1) 200%);
+ background-repeat: repeat-x;
+ background-position: 0;
+ animation-name: move-gradient;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
}
@keyframes move-gradient {
- 0% {
- background-position: 0;
- }
- 100% {
- background-position: 120px;
- }
+ 0% {
+ background-position: 0;
+ }
+ 100% {
+ background-position: 120px;
+ }
}
@keyframes pulse {
- 0% {
- background: rgba(0,199,0,1);
- }
- 50% {
- background: rgba(0,146,0,1);
- }
- 100% {
- background: rgba(0,199,0,1);
- }
+ 0% {
+ background: rgba(0,199,0,1);
+ }
+ 50% {
+ background: rgba(0,146,0,1);
+ }
+ 100% {
+ background: rgba(0,199,0,1);
+ }
}
.toolbar {
- padding: 15px;
+ padding: 15px;
}
.toolbar h2 {
- margin-top: 0;
- font-size: 1.5em;
+ margin-top: 0;
+ font-size: 1.5em;
}
.toolbar .mat-radio-button ~ .mat-radio-button {
- margin-left: 16px;
+ margin-left: 16px;
}
.toolbar-section {
- margin-bottom: 1em
+ margin-bottom: 1em
}
.toolbar button {
- text-transform: uppercase;
+ text-transform: uppercase;
}
.toolbar .control ~ .control {
- margin-left: 15px;
+ margin-left: 15px;
}
.min-height-section {
- min-height: 3em;
+ min-height: 3em;
}
.toolbar-section-bottom {
- position: absolute;
- bottom: 0;
+ position: absolute;
+ bottom: 0;
}
mat-sidenav {
- width: 350px;
+ width: 350px;
}
.mat-drawer-content {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 25px;
- overflow: initial;
- height: initial;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 25px;
+ overflow: initial;
+ height: initial;
}
.mat-drawer-container {
- position: initial;
- background: none;
+ position: initial;
+ background: none;
}
.mat-drawer {
- margin: 15px 0 0 0;
+ margin: 15px 0 0 0;
}
.corner-menu {
- position: fixed;
- right: 10px;
- top: 72px;
- z-index: 10000;
- border-bottom-left-radius: 10px;
+ position: fixed;
+ right: 10px;
+ top: 72px;
+ z-index: 10000;
+ border-bottom-left-radius: 10px;
}
.scroll-hint {
- position: fixed;
- right: 15px;
- bottom: 15px;
- background: #b2ff59;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- border-radius: 20Px;
- height: 40px;
- width: 40px;
- line-height: 20px;
- text-align: center;
- z-index: 9000;
- color: #003333;
+ position: fixed;
+ right: 15px;
+ bottom: 15px;
+ background: #b2ff59;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ border-radius: 20Px;
+ height: 40px;
+ width: 40px;
+ line-height: 20px;
+ text-align: center;
+ z-index: 9000;
+ color: #003333;
}
.hide-scroll-hint .scroll-hint {
- animation: fade-and-shrink 0.3s reverse forwards;
+ animation: fade-and-shrink 0.3s reverse forwards;
}
@keyframes fade-and-shrink {
- 0% {
- opacity: 0;
- transform: scale(0)
- }
+ 0% {
+ opacity: 0;
+ transform: scale(0)
+ }
- 100% {
- opacity: 1;
- transform: scale(1)
- }
+ 100% {
+ opacity: 1;
+ transform: scale(1)
+ }
}
.drawer-button-open {
- top: 50%;
- left: 320px;
- position: fixed;
- z-index: 10000;
+ top: 50%;
+ left: 320px;
+ position: fixed;
+ z-index: 10000;
}
.drawer-button-close {
- top: 50%;
- left: -12px;
- color: white;
- position: fixed;
- z-index: 10000;
+ top: 50%;
+ left: -12px;
+ color: white;
+ position: fixed;
+ z-index: 10000;
}
.emph {
- color: #b2ff59;
- font-style: italic;
- text-transform: uppercase;
+ color: #b2ff59;
+ font-style: italic;
+ text-transform: uppercase;
}
[disabled] .emph {
- color: #821123
+ color: #821123
}
#message-panel alert:first-of-type {
- background: #b2ff59;
- animation: fade 7s reverse forwards;
+ background: #b2ff59;
+ animation: fade 7s reverse forwards;
}
@keyframes fade {
- 0% {
- opacity: 0.1;
- }
+ 0% {
+ opacity: 0.1;
+ }
- 100% {
- opacity: 1;
- }
+ 100% {
+ opacity: 1;
+ }
}
#shield {
- position: fixed;
- background: white;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- animation: fade 6s forwards;
- z-index: 100000;
+ position: fixed;
+ background: white;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ animation: fade 6s forwards;
+ z-index: 100000;
}
diff --git a/src/app/group-monitor/test-view/test-view-table.css b/src/app/group-monitor/test-view/test-view-table.css
index 366f30b5..af599881 100644
--- a/src/app/group-monitor/test-view/test-view-table.css
+++ b/src/app/group-monitor/test-view/test-view-table.css
@@ -1,27 +1,34 @@
:host(tc-test-view) {
- display: table-row;
- vertical-align: middle;
+ display: table-row;
+ vertical-align: middle;
}
td {
- padding-bottom: 0.2em;
- padding-top: 0.2em;
- border-bottom: 1px solid silver;
- padding-right: 2em;
+ padding-bottom: 0.2em;
+ padding-top: 0.2em;
+ border-bottom: 1px solid silver;
+ padding-right: 2em;
+}
+
+:host(tc-test-view):last-of-type td {
+ border-bottom: none;
}
td.super-state,
td.selected,
td:last-child {
- padding-right: 0;
+ padding-right: 0;
}
+td.selected {
+ padding-left: 5px;
+}
td:last-child {
- min-width: 100%;
+ min-width: 100%;
}
:host(test-view:last-child) td {
- border-bottom: none;
+ border-bottom: none;
}
diff --git a/src/app/group-monitor/test-view/test-view.component.css b/src/app/group-monitor/test-view/test-view.component.css
index 4a39a0ea..c5ae762d 100644
--- a/src/app/group-monitor/test-view/test-view.component.css
+++ b/src/app/group-monitor/test-view/test-view.component.css
@@ -1,168 +1,168 @@
h1,
h2 {
- font-size: 100%;
- display: inline-block;
- margin: 0 0.3em 0 0;
+ font-size: 100%;
+ display: inline-block;
+ margin: 0 0.3em 0 0;
}
h2 {
- font-weight: normal;
+ font-weight: normal;
}
.cluster {
- border-left: 5px solid white;
- border-bottom: none;
- width: 0;
- padding-right: 0;
+ border-left: 5px solid white;
+ border-bottom: none;
+ width: 0;
+ padding-right: 0;
}
.units-container {
- width: 100%
+ width: 100%
}
.units {
- display: inline-block;
- position: relative;
- white-space: nowrap;
- transform-style: preserve-3d;
+ display: inline-block;
+ position: relative;
+ white-space: nowrap;
+ transform-style: preserve-3d;
}
.units:before {
- background: #003333;
- /*width: 100%;*/
- position: absolute;
- content: " ";
- top: 45%;
- height: 10%;
- left: 3px;
- right: 3px;
+ background: #003333;
+ /*width: 100%;*/
+ position: absolute;
+ content: " ";
+ top: 45%;
+ height: 10%;
+ left: 3px;
+ right: 3px;
}
.unit {
- position: relative;
- display: inline-block;
- padding: 3px 5px;
- margin: 2px;
- border-radius: 16px;
- align-items: center;
- text-transform: uppercase;
- color: white;
- background: #003333;
- min-width: 1em;
- text-align: center;
- cursor: pointer;
- transform-style: preserve-3d;
+ position: relative;
+ display: inline-block;
+ padding: 3px 5px;
+ margin: 2px;
+ border-radius: 16px;
+ align-items: center;
+ text-transform: uppercase;
+ color: white;
+ background: #003333;
+ min-width: 1em;
+ text-align: center;
+ cursor: pointer;
+ transform-style: preserve-3d;
}
.unit.aggregated {
- width: 4em;
+ width: 4em;
}
.paused .unit {
- background: #001C1C;
+ background: #001C1C;
}
.pending .unit,
.locked .unit {
- background: #333333;
+ background: #333333;
}
.unit.restriction {
- padding: 2px 3px;
+ padding: 2px 3px;
}
.unit.restriction mat-icon {
- font-size: 0.7em;
- height: auto;
- width: auto;
+ font-size: 0.7em;
+ height: auto;
+ width: auto;
}
.unit.current {
- background: #b2ff59;
- color: #003333;
+ background: #b2ff59;
+ color: #003333;
}
.paused .unit.current {
- background: #446122;
- color: #333333;
+ background: #446122;
+ color: #333333;
}
.pending .unit.current,
.locked .unit.current {
- background: #b2b2b2;
- color: #333333;
+ background: #b2b2b2;
+ color: #333333;
}
.testlet {
- display: inline-block;
- padding: 3px 4px;
- margin: 2px;
- border-radius: 20px;
- border: 2px solid #003333;
- position: relative;
- transform-style: preserve-3d;
- cursor: pointer;
+ display: inline-block;
+ padding: 3px 4px;
+ margin: 2px;
+ border-radius: 20px;
+ border: 2px solid #003333;
+ position: relative;
+ transform-style: preserve-3d;
+ cursor: pointer;
}
.unit.marked::before,
.unit.selected::before,
.testlet.marked::before,
.testlet.selected::before {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- content: " ";
- transform: translateZ(-10px);
- margin: -12px -10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ content: " ";
+ transform: translateZ(-10px);
+ margin: -12px -10px;
}
.testlet.marked::before,
.testlet.selected::before {
- margin: -8px -2px;
+ margin: -8px -2px;
}
.unit.marked::before,
.testlet.marked::before {
- background: rgba(178, 200, 160, 0.5);
+ background: rgba(178, 200, 160, 0.5);
}
.unit.selected::before,
.testlet.selected::before {
- background: rgba(178, 200, 160, 0.7);
+ background: rgba(178, 200, 160, 0.7);
}
.unit.marked.selected::before,
.testlet.marked.selected::before {
- background: rgba(178, 200, 160, 0.9);
+ background: rgba(178, 200, 160, 0.9);
}
.locked .testlet {
- border-color: #333333;
+ border-color: #333333;
}
.featured-unit {
- display: inline-flex;
- vertical-align: middle;
- align-items: center;
+ display: inline-flex;
+ vertical-align: middle;
+ align-items: center;
}
.vertical-align-middle {
- display: inline-flex;
- vertical-align: middle;
- align-items: center;
- white-space: nowrap;
+ display: inline-flex;
+ vertical-align: middle;
+ align-items: center;
+ white-space: nowrap;
}
.warning {
- color: #821123;
- font-weight: bold
+ color: #821123;
+ font-weight: bold
}
.unit-badge.danger {
- color: #821123;
+ color: #821123;
}
.unit-badge.success {
- color: #b2ff59
+ color: #b2ff59
}
--
GitLab