added material design

master
Max 5 years ago
parent 62d8d0a1d9
commit 08aace9e0d

@ -27,6 +27,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"src/styles/greenvironment-material-theme.scss",
"src/styles.sass" "src/styles.sass"
], ],
"scripts": [] "scripts": []
@ -83,6 +84,7 @@
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js", "karmaConfig": "src/karma.conf.js",
"styles": [ "styles": [
"src/styles/greenvironment-material-theme.scss",
"src/styles.sass" "src/styles.sass"
], ],
"scripts": [], "scripts": [],

8350
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -11,17 +11,18 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular-devkit/build-angular": "^0.13.0", "@angular/animations": "^8.2.14",
"@angular/animations": "~7.0.0", "@angular/cdk": "8.2.3",
"@angular/cdk": "^7.0.3", "@angular/common": "~8.2.14",
"@angular/common": "~7.0.0", "@angular/compiler": "~8.2.14",
"@angular/compiler": "~7.0.0", "@angular/core": "^8.2.14",
"@angular/core": "^7.0.4", "@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~7.0.0", "@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0", "@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0", "@angular/material": "^8.2.3",
"@angular/platform-browser-dynamic": "~7.0.0", "@angular/platform-browser": "8.2.14",
"@angular/router": "~7.0.0", "@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "~8.2.14",
"apollo-angular": "^1.7.0", "apollo-angular": "^1.7.0",
"apollo-angular-link-http": "^1.6.0", "apollo-angular-link-http": "^1.6.0",
"apollo-cache-inmemory": "^1.3.2", "apollo-cache-inmemory": "^1.3.2",
@ -30,15 +31,18 @@
"core-js": "^2.5.4", "core-js": "^2.5.4",
"graphql": "^14.3.1", "graphql": "^14.3.1",
"graphql-tag": "^2.10.0", "graphql-tag": "^2.10.0",
"hammerjs": "^2.0.8",
"js-sha512": "^0.8.0", "js-sha512": "^0.8.0",
"ngx-socket-io": "^2.0.0", "ngx-socket-io": "^2.0.0",
"node-sass": "^4.13.0",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"ts-md5": "^1.2.7", "ts-md5": "^1.2.7",
"zone.js": "~0.8.26" "zone.js": "~0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "~7.0.4", "@angular-devkit/build-angular": "^0.803.20",
"@angular/compiler-cli": "~7.0.0", "@angular/cli": "^8.3.20",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "~7.0.0", "@angular/language-service": "~7.0.0",
"@types/jasmine": "~2.8.8", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
@ -46,7 +50,7 @@
"codelyzer": "~4.5.0", "codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0", "karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0", "karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1", "karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2", "karma-jasmine": "~1.1.2",
@ -54,6 +58,6 @@
"protractor": "~5.4.0", "protractor": "~5.4.0",
"ts-node": "~7.0.0", "ts-node": "~7.0.0",
"tslint": "~5.11.0", "tslint": "~5.11.0",
"typescript": "~3.1.1" "typescript": "~3.5.0"
} }
} }

@ -1,2 +1 @@
<app-scaffold id="headerbar"></app-scaffold> <app-main-navigation></app-main-navigation>
<router-outlet></router-outlet>

@ -1,11 +1,9 @@
@import '../styles/mixins.sass' @import '../styles/mixins.sass'
@import '../styles/vars.sass' @import '../styles/vars.sass'
/*
#content html, body
grid-template: 7.5% 92.5% / 25% 50% 25% margin: 0
display: grid height: 100%
min-height: 100vh
max-height: 100vh*/
#imprint #imprint
background-color: $cSecondaryBackground background-color: $cSecondaryBackground
@ -21,25 +19,5 @@
min-height: 100vh min-height: 100vh
max-height: 100vh max-height: 100vh
#login
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
#register
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
#headerbar
height: 10vh
@include gridPosition(1, 1, 1, 4)
display: grid
grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
background-color: $cHeadPrimaryBackground
color: $cHeadFontColor

@ -9,6 +9,7 @@ import { SelfService } from './services/selfservice/self.service';
styleUrls: ['./app.component.sass'] styleUrls: ['./app.component.sass']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
constructor(private data: DatasharingService, private selfservice: SelfService) { } constructor(private data: DatasharingService, private selfservice: SelfService) { }
userInfo: User userInfo: User
@ -37,4 +38,5 @@ export class AppComponent implements OnInit {
this.selfservice.checkIfLoggedIn(); this.selfservice.checkIfLoggedIn();
} }
} }
} }

@ -26,6 +26,25 @@ import { ProfileComponent } from './components/profile/profile.component';
import { ImprintComponent } from './components/imprint/imprint.component'; import { ImprintComponent } from './components/imprint/imprint.component';
import { AboutComponent } from './components/about/about.component'; import { AboutComponent } from './components/about/about.component';
import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component'; import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ReactiveFormsModule} from '@angular/forms';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatTabsModule} from '@angular/material/tabs';
import {MatCardModule} from '@angular/material/card';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -58,7 +77,8 @@ const appRoutes: Routes = [
PostlistComponent, PostlistComponent,
ImprintComponent, ImprintComponent,
AboutComponent, AboutComponent,
ProfileComponent ProfileComponent,
MainNavigationComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -69,7 +89,22 @@ const appRoutes: Routes = [
HttpClientModule, HttpClientModule,
RouterModule.forRoot( RouterModule.forRoot(
appRoutes appRoutes
) ),
MatIconModule,
BrowserAnimationsModule,
MatSliderModule,
MatFormFieldModule ,
MatInputModule,
ReactiveFormsModule,
MatToolbarModule,
MatSidenavModule,
FlexLayoutModule,
MatTabsModule,
LayoutModule,
MatButtonModule,
MatListModule,
MatCardModule,
MatButtonToggleModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

@ -1,13 +1,33 @@
<div id="postinput"> <!--<div id="postinput">
<textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea> <textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
<button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button> <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
<button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button> <button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
</div>-->
<div id="home">
<mat-card style="text-align: center;">
<mat-card-content>
<mat-form-field id="input">
<textarea matInput #content type="text" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<button mat-button matSuffix mat-icon-button (click)="value=''">
<mat-icon>add</mat-icon>
</button>
<button mat-button matSuffix mat-icon-button (click)=createPost(content)>
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
</mat-card-content>
</mat-card>
<div id="chooser-div" style="text-align: center; margin-top: 1em;">
<mat-button-toggle-group id="feedchooser" value="new">
<mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>
<mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle>
</mat-button-toggle-group>
</div> </div>
<div id='completeFeed'> <div id="complete-feed">
<div id='feedchooser'> <!--<div id='feedchooser'>
<button id="new" (click)="showNew()">New</button> <button id="new" (click)="showNew()">New</button>
<button id='mostliked' (click)="showMostLiked()">Most Liked</button> <button id='mostliked' (click)="showMostLiked()">Most Liked</button>
</div> </div>-->
<div id="feedlist"> <div id="feedlist">
<div *ngIf = "viewNew"> <div *ngIf = "viewNew">
<feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist> <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
@ -17,3 +37,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>

@ -1,82 +1,23 @@
@import '../../../styles/mixins.sass' @import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
#postinput #home
@include gridPosition(1, 2, 1, 2) width: 100%
margin: 0.5em height: 100%
display: grid
grid-template: 100% /80% 10% 10%
#input
@include gridPosition(1, 2, 1, 2)
border-radius: 0.5em
padding: 0.125em
resize: none
#attach
@include gridPosition(1, 2, 2, 3)
#submit
@include gridPosition(1, 2, 3, 4)
button
background-color: $cFeedChooserBackground
color: $cFontWhite
border: none
border-radius: 0.5em
button:hover
background-color: lighten($cFeedChooserBackground, 10%)
cursor: pointer
#completeFeed
@include gridPosition(2, 3, 1, 2)
display: grid
grid-template: 5% 95% /100%
overflow: auto
background-color: $cFontWhite
#feedchooser #complete-feed
@include gridPosition(1, 2, 1, 2) box-sizing: border-box
display: grid display: flex
grid-template: 100% /50% 50% width: 100%
background-color: $cFontWhite padding: 0.5em
padding: 0
margin: 0
button
background-color: $cFeedChooserBackground
border: none
font-size: 1.5em
color: $cFontWhite
border-radius: 0.5em
button:hover
background-color: lighten($cFeedChooserBackground, 10%)
cursor: pointer
#new
@include gridPosition(1, 2, 1, 2)
#mostliked
@include gridPosition(1, 2, 2, 3)
#feedlist #feedlist
@include gridPosition(2, 3, 1, 2)
overflow: auto
width: 100% width: 100%
height: 100%
.feeditemPicture #input
background-color: $cFeedItemBackground box-sizing: border-box
min-height: 2em width: 100%
margin: 0.5em padding-left: 0.5em
padding: 0.25em padding-right: 0.5em
border-radius: 0.25em
.itemhead
align-items: flex-start
.title, .handle, .date
margin: 0.125em
.title
font-weight: bold
.handle, .date
color: $cInactiveText
.handle a
text-decoration: none
color: $cInactiveText
font-style: normal
.handle a:hover
text-decoration: underline

@ -1,4 +1,4 @@
<div class="feeditem" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost"> <!--<div class="feeditem" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost">
<div class="itemhead"> <div class="itemhead">
<div class="usertag"> <div class="usertag">
<span class="title">{{post.author.name}}</span> <span class="title">{{post.author.name}}</span>
@ -17,4 +17,27 @@
<span id="upvotes">{{post.upvotes}}</span> <span id="upvotes">{{post.upvotes}}</span>
</div> </div>
</div> </div>
</div> </div>-->
<mat-card class="post" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
<mat-card-header>
<!-- <div mat-card-avatar class="example-header-image"></div> -->
<mat-card-title>
{{post.author.name}}
<a mat-button class="handle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>
</mat-card-title>
<mat-card-subtitle>
<p>{{post.date}}</p>
</mat-card-subtitle>
</mat-card-header>
<!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
<mat-card-content>
<p [innerHTML]="post.htmlContent"></p>
</mat-card-content>
<mat-card-actions>
<button mat-button><mat-icon aria-hidden="false" aria-label="Example home icon">keyboard_arrow_up</mat-icon></button>
{{post.upvotes}}
<button mat-button><mat-icon aria-hidden="false" aria-label="Example home icon">keyboard_arrow_down</mat-icon></button>
{{post.downvotes}}
</mat-card-actions>
</mat-card>

@ -1,67 +1,13 @@
@import '../../../../styles/mixins.sass' @import '../../../../styles/mixins.sass'
@import '../../../../styles/vars.sass' @import '../../../../styles/vars.sass'
.feeditem .post
background-color: $cFeedItemBackground box-sizing: border-box
min-height: 2em width: 100%
//max-heigth: 5em margin-top: 0.5em
margin: 0.5em
padding: 0.25em
border-radius: 0.25em ::ng-deep .mat-card-header-text
margin: 0px
.itemhead
display: grid
grid-template: 100% /70% 30%
.usertag
@include gridPosition(1, 2, 1, 2)
.title, .handle, .date
margin: 0.125em
.title
font-weight: bold
.date
@include gridPosition(1, 2, 2, 3)
text-align: right
.handle, .date
color: $cInactiveText
.handle a
text-decoration: none
color: $cInactiveText
font-style: normal
.handle a:hover
text-decoration: underline
.itembody
display: grid
grid-template: 100% /85% 15%
.text
@include gridPosition(1, 2, 1, 2)
overflow-x: hidden
::ng-deep img
max-width: 100%
height: auto
.vote
@include gridPosition(1, 2, 2, 3)
display: grid
grid-template: 70% 30% /50% 50%
height: 3em
button
background-color: $cFeedItemBackground
border: none
button:hover
cursor: pointer
#up
@include gridPosition(1, 2, 2, 3)
color: $cFeedUpVote
#up:hover
color: darken($cFeedUpVote, 10%)
#down
@include gridPosition(1, 2, 1, 2)
color: $cFeedDownVote
#down:hover
color: darken($cFeedDownVote, 10%)
#downvotes
@include gridPosition(2, 3, 1, 2)
text-align: center
#upvotes
@include gridPosition(2, 3, 2, 3)
text-align: center

@ -1,5 +1,36 @@
<div id="content"> <div id="content" fxShow="true" fxHide.lt-md="true">
<home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager> <home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
<home-feed id="feedcontainer"></home-feed> <home-feed id="feedcontainer"></home-feed>
<home-social id="socialcontainer" *ngIf="loggedIn"></home-social> <home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
</div> </div>
<!--
<mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">
<mat-tab label="First"> <home-chatmanager ></home-chatmanager></mat-tab>
<mat-tab label="Second"><home-feed id="feed"></home-feed></mat-tab>
<mat-tab label="Third"> <home-social ></home-social></mat-tab>
</mat-tab-group>
-->
<div class="bottom-menu" fxShow="true" fxHide.gt-sm="true">
<mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below">
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<home-chatmanager class="tab-content"></home-chatmanager>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>home</mat-icon>
</ng-template>
<home-feed class="tab-content"></home-feed>
</mat-tab>
<mat-tab >
<ng-template mat-tab-label>
<mat-icon>people</mat-icon>
</ng-template>
<home-social class="tab-content"></home-social>
</mat-tab>
</mat-tab-group>
</div>

@ -6,7 +6,6 @@
display: grid display: grid
min-height: 90vh min-height: 90vh
max-height: 90vh max-height: 90vh
background-color: $cFontWhite
#chatcontainer #chatcontainer
@include gridPosition(1, 3, 1, 2) @include gridPosition(1, 3, 1, 2)
@ -17,7 +16,6 @@
@include gridPosition(1, 3, 2, 3) @include gridPosition(1, 3, 2, 3)
display: grid display: grid
grid-template: 10% 90% /100% grid-template: 10% 90% /100%
background-color: $cFontWhite
overflow: auto overflow: auto
#socialcontainer #socialcontainer
@ -26,3 +24,28 @@
grid-template: 50% 50% /100% grid-template: 50% 50% /100%
background-color: $cBoxBodyBackground background-color: $cBoxBodyBackground
overflow: auto overflow: auto
.mat-toolbar.mat-primary
width: 100%
position: sticky
top: 0
z-index: 1
/deep/ .mat-tab-body-wrapper
height: 100%
.bottom-menu
position: fixed
width: 100%
height: calc(100% - 56px)
#tab-group
height: 100%
.tab-content
height: 50%
width: 100%

@ -1,22 +1,24 @@
<div id="login"> <div id="login">
<div id="logincontainer"> <mat-card style="text-align: center;" >
<h1>Login</h1> <mat-card-title>
<table style="width:100%" (keyup.enter)="onClickSubmit(email.value,password.value)"> Login
<tr> </mat-card-title>
<td>email: </td> <mat-card-content>
<td><input #email type="text" name="email"><br></td> <div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)">
</tr> <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
<tr> <mat-form-field>
<td>password:</td> <input matInput placeholder="Enter your email" #email >
<td> <input #password type="password" name="password"><br></td> </mat-form-field>
</tr> <mat-form-field>
</table> <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password>
<button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button> <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<p *ngIf="errorOccurred">{{errorMessage}}</p> <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<br> </button>
<br> </mat-form-field>
<a href="/register">You aren't part of greenvironment yet? - join us here</a>
</div> </div>
<button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button>
<p>You aren't part of greenvironment yet?</p>
<a mat-stroked-button color="primary" routerLink="/register">Register</a>
</mat-card-content>
</mat-card>
</div> </div>

@ -2,21 +2,40 @@
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
#login #login
background-color: $cSecondaryBackground padding: 2em
grid-template: 8% 77% 15% / 15% 70% 15% max-width: 35em
display: grid margin: 0 auto
height: 90vh
.example-container
#logincontainer display: flex
@include gridPosition(2, 2,2,2) flex-direction: column
background-color: $cPrimaryBackground
padding: 1em .example-container > *
overflow: auto width: 100%
input .example-right-align
text-align: right
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button
display: none
input.example-right-align
-moz-appearance: textfield
.mat-error
margin-bottom: 0.25em
.mat-raised-button
margin: 0.25em
width: 100%
.mat-button
margin: 0.25em margin: 0.25em
a .mat-stroked-button
color: $cHeadPrimaryBackground width: 100%

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
import { Login } from 'src/app/models/login'; import { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service'; import { LoginService } from 'src/app/services/login/login.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
@ -11,6 +12,7 @@ import * as sha512 from 'js-sha512';
}) })
export class LoginComponent implements OnInit { export class LoginComponent implements OnInit {
login: Login login: Login
hide = true;
errorOccurred: boolean = false; errorOccurred: boolean = false;
errorMessage: string; errorMessage: string;
@ -18,6 +20,10 @@ export class LoginComponent implements OnInit {
this.login = {passwordHash: null, email: null}; this.login = {passwordHash: null, email: null};
} }
public getErrorMessage(){
return this.errorMessage;
}
public loginError(error : any){ public loginError(error : any){
console.log(error.errors[0].message); console.log(error.errors[0].message);
this.errorOccurred = true; this.errorOccurred = true;
@ -36,6 +42,7 @@ export class LoginComponent implements OnInit {
this.loginService.login(this.login, error => this.loginError(error.json())); this.loginService.login(this.login, error => this.loginError(error.json()));
} }
email = new FormControl('', [Validators.required, Validators.email]);
ngOnInit() {} ngOnInit() {}
} }

@ -0,0 +1,37 @@
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav"
fxShow="true" fxHide.gt-sm="true"
fixedInViewport="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item *ngFor="let link of navLinks"
href={{link.path}}>{{link.label}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Greenvironment</span>
<!--The following menu items will be hidden on both SM and XS screen sizes -->
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
(click)="activeLink = link"
routerLinkActive #rla="routerLinkActive"
[active]="activeLink == link">
{{link.label}}
</a>
</nav>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

@ -0,0 +1,27 @@
.sidenav-container
height: 100%
.mat-sidenav-container
height: 100%
.mat-sidenav-content
height: 100vh
.sidenav
width: 200px
.sidenav .mat-toolbar
background: inherit
.mat-toolbar.mat-primary
height: 56px
position: sticky
top: 0
z-index: 1000

@ -0,0 +1,40 @@
import { LayoutModule } from '@angular/cdk/layout';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MainNavigationComponent } from './main-navigation.component';
describe('MainNavigationComponent', () => {
let component: MainNavigationComponent;
let fixture: ComponentFixture<MainNavigationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MainNavigationComponent],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MainNavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
@Component({
selector: 'app-main-navigation',
templateUrl: './main-navigation.component.html',
styleUrls: ['./main-navigation.component.sass']
})
export class MainNavigationComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
navLinks = [
{ path: '', label: 'Home' },
{ path: '/profile/1', label: 'Profile' },
{ path: '/about', label: 'About' },
{ path: '/imprint', label: 'Imprint' },
{ path: '/login', label: 'Login' },
];
}

@ -1,28 +1,33 @@
<div id="register"> <div id="register">
<div id="registercontainer"> <mat-card style="text-align: center;" >
<h1>Register</h1> <mat-card-title>
<table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)"> Register
<tr> </mat-card-title>
<td>username: </td> <mat-card-content>
<td><input #username type="text" name="username" username.value=''><br></td> <div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
</tr> <mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
<tr> <mat-form-field>
<td>email:</td> <input matInput placeholder="Enter your email" #email >
<td><input #email type="text" name="email"><br></td> </mat-form-field>
</tr> <mat-form-field>
<tr> <input matInput placeholder="Enter your username" #username >
<td>password:</td> </mat-form-field>
<td> <input #password type="password" name="password"><br></td> <mat-form-field>
</tr> <input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
<tr> <button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
<td>repeat password:</td> <mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td> </button>
</tr> </mat-form-field>
</table> <mat-form-field>
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button> <input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
<p *ngIf="errorOccurred">{{errorMessage}}</p> <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
<br> <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
<br> </button>
<a href="/login">You are already part of greenvironment? - login</a> </mat-form-field>
</div>
<button mat-raised-button color="primary" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
<p>You are already part of greenvironment?</p>
<a mat-stroked-button color="primary" routerLink="/login">Login</a>
</mat-card-content>
</mat-card>
</div> </div>
</div>

@ -2,20 +2,36 @@
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
#register #register
background-color: $cSecondaryBackground padding: 2em
grid-template: 8% 77% 15% / 15% 70% 15% max-width: 35em
display: grid margin: 0 auto
min-height: 90vh
max-height: 90vh .example-container
display: flex
#registercontainer flex-direction: column
@include gridPosition(2, 2,2,2)
grid-template: 15% 15% 15% 15% 15% 15% / 100% .example-container > *
background-color: $cPrimaryBackground width: 100%
padding: 1em
overflow: auto .example-right-align
input text-align: right
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button
display: none
input.example-right-align
-moz-appearance: textfield
.mat-error
margin-bottom: 0.25em
.mat-raised-button
margin: 0.25em
width: 100%
.mat-button
margin: 0.25em margin: 0.25em
a .mat-stroked-button
color: $cHeadPrimaryBackground width: 100%

@ -15,6 +15,8 @@ export class RegisterComponent implements OnInit {
registration: Registration registration: Registration
errorOccurred: boolean = false; errorOccurred: boolean = false;
errorMessage: string; errorMessage: string;
hide1 = true;
hide2 = true;
constructor(private registerService: RegisterService) { constructor(private registerService: RegisterService) {
this.registration = {username: null, passwordHash: null, email: null}; this.registration = {username: null, passwordHash: null, email: null};

@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/84cf838715.js"></script> <script src="https://kit.fontawesome.com/84cf838715.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

@ -1,3 +1,4 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@ -2,9 +2,8 @@
@import 'styles/vars.sass' @import 'styles/vars.sass'
body body
font-family: Arial, serif font-family: Arial, sans-serif
margin: 0 margin: 0
padding: 0 padding: 0
min-height: 100vh height: 100%
max-height: 100vh

@ -0,0 +1,27 @@
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat-palette($mat-green);
$theme-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($my-theme);

@ -18,9 +18,9 @@ $cFeedUpVote: #2cb149
$cFeedDownVote: #ff5f5f $cFeedDownVote: #ff5f5f
//Home -- Chat, Friends, Groups //Home -- Chat, Friends, Groups
$cFontWhite: #adffc1ee $cFontWhite: #fff//#adffc1ee //this is also the background color lol
$cBoxHeaderBackground: #259145 $cBoxHeaderBackground: #259145
$cBoxBodyBackground: #3deb71 $cBoxBodyBackground: #fff//#3deb71
$cMessageOwn: #cfe4c9 $cMessageOwn: #cfe4c9
$cMessageForeign: #baca5d $cMessageForeign: #baca5d

Loading…
Cancel
Save