From 8ca45faf47b3e54ff7d223416d053ba9d3964576 Mon Sep 17 00:00:00 2001
From: "lmoucka@students.zcu.cz" <AccessGitLm21895.199521>
Date: Mon, 17 May 2021 21:37:15 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Re=20#8924=20-=20K=C3=B3dodov=C3=A1n=C3=AD?=
=?UTF-8?q?=20responzivn=C3=ADho=20designu=20p=C5=99ihl=C3=A1=C5=A1en?=
=?UTF-8?q?=C3=AD=20a=20dashboardu=20+=20Add=20styles=20for=20responsive?=
=?UTF-8?q?=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/dashboard.component.html | 4 +-
.../components/sensors/sensors.component.html | 4 +-
.../nav-bar/components/nav-bar.component.html | 59 +++----
src/assets/scss/_dashboard.scss | 32 ++++
src/assets/scss/_login.scss | 9 ++
src/assets/scss/_navbar.scss | 152 +++++++++++++++++-
src/index.html | 1 +
7 files changed, 221 insertions(+), 40 deletions(-)
diff --git a/src/app/dashboard/components/dashboard.component.html b/src/app/dashboard/components/dashboard.component.html
index 3b1bcb6..921a0f0 100644
--- a/src/app/dashboard/components/dashboard.component.html
+++ b/src/app/dashboard/components/dashboard.component.html
@@ -5,8 +5,8 @@
<p-accordionTab *ngFor="let unit of units">
<p-header [className]="'dashboard-unit-wrapper'">
<div [className]="'row dashboard-unit'">
- <div class="col-md-6"><h3>{{ unit.unit.description}}</h3></div>
- <div class="col-md-6 text-right">
+ <div class="col-sm-5 col-md-7 col-xl-9"><h3>{{ unit.unit.description}}</h3></div>
+ <div class="col-sm-7 col-md-5 col-xl-3 dashboard-unit-heading">
<p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></p-button>
<div class="dashboard-button-separator"></div>
<p-button icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, unit.unit); menu.toggle($event)"></p-button>
diff --git a/src/app/dashboard/components/sensors/sensors.component.html b/src/app/dashboard/components/sensors/sensors.component.html
index 0b94d5b..2ffae2e 100644
--- a/src/app/dashboard/components/sensors/sensors.component.html
+++ b/src/app/dashboard/components/sensors/sensors.component.html
@@ -1,10 +1,10 @@
<div class="row">
- <div class="col-md-5">
+ <div class="col-sm-7 col-md-8 col-lg-9 col-xl-10">
<div class="dashboard-sensor-heading-wrapper">
<h4>{{ sensor.sensorName }}</h4>
</div>
</div>
- <div class="col-md-7 text-right">
+ <div class="col-sm-5 col-md-4 col-lg-3 col-xl-2 dashboard-sensor-heading">
<button pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unit.unitId, 'sensor', sensor.sensorId]" [queryParams]="{unitName: unit.description}" title="Sensor" icon="pi pi-chart-line"></button>
<ng-container *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1">
<div class="dashboard-button-separator"></div>
diff --git a/src/app/shared/nav-bar/components/nav-bar.component.html b/src/app/shared/nav-bar/components/nav-bar.component.html
index 98e4fd1..23b6266 100644
--- a/src/app/shared/nav-bar/components/nav-bar.component.html
+++ b/src/app/shared/nav-bar/components/nav-bar.component.html
@@ -1,38 +1,39 @@
<div class="navbar-wrapper container-fluid">
- <div class="container">
- <nav class="navbar navbar-expand-lg navbar-light">
+ <h1>SensLog</h1>
+ <nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
+ <span></span>
+ <span></span>
+ <span></span>
</button>
+ <a class="navbar-brand mobile" href="/">
+ <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
+ </a>
<div class="collapse navbar-collapse" id="navbarNav">
- <div class="navbar-collapse collapse">
- <ul class="navbar-nav left">
- <li class="nav-item">
- <a class="nav-link" [routerLink]="['/dashboard']"><h2>Dashboard</h2></a>
- </li>
- <li *ngIf="loggedUser?.userInfo?.rightsId == 0" class="nav-item">
- <a class="nav-link" (click)="addUser()"><h2><i class="fas fa-user-plus"></i> Add user</h2></a>
- </li>
- <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
- <a class="nav-link" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i> Add unit</h2></a>
- </li>
- </ul>
- <a class="navbar-brand" href="/">
- <h1>SensLog</h1>
- <img class="navbar-logo" src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
- </a>
- <ul class="navbar-nav right">
- <li class="nav-item">
- <h2 class="nav-link"><i class="fas fa-user"></i> <strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
- </li>
- <li class="nav-item">
- <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i> Logout</h2></a>
- </li>
- </ul>
- </div>
+ <ul class="navbar-nav left">
+ <li class="nav-item">
+ <a class="nav-link" [routerLink]="['/dashboard']"><h2>Dashboard</h2></a>
+ </li>
+ <li *ngIf="loggedUser?.userInfo?.rightsId == 0" class="nav-item">
+ <a class="nav-link" (click)="addUser()"><h2><i class="fas fa-user-plus"></i> Add user</h2></a>
+ </li>
+ <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
+ <a class="nav-link" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i> Add unit</h2></a>
+ </li>
+ </ul>
+ <a class="navbar-brand desktop" href="/">
+ <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
+ </a>
+ <ul class="navbar-nav right">
+ <li class="nav-item nav-link-user">
+ <h2><i class="fas fa-user"></i> <strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
+ </li>
+ <li class="nav-item">
+ <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i> Logout</h2></a>
+ </li>
+ </ul>
</div>
</nav>
- </div>
</div>
<app-user-insert-popup *ngIf="showAddUserPopup" [(isVisible)]="showAddUserPopup"></app-user-insert-popup>
diff --git a/src/assets/scss/_dashboard.scss b/src/assets/scss/_dashboard.scss
index 2da4c19..27a4415 100644
--- a/src/assets/scss/_dashboard.scss
+++ b/src/assets/scss/_dashboard.scss
@@ -6,16 +6,40 @@
align-items: center;
}
+.dashboard-unit-heading {
+ text-align: right;
+
+ @include media-breakpoint-down(xs) {
+ text-align: center;
+ }
+}
+
.dashboard {
padding: $grid-gutter-width 0;
h3 {
margin: 0;
font-weight: $font-weight-bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @include media-breakpoint-down(sm) {
+ max-width: 260px;
+ font-size: 16px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ margin-bottom: 10px;
+ }
}
h4 {
margin: 0;
+
+ @include media-breakpoint-down(xs) {
+ margin-bottom: 10px;
+ }
}
.p-accordion {
@@ -80,6 +104,14 @@
height: 100%
}
+.dashboard-sensor-heading {
+ text-align: right;
+
+ @include media-breakpoint-down(xs) {
+ text-align: center;
+ }
+}
+
.dashboard-button-separator {
display: inline-flex;
align-items: center;
diff --git a/src/assets/scss/_login.scss b/src/assets/scss/_login.scss
index fcc5c95..e71c23c 100644
--- a/src/assets/scss/_login.scss
+++ b/src/assets/scss/_login.scss
@@ -24,6 +24,10 @@
background: $primary;
border: 2px solid $primary;
+ @include media-breakpoint-down(xs) {
+ @include size(auto,350px);
+ }
+
.form-control {
border-color: #F2F2F2;
background-color: #F2F2F2;
@@ -58,6 +62,10 @@
img {
width: 300px;
+
+ @include media-breakpoint-down(xs) {
+ width: 280px;
+ }
}
}
@@ -72,6 +80,7 @@
position: absolute;
bottom: 0;
width: 100%;
+ margin-top: 50px;
text-align: center;
color: $white;
background: $primary;
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
index 713130d..2eb8a00 100644
--- a/src/assets/scss/_navbar.scss
+++ b/src/assets/scss/_navbar.scss
@@ -1,8 +1,10 @@
.navbar-wrapper {
height: 90px;
+ border-bottom: 1px solid $primary;
background: #F2F2F2;
h1 {
+ margin: 0;
font-size: 0;
}
@@ -11,16 +13,37 @@
color: #0B1226;
text-transform: uppercase;
font-size: 18px;
+
+ @include media-breakpoint-down(lg) {
+ margin: 0 3px;
+ font-size: 15px;
+ }
+
+ @include media-breakpoint-down(md) {
+ font-size: 18px;
+ }
}
+}
+
+.navbar {
+ position: relative;
+ height: 100%;
+ background: #F2F2F2;
- .navbar {
- background: #F2F2F2;
+ button {
+ outline: none;
+ border: 0;
}
}
.navbar-nav {
width: 40%;
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ text-align: center;
+ }
+
&.right {
justify-content: flex-end;
}
@@ -30,14 +53,129 @@
}
}
+.nav-link {
+ cursor: pointer;
+}
+
.navbar-brand {
- margin-right: 0;
+ margin: 0;
+
+ img {
+ width: 200px;
+
+ @include media-breakpoint-down(xs) {
+ width: 150px;
+ }
+ }
+
+ &.mobile {
+ @include media-breakpoint-up(lg) {
+ display: none;
+ }
+
+ @include media-breakpoint-down(md) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ }
+ }
+ &.desktop {
+ @include media-breakpoint-down(md) {
+ display: none;
+ }
+ }
}
-.navbar-logo {
- width: 200px;
+.navbar-toggler {
+ position: absolute;
+ top: 50%;
+ right: $grid-gutter-width / 2;
+ width: 60px;
+ height: 45px;
+ z-index: 1;
+ transform: translateY(-50%);
+
+ span {
+ display: block;
+ position: absolute;
+ height: 5px;
+ width: 100%;
+ background: $primary;
+ border-radius: 9px;
+ opacity: 1;
+ left: 0;
+ transition: .25s ease-in-out;
+ z-index: 2;
+
+ &:nth-child(1) {
+ top: 0;
+ }
+ &:nth-child(2) {
+ top: 18px;
+ }
+ &:nth-child(3) {
+ top: 36px;
+ }
+ }
}
-.nav-link {
- cursor: pointer;
+.navbar-toggler.open {
+ span {
+ &:nth-child(1) {
+ top: 18px;
+ transform: rotate(135deg);
+ }
+ &:nth-child(2) {
+ opacity: 0;
+ left: -60px;
+ }
+ &:nth-child(3) {
+ top: 18px;
+ transform: rotate(-135deg);
+ }
+ }
+}
+
+.navbar-collapse {
+ padding-bottom: 1px;
+ justify-content: space-between;
+ transition-duration: 0.2s;
+
+ @include media-breakpoint-down(md) {
+ position: absolute;
+ left: -($grid-gutter-width / 2);
+ top: 90px;
+ width: calc(100% + 20px);
+ background: $primary;
+ z-index: 2;
+
+ .nav-link h2 {
+ margin: 12px 0;
+ color: #F2F2F2;
+ }
+ }
+}
+
+.nav-link-user {
+ display: flex;
+ align-items: center;
+ cursor: default;
+
+ @include media-breakpoint-down(md) {
+ justify-content: center;
+ }
+
+ h2 {
+ color: $secondary;
+
+ @include media-breakpoint-down(md) {
+ margin: 12px 0;
+ color: #F2F2F2;
+ }
+ }
+
+ @include hover_focus() {
+ color: $secondary;
+ }
}
diff --git a/src/index.html b/src/index.html
index 3a46cfe..b5d6ec0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,5 +11,6 @@
</head>
<body>
<app-root></app-root>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
--
GitLab
From c5edcbf5ce82c23d0a8493105e461470d96c27bf Mon Sep 17 00:00:00 2001
From: "lmoucka@students.zcu.cz" <AccessGitLm21895.199521>
Date: Tue, 18 May 2021 22:12:09 +0200
Subject: [PATCH 2/2] =?UTF-8?q?Re=20#8875=20-=20Stylov=C3=A1n=C3=AD=20sekc?=
=?UTF-8?q?e=20s=20grafy=20+=20Add=20styles=20for=20charts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/dashboard.component.html | 2 +-
.../position-insert-popup.component.html | 12 +-
.../sensor/components/sensor.component.html | 47 ++++----
.../nav-bar/components/nav-bar.component.html | 6 +-
src/app/unit/components/unit.component.html | 42 ++++---
src/assets/scss/_graph.scss | 108 +++++++++++++-----
src/assets/scss/_navbar.scss | 5 +
7 files changed, 143 insertions(+), 79 deletions(-)
diff --git a/src/app/dashboard/components/dashboard.component.html b/src/app/dashboard/components/dashboard.component.html
index 921a0f0..22d969d 100644
--- a/src/app/dashboard/components/dashboard.component.html
+++ b/src/app/dashboard/components/dashboard.component.html
@@ -31,4 +31,4 @@
<app-position-insert-popup *ngIf="showInsertPositionPopup" [unitId]="editedUnit.unitId" [(isVisible)]="showInsertPositionPopup"></app-position-insert-popup>
-<p-confirmDialog [style]="{width: '50vw'}" key="positionDialog" [position]="position" [baseZIndex]="10000" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
+<p-confirmDialog [style]="{width: '50vw'}" key="positionDialog" [position]="position" [baseZIndex]="10000" rejectButtonStyleClass="p-button" [className]="'popup-form'"></p-confirmDialog>
diff --git a/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html b/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
index 5dc1643..eecc160 100644
--- a/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
+++ b/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
@@ -1,10 +1,10 @@
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add position to unit!" [style]="{width: '50vw'}"
- [baseZIndex]="10000" (onShow)="clearFormArray()">
+ [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
<form [formGroup]="insertForm">
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text">Latitude</span>
+ <span class="input-group-text"><i class="fas fa-globe"></i></span>
</div>
<input type="number" formControlName="lat" class="form-control" id="lat"
placeholder="Latitude WGS-84 coordinates" step="0.0001" min="-90" max="90"/>
@@ -27,7 +27,7 @@
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text">Longitude</span>
+ <span class="input-group-text"><i class="fas fa-globe"></i></span>
</div>
<input type="number" formControlName="lon" class="form-control" id="lon"
placeholder="Longitude WGS-84 coordinates" step="0.0001" min="-180" max="180"/>
@@ -51,21 +51,21 @@
<hr>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text">Altitude</span>
+ <span class="input-group-text"><i class="fas fa-calculator"></i></span>
</div>
<input type="number" formControlName="alt" class="form-control" id="alt"
placeholder="Altitude in meters"/>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text">Speed</span>
+ <span class="input-group-text"><i class="fas fa-calculator"></i></span>
</div>
<input type="number" formControlName="speed" class="form-control" id="speed"
placeholder="Speed of the unit"/>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text">Dilution</span>
+ <span class="input-group-text"><i class="fas fa-tint"></i></span>
</div>
<input type="number" formControlName="dop" class="form-control" id="dop"
placeholder="Dilution of precision"/>
diff --git a/src/app/sensor/components/sensor.component.html b/src/app/sensor/components/sensor.component.html
index 7660c3f..87770e6 100644
--- a/src/app/sensor/components/sensor.component.html
+++ b/src/app/sensor/components/sensor.component.html
@@ -1,50 +1,53 @@
<app-nav-bar></app-nav-bar>
<div class="container graph">
- <div class="row-2">
- <div class="col-xs-3">
- <h5><span class="text-color-sensor-unit">Unit name: <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a></span></h5>
+ <div class="row graph-desc">
+ <div class="col">
+ <span class="graph-attr-heading">Unit name: </span>
+ <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a>
</div>
- <div class="col-xs-3">
- <h5><span class="text-color-sensor-unit">Sensor id: {{sensor?.sensorId}}</span></h5>
+ <div class="col-12">
+ <span class="graph-attr-heading">Sensor id: </span>
+ {{sensor?.sensorId}}
</div>
- <div class="col-xs-3">
- <h5><span class="text-color-sensor-unit">Sensor name: {{sensor?.sensorName}}</span></h5>
+ <div class="col-12">
+ <span class="graph-attr-heading">Sensor name: </span>
+ {{sensor?.sensorName}}
</div>
- <div class="col-xs-3">
- <h5><span class="text-color-sensor-unit">Sensor type: {{sensor?.sensorType}}</span></h5>
+ <div class="col-12">
+ <span class="graph-attr-heading">Sensor type: </span>
+ {{sensor?.sensorType}}
</div>
- <div class="col-xs-3">
- <h5><span class="text-color-sensor-unit">Phenomenon: {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})</span></h5>
+ <div class="col-12">
+ <span class="graph-attr-heading">Phenomenon: </span>
+ {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})
</div>
</div>
- <div class="row">
- <div class="col-xs-3">
+ <div class="row graph-range-dates">
+ <div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>From</span>
+ <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
</div>
<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
</div>
</div>
- <div class="col-1"></div>
- <div class="col-xs-3">
+ <div class="graph-range-dates-separator"></div>
+ <div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>To</span>
+ <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
</div>
<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
</div>
</div>
- <div class="col-1"></div>
- <div class="col-xs-3">
+ <div>
<div class="input-group form-group">
<p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
</div>
</div>
- <div class="col-1"></div>
- <div class="col-xs-3">
- <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button-success" (click)="showGraph()"></p-button>
+ <div>
+ <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-chart-line" styleClass="p-button" (click)="showGraph()"></p-button>
</div>
</div>
<div class="row">
diff --git a/src/app/shared/nav-bar/components/nav-bar.component.html b/src/app/shared/nav-bar/components/nav-bar.component.html
index 23b6266..0f9346d 100644
--- a/src/app/shared/nav-bar/components/nav-bar.component.html
+++ b/src/app/shared/nav-bar/components/nav-bar.component.html
@@ -1,6 +1,7 @@
<div class="navbar-wrapper container-fluid">
- <h1>SensLog</h1>
- <nav class="navbar navbar-expand-lg navbar-light">
+ <div class="container">
+ <h1>SensLog</h1>
+ <nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
@@ -34,6 +35,7 @@
</ul>
</div>
</nav>
+ </div>
</div>
<app-user-insert-popup *ngIf="showAddUserPopup" [(isVisible)]="showAddUserPopup"></app-user-insert-popup>
diff --git a/src/app/unit/components/unit.component.html b/src/app/unit/components/unit.component.html
index cf66329..cdbe3cb 100644
--- a/src/app/unit/components/unit.component.html
+++ b/src/app/unit/components/unit.component.html
@@ -1,47 +1,53 @@
<app-nav-bar></app-nav-bar>
-<div class="container">
- <div class="row-2">
- <h5><span class="text-color-sensor-unit">Unit description: {{unitDescription}}</span></h5>
+<div class="container graph">
+ <div class="row graph-desc">
+ <div class="col-12">
+ <span class="graph-attr-heading">Unit description: </span>
+ {{unitDescription}}
+ </div>
</div>
- <div class="row">
- <div class="col">
+ <div class="row graph-range-dates">
+ <div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>From</span>
+ <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
</div>
<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
</div>
</div>
- <div class="col">
+ <div class="graph-range-dates-separator"></div>
+ <div>
<div class="input-group form-group">
<div class="input-group-prepend">
- <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>To</span>
+ <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
</div>
<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
</div>
</div>
- <div class="col">
+ <div>
<div class="input-group form-group">
<div class="input-group form-group">
<p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
</div>
</div>
</div>
- <div class="col-xs-3">
- <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button-success" (click)="showGraph()"></p-button>
+ <div>
+ <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button" (click)="showGraph()"></p-button>
</div>
</div>
<ng-container *ngFor="let group of sensorGroups">
<div class="row">
- Group of
- <ng-container *ngFor="let sensorType of sensorTypes">
- <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
- {{sensorType.sensorType}}
- </ng-container>
- </ng-container>
- sensors:
+ <div class="graph-group-heading">
+ Group of
+ <ng-container *ngFor="let sensorType of sensorTypes">
+ <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
+ {{sensorType.sensorType}}
+ </ng-container>
+ </ng-container>
+ sensors:
+ </div>
<ng-container *ngFor="let sensor of sensors">
<div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
<p-checkbox name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
diff --git a/src/assets/scss/_graph.scss b/src/assets/scss/_graph.scss
index 0163e87..4760a5c 100644
--- a/src/assets/scss/_graph.scss
+++ b/src/assets/scss/_graph.scss
@@ -1,54 +1,102 @@
.graph {
- margin-top: 15px;
+ margin-top: $grid-gutter-width;
- p-calendar {
- background-color: #F2F2F2 !important;
- color: #0B1226 !important;
+ .p-inputtext {
+ border-color: $primary;
+ color: #0B1226;
+ background: $white;
}
- input {
- background-color: #F2F2F2;
- color: #0B1226;
+ .input-group {
+ margin: 0;
}
- li {
- background-color: #F2F2F2;
- color: #0B1226;
+ .input-group-text {
+ border: 1px solid $primary;
+ background: $primary;
+
+ i {
+ color: #F2F2F2;
+ }
}
- p-calendar {
- color: #0B1226 !important;
+ .p-calendar .p-datepicker {
+ background: $primary;
+
+ .p-datepicker-header {
+ background: $primary;
+ }
}
- p-listbox {
- background-color: #BCBCBC;
+ .p-listbox {
+ margin: 0 $grid-gutter-width;
+ border-color: $primary;
+ background: $white;
- .ng-star-inserted {
+ .p-listbox-item {
color: #0B1226;
+
+ &:not(.p-highlight):not(.p-disabled) {
+ @include hover-focus() {
+ color: $white;
+ background: $primary;
+ }
+ }
+
+ &.p-highlight {
+ color: $white;
+ background: $primary;
+ }
}
}
- .text-color-sensor-unit {
- color: #0B1226;
+ .p-field-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ label {
+ margin: 5px 0;
+ }
}
- .text-color-date {
- color: #0B1226;
+ .p-checkbox{
+ margin: 0 7px;
}
- .background-date-color {
- background-color: #6c757d !important;
+ .p-checkbox-box {
+ background: #F2F2F2;
}
+}
- .p-listbox-list-wrapper{
- background-color: #F2F2F2;
- }
+.graph-desc {
+ padding: 10px;
+ font-size: $h3-font-size;
+ background: #F2F2F2;
+}
- .p-highlight {
- background-color: #6c757d !important;
- }
+.graph-attr-heading {
+ font-weight: $font-weight-bold;
+ text-transform: uppercase;
+}
- .input-group-prepend {
- padding-left: 10px;
- }
+.graph-range-dates {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-top: $grid-gutter-width;
+ margin-bottom: $grid-gutter-width;
+ padding: 10px $grid-gutter-width;
+ background: #F2F2F2;
+}
+
+.graph-range-dates-separator {
+ @include size(10px,2px);
+ margin: 0 10px;
+ background: #0B1226;
+}
+
+.graph-group-heading {
+ font-weight: $font-weight-bold;
+ line-height: 2;
}
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
index 2eb8a00..1fbabd8 100644
--- a/src/assets/scss/_navbar.scss
+++ b/src/assets/scss/_navbar.scss
@@ -23,6 +23,11 @@
font-size: 18px;
}
}
+
+ .container {
+ padding: 0;
+ height: 100%;
+ }
}
.navbar {
--
GitLab