diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss index e0bd2e2c..9fc5883e 100644 --- a/src/app/@theme/components/header/header.component.scss +++ b/src/app/@theme/components/header/header.component.scss @@ -1,52 +1,34 @@ @import '../../styles/variables'; @include nga-install-component() { - width: 100%; display: flex; justify-content: space-between; + width: 100%; - div { + .left-container { display: flex; align-items: center; - & > * { - height: 100%; - display: flex; - align-items: center; - } - } - - .left { - > * { - padding: 0 1.25rem; - border-right: 1px solid nga-theme(separator); - - &:first-child { - padding-left: 0; - } - - &:last-child { - border: none; - } - } - - .theme-buttons button { - margin-left: 10px; - } - - .control-icon.ion-navicon { + .navigation { + padding-right: nga-theme(padding); font-size: 2.5rem; } .logo { - font-size: 1.7rem; + padding: 0 nga-theme(padding); + font-size: 1.75rem; font-weight: nga-theme(font-weight-bolder); - text-decoration: none; - transition: all 0.2s ease; - cursor: pointer; + border-left: 1px solid nga-theme(separator); - a { - font-weight: normal; + span { + font-weight: nga-theme(font-weight-normal); + } + } + + .theme-buttons { + margin-left: 3rem; + button { + margin-right: 1rem; } } } diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index ea6ef2bf..5c4f4d0c 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -8,9 +8,9 @@ import { UserService } from '../../../@core/data/users.service'; selector: 'ngx-header', styleUrls: ['./header.component.scss'], template: ` -
- - +
+ +
diff --git a/src/app/@theme/styles/global.scss b/src/app/@theme/styles/global.scss index ed52b638..5e1e12ea 100644 --- a/src/app/@theme/styles/global.scss +++ b/src/app/@theme/styles/global.scss @@ -3,21 +3,7 @@ } .nga-theme-cosmic { - // Styles for cards without separator - nga-card nga-card-header + nga-card-body { - padding-top: 0; - } - nga-card nga-card-body + nga-card-footer { - padding-top: 0; - } - // Styles for modals without separator - .modal-content .modal-header + .modal-body { - padding-top: 0; - } - .modal-content .modal-body + .modal-footer { - padding-top: 0; - } } //global styles for the whole application diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 79aa9ed1..600c1866 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -46,7 +46,7 @@
- + Solar Energy Consumption @@ -57,7 +57,7 @@
- + Traffic Consumption diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss index 37eefc04..930e7dd7 100644 --- a/src/app/pages/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/dashboard.component.scss @@ -1,5 +1,18 @@ @import '../../@theme/styles/variables'; @include nga-install-component() { + .solar-card nga-card-header { + border: none; + padding-bottom: 0; + } + .traffic-card { + nga-card-header { + border: none; + } + + nga-card-body { + overflow: hidden; + } + } } diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index 2b206f08..35ae115c 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -39,13 +39,11 @@ ul { align-items: center; padding: 1rem; - border-top: 1px solid nga-theme(separator); - border-bottom: 1px solid nga-theme(separator); } ul li a { font-weight: nga-theme(font-weight-bolder); - padding: 0.5rem 1rem 0.75rem; + padding: 0.75rem 1rem; } ul li.active { diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html index 665606b5..578d2ee3 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html @@ -75,10 +75,10 @@ - + - {{room.name.text}} diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts index 2fe57732..a0a79cd9 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts @@ -56,7 +56,7 @@ export class RoomSelectorComponent { }; constructor() { - this.sortRooms(); + this.selectRoom('2'); } private sortRooms() { @@ -71,7 +71,7 @@ export class RoomSelectorComponent { }); } - roomSelected(roomNumber) { + selectRoom(roomNumber) { this.selectedRoom = roomNumber; this.sortRooms(); } diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html index 904d28cd..249e4326 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.html +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.html @@ -19,23 +19,26 @@
-
- {{ c.title }} +
+ {{ camera.title }}
- - + - + Pause - - - + Log View + + + Search + + + Setup - diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss index a23fd27c..03e6b1f3 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss @@ -1,14 +1,18 @@ @import '../../../@theme/styles/variables'; @include nga-install-component() { - nga-card { - nga-card-header { - padding: 0; - } + nga-card-header { + padding: 0; + border: none; + } - nga-card-body { - padding: 0; - } + nga-card-body { + padding: 0; + } + + nga-card-footer { + padding: 1rem 0; + border: none; } .cameras-card-header { @@ -32,26 +36,34 @@ flex-direction: column; justify-content: center; color: nga-theme(color-fg); - border-left: 1px solid #342e73; + } + + a:first-child { + border-left: 1px solid nga-theme(separator); + } + + a:last-child { + border-top-right-radius: nga-theme(card-border-radius); } a.active { - background-color: #342e73; - color: #00d990; - text-shadow: 0 4px 10px rgba(33, 7, 77, 0.4), 0 0 12px rgba(0, 217, 144, 0.4); + background-color: nga-theme(color-bg-active); + color: nga-theme(color-fg-highlight); + text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4); + border: none; } } .cameras { display: flex; flex-wrap: wrap; + height: 100%; .camera { position: relative; background-position: center; background-size: cover; - // TODO: Use calculated height - height: 278px; + height: 50%; width: 50%; span { @@ -71,7 +83,7 @@ content: ''; position: absolute; width: 100%; - height: 278px; + height: 100%; opacity: 0.2; transition: 0.1s; } @@ -83,14 +95,27 @@ .cameras.single-view { .camera { - // TODO: Use calculated height - height: 556px; + height: 100%; width: 100%; &::before { - // TODO: Use calculated height - height: 556px; + height: 100%; } } } + + nga-action { + i { + color: nga-theme(color-fg); + font-size: 2.5rem; + margin-right: 1rem; + } + + span { + font-family: nga-theme(font-family-secondary); + font-weight: nga-theme(font-weight-bold); + color: nga-theme(color-fg-heading); + text-transform: uppercase; + } + } } diff --git a/src/app/pages/dashboard/solar/solar.component.scss b/src/app/pages/dashboard/solar/solar.component.scss index f3d582fa..6f28d2fb 100644 --- a/src/app/pages/dashboard/solar/solar.component.scss +++ b/src/app/pages/dashboard/solar/solar.component.scss @@ -4,12 +4,6 @@ display: flex; height: 100%; - width: 100%; - - ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line { - display: block; - height: 100%; - } .echart { flex: 1; diff --git a/src/app/pages/dashboard/team/team.component.html b/src/app/pages/dashboard/team/team.component.html index 5cd85c3f..000d701a 100644 --- a/src/app/pages/dashboard/team/team.component.html +++ b/src/app/pages/dashboard/team/team.component.html @@ -1,24 +1,24 @@ - -
- - - + + +
+
+

Akveo Team

-
-
-

Akveo Team

-
-
Design & Development
-
- We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make - your product amazing. -
+
Design & Development
+
+ We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make + your product amazing.
- - +
+ + diff --git a/src/app/pages/dashboard/team/team.component.scss b/src/app/pages/dashboard/team/team.component.scss index 2aacf1e7..6f1f4ea4 100644 --- a/src/app/pages/dashboard/team/team.component.scss +++ b/src/app/pages/dashboard/team/team.component.scss @@ -1,32 +1,31 @@ @import '../../../@theme/styles/variables'; -@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @include nga-install-component() { .team-photo { - background-image: url('./~/assets/images/team.jpg'); + background-image: url('~/assets/images/team.png'); background-position: center; background-size: cover; - // TODO: Use calculated height - height: 200px; position: relative; border-top-left-radius: nga-theme(card-border-radius); border-top-right-radius: nga-theme(card-border-radius); + flex: 1; + max-height: 50%; + .team-link { - border-radius: 50%; - height: 60px; - width: 60px; position: absolute; + height: 4rem; + width: 4rem; bottom: -2rem; right: 1rem; - box-shadow: btn-hero-shadow(); + border-radius: 50%; + box-shadow: 0 4px 10px 0 rgba(nga-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nga-theme(color-fg-highlight), 0.2); } } .team-info { - padding: 2rem 1.5rem; - padding-bottom: 0; + padding: 1.5rem 1.5rem 0; .team-title { color: nga-theme(color-fg-heading); @@ -50,21 +49,17 @@ } } - nga-card > nga-card-body { - padding: 0; - height: 100%; - } - - nga-card > nga-card-footer { + .links { display: flex; justify-content: space-around; + padding: 1rem 0; a { text-decoration: none; color: nga-theme(color-fg); i { - font-size: 2rem; + font-size: 1.75rem; } } } diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss index 154dd5ac..f0747d64 100644 --- a/src/app/pages/dashboard/traffic/traffic.component.scss +++ b/src/app/pages/dashboard/traffic/traffic.component.scss @@ -7,8 +7,9 @@ height: 100%; } - canvas { - border-radius: nga-theme(card-border-radius); + /deep/ canvas { + border-bottom-left-radius: nga-theme(card-border-radius); + border-bottom-right-radius: nga-theme(card-border-radius); } .echart { diff --git a/src/app/pages/ui-features/icons/icons.component.scss b/src/app/pages/ui-features/icons/icons.component.scss index 7c7d07df..43bdd81e 100644 --- a/src/app/pages/ui-features/icons/icons.component.scss +++ b/src/app/pages/ui-features/icons/icons.component.scss @@ -7,12 +7,11 @@ } :host { - nga-card-header, nga-card-body { - padding-bottom: 0; + nga-card-body { + padding: 0; } nga-card-footer { text-align: right; - padding-top: 0; } } diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.html b/src/app/pages/ui-features/search-fields/search-fields.component.html index ed87c39d..db573516 100644 --- a/src/app/pages/ui-features/search-fields/search-fields.component.html +++ b/src/app/pages/ui-features/search-fields/search-fields.component.html @@ -7,7 +7,6 @@ -
@@ -18,7 +17,6 @@ -
@@ -31,7 +29,6 @@ -
@@ -42,7 +39,6 @@ -
@@ -53,7 +49,6 @@ -
@@ -64,7 +59,6 @@ -
@@ -75,7 +69,6 @@ -
@@ -86,7 +79,6 @@ -
diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html index 334682a2..7cf5b2b5 100644 --- a/src/app/pages/ui-features/typography/typography.component.html +++ b/src/app/pages/ui-features/typography/typography.component.html @@ -117,8 +117,7 @@

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. - Separated they live in Bookmarksgrove - right at the coast of the Semantics, a large language ocean. + Separated they live in Bookmarksgrove.

A small river named Duden flows by their place and supplies it with the @@ -140,14 +139,14 @@

-

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

+

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Far far away, behind the word mountains, far from the countries.

Vladimir Lugovsky
-

Far far away, behind the word mountains, far from the countries.

+

Far far away, behind the word mountains.

Vladimir Lugovsky
@@ -164,56 +163,56 @@
-
+
Heading Text
Far far away, behind the your awesomeness.
-
+
Body Text
Far far away, behind the your awesomeness.
-
+
Hint Text
Far far away, behind the your awesomeness.
-
+
Primary Text
Far far away, behind the your awesomeness.
-
+
Link/Hightlight Text
Far far away, behind the your awesomeness.
-
+
Info Text
Far far away, behind the your awesomeness.
-
+
Warning Text
Far far away, behind the your awesomeness.
-
+
Danger Text
Far far away, behind the your awesomeness.
diff --git a/src/app/pages/ui-features/typography/typography.component.scss b/src/app/pages/ui-features/typography/typography.component.scss index ba6771e8..03a77c8f 100644 --- a/src/app/pages/ui-features/typography/typography.component.scss +++ b/src/app/pages/ui-features/typography/typography.component.scss @@ -14,22 +14,31 @@ } .font-row { - margin-bottom: 3rem; + &:first-child { + margin-bottom: 2rem; + } + .header { align-items: baseline; } + + p { + margin: 0; + } } .header { display: flex; align-items: center; - padding-bottom: 1.125rem; - margin-bottom: 1.125rem; - border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1); + padding-bottom: 1rem; + margin-bottom: 1rem; + border-bottom: 1px solid nga-theme(separator); color: nga-theme(color-fg-heading); &:last-child { border-bottom: none; + padding: 0; + margin: 0; } div:first-child { @@ -83,5 +92,9 @@ border-bottom-left-radius: 1rem; margin-right: 1rem; } + + h1, h2, h3, h4, h5, h6 { + margin-bottom: 0.25rem; + } } } diff --git a/src/assets/images/team.jpg b/src/assets/images/team.jpg deleted file mode 100644 index dc265371..00000000 Binary files a/src/assets/images/team.jpg and /dev/null differ diff --git a/src/assets/images/team.png b/src/assets/images/team.png new file mode 100644 index 00000000..17c7d172 Binary files /dev/null and b/src/assets/images/team.png differ