From 6b260594e1077031cd690b547f4d7285427a60ee Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 1 Jan 2020 18:19:11 +0100 Subject: [PATCH 1/6] toolbar is really fixed now --- src/app/components/home/home.component.sass | 35 +-- .../main-navigation.component.html | 16 +- .../main-navigation.component.sass | 21 +- .../components/profile/profile.component.html | 200 +++++++++--------- .../components/profile/profile.component.sass | 6 + .../components/search/search.component.sass | 15 +- 6 files changed, 136 insertions(+), 157 deletions(-) diff --git a/src/app/components/home/home.component.sass b/src/app/components/home/home.component.sass index 2ae2205..fb10907 100644 --- a/src/app/components/home/home.component.sass +++ b/src/app/components/home/home.component.sass @@ -1,38 +1,6 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' -#content - position: fixed - width: 100% - height: calc(100% - 56px) - -#chat - box-sizing: content-box - height: 100% - width: 25% - float: left - overflow-y: auto - -#feed - box-sizing: content-box - height: 100% - width: 50% - float: left - overflow-y: auto - -#social - box-sizing: content-box - height: 100% - width: 25% - float: left - overflow-y: auto - -.mat-toolbar.mat-primary - width: 100% - position: sticky - top: 0 - z-index: 1 - /deep/ .mat-tab-body-wrapper height: 100% @@ -45,8 +13,9 @@ height: 100% .tab-content - height: 50% + box-sizing: content-box width: 100% + diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index d9866e1..28c6ce6 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -1,5 +1,7 @@ - - + + + + + + + + Greenvironment - + + + friend requests: + diff --git a/src/app/components/main-navigation/main-navigation.component.sass b/src/app/components/main-navigation/main-navigation.component.sass index b650cc7..4daa65d 100644 --- a/src/app/components/main-navigation/main-navigation.component.sass +++ b/src/app/components/main-navigation/main-navigation.component.sass @@ -1,23 +1,19 @@ -.sidenav-container - height: 100% - .mat-sidenav-container - height: 100% - -.mat-sidenav-content - height: 100vh + margin-top: 56px + height: calc(100vh - 56px) .sidenav width: 200px .sidenav .mat-toolbar - background: inherit + //background: inherit .mat-toolbar.mat-primary height: 56px - position: sticky + position: fixed + //position: sticky top: 0 - z-index: 1000 + z-index: 999 .mat-tab-nav-bar width: 50% height: 56px @@ -35,13 +31,8 @@ /deep/ .mat-tab-link min-width: 5em!important - -#login-button #menu-button-box text-align: right width: 100% - - - diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 267060a..a6fca4f 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -1,105 +1,107 @@ -Profile -
-
-
- - -
- {{user.username}} - {{user.handle}} - - - - -
name:
- - - - -
handle:
- - - - -
profileID:
- - - - -
points:
- - - - -
level:
- - - - -
level name:
- - -
{{user.username}}
{{user.handle}}
{{user.userID}}
{{user.points}}
{{user.level}}
{{rankname}}
- - -
-
-

What does the level mean?

-

There are different levels you can reach through green behaviour. - Collect 100 points to level up! The levels are called: -

- - - - - - - - - - - -
level {{level.level}} level name {{level.name}}
+
+ Profile +
+
+
+ + +
+ {{user.username}} + {{user.handle}} + + + + +
name:
+ + + + +
handle:
+ + + + +
profileID:
+ + + + +
points:
+ + + + +
level:
+ + + + +
level name:
+ + +
{{user.username}}
{{user.handle}}
{{user.userID}}
{{user.points}}
{{user.level}}
{{rankname}}
+ + +

-

How to level up?

-

There is an always growing list of things you can do, - to support your environment - and earn points to level up at the same time. - You can get a different amount of points - for differnet actions you can see in the list below: -

- - - - - - - - +

What does the level mean?

+

There are different levels you can reach through green behaviour. + Collect 100 points to level up! The levels are called: +

+
points {{action.points}}
+ + + + + + + + + + +
level {{level.level}} level name {{level.name}}
+
+

How to level up?

+

There is an always growing list of things you can do, + to support your environment + and earn points to level up at the same time. + You can get a different amount of points + for differnet actions you can see in the list below: +

+ + + + + + + + - - - - - + + + + + - - -
points {{action.points}} action {{action.name}} action {{action.name}}
- + + + + +
+
+

Profile not found :(

-
-

Profile not found :(

-
+
\ No newline at end of file diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index c108503..4d0369e 100644 --- a/src/app/components/profile/profile.component.sass +++ b/src/app/components/profile/profile.component.sass @@ -1,6 +1,12 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' +#profile-page + position: fixed + width: 100% + height: calc(100% - 56px) + overflow: scroll + #profile padding: 2em max-width: 1200px diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass index 2989fc4..a256f6a 100644 --- a/src/app/components/search/search.component.sass +++ b/src/app/components/search/search.component.sass @@ -1,16 +1,17 @@ #search - width: 100% - height: 100% + width: 100% + overflow-x: hidden + height: 100% #input - width: 100% - padding-left: 0.5em - padding-right: 0.5em + width: 100% + padding-left: 0.5em + padding-right: 0.5em #category-chooser - padding-left: 0.5em - padding-right: 0.5em + padding-left: 0.5em + padding-right: 0.5em #friendlist padding: 0.5em From 099e63b7f31ba85a67c63e813213727af575850f Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 1 Jan 2020 18:53:32 +0100 Subject: [PATCH 2/6] added logo --- src/app/app.module.ts | 14 +- .../main-navigation.component.html | 1 + .../main-navigation.component.ts | 2 +- src/app/gv-new-logo-white.svg | 125 + src/app/gv-new-logo.svg | 49316 ++++++++++++++++ src/typings.d.ts | 4 + 6 files changed, 49459 insertions(+), 3 deletions(-) create mode 100644 src/app/gv-new-logo-white.svg create mode 100644 src/app/gv-new-logo.svg create mode 100644 src/typings.d.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8b9d37d..1347c1d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -55,6 +55,11 @@ import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; import {MatSortModule} from '@angular/material/sort'; import { SearchComponent } from './components/search/search.component'; +import {DomSanitizer} from '@angular/platform-browser'; +import {MatIconRegistry} from '@angular/material/icon'; + +// import logo from 'src/assets/gv-new-logo.svg'; +import logo from '!!raw-loader!./gv-new-logo-white.svg'; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; @@ -126,9 +131,14 @@ const appRoutes: Routes = [ MatTableModule, MatSortModule, MatBadgeModule, - MatProgressSpinnerModule + MatProgressSpinnerModule, ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { + constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { + iconRegistry.addSvgIconLiteral( + 'logo', sanitizer.bypassSecurityTrustHtml(logo)); + } + } diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index 28c6ce6..46a667c 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -37,6 +37,7 @@ fxShow="true" fxHide.gt-sm="true"> menu + Greenvironment