From c096a535c6bd6cb746bb0c1e6da5daa5ea54ba45 Mon Sep 17 00:00:00 2001 From: alexevnaa <66200945+alexevnaa@users.noreply.github.com> Date: Mon, 28 Dec 2020 10:33:33 +0300 Subject: [PATCH] #2 Header (#38) --- src/src/app/app.component.css | 5 +-- src/src/app/app.module.ts | 10 ++++++ .../header-panel/header-panel.component.css | 33 +++++++++++++++++++ .../header-panel/header-panel.component.html | 30 ++++++++++++++++- src/src/assets/img/User_avatar.svg | 3 ++ src/src/assets/img/logo.svg | 4 +++ 6 files changed, 82 insertions(+), 3 deletions(-) create mode 100644 src/src/assets/img/User_avatar.svg create mode 100644 src/src/assets/img/logo.svg diff --git a/src/src/app/app.component.css b/src/src/app/app.component.css index c91e197..1c9fed0 100644 --- a/src/src/app/app.component.css +++ b/src/src/app/app.component.css @@ -1,7 +1,8 @@ header { grid-area: header; - background: orange; padding: 10px; + background: white; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); } main { @@ -23,7 +24,7 @@ aside { min-height: 700px; display: grid; grid-gap: 10px; - grid-template: 100px 600px 100px / 200px 1fr 200px; + grid-template: 70px 600px 100px / 200px 1fr 200px; grid-template-areas: 'header header header' 'main main right-sidebar' diff --git a/src/src/app/app.module.ts b/src/src/app/app.module.ts index f585398..426dee4 100644 --- a/src/src/app/app.module.ts +++ b/src/src/app/app.module.ts @@ -10,6 +10,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { environment } from '../environments/environment'; import { MapsModule } from './main/maps.module'; import { GoogleMapConfig } from './main/models/google-map-config'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; @NgModule({ declarations: [ @@ -25,6 +30,11 @@ import { GoogleMapConfig } from './main/models/google-map-config'; MapsModule.forRoot({ googleMapApiKey: environment.googleMapApiKey, }), + MatButtonModule, + MatIconModule, + MatFormFieldModule, + MatInputModule, + MatMenuModule, ], providers: [], bootstrap: [AppComponent] diff --git a/src/src/app/header-panel/header-panel.component.css b/src/src/app/header-panel/header-panel.component.css index e69de29..6807d7a 100644 --- a/src/src/app/header-panel/header-panel.component.css +++ b/src/src/app/header-panel/header-panel.component.css @@ -0,0 +1,33 @@ +.header-container { + height: 100%; + display: flex; + align-items: center; +} + +.header-container-right { + width: 50%; + display: flex; + margin-left: auto; +} + +.header-container-right .mat-button { + margin-right: 15%; +} + +.login-search { + display: flex; + margin-left: auto; + width: 38%; +} + +.login-search .mat-button { + margin-right: 0; +} + +mat-icon, span{ + color: #A4C6CB; +} + +.search-panel { + width: 80%; +} diff --git a/src/src/app/header-panel/header-panel.component.html b/src/src/app/header-panel/header-panel.component.html index 1f8cf24..fa09c02 100644 --- a/src/src/app/header-panel/header-panel.component.html +++ b/src/src/app/header-panel/header-panel.component.html @@ -1 +1,29 @@ -

header-panel works!

+
+ +
+ + + +
+
diff --git a/src/src/assets/img/User_avatar.svg b/src/src/assets/img/User_avatar.svg new file mode 100644 index 0000000..278af60 --- /dev/null +++ b/src/src/assets/img/User_avatar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/src/assets/img/logo.svg b/src/src/assets/img/logo.svg new file mode 100644 index 0000000..108779b --- /dev/null +++ b/src/src/assets/img/logo.svg @@ -0,0 +1,4 @@ + + + +