added material design
Max
5 years ago
parent
62d8d0a1d9
commit
08aace9e0d
File diff suppressed because it is too large
Load Diff
@ -1,2 +1 @@
|
|||||||
<app-scaffold id="headerbar"></app-scaffold>
|
<app-main-navigation></app-main-navigation>
|
||||||
<router-outlet></router-outlet>
|
|
||||||
|
|||||||
@ -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,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>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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);
|
||||||
Loading…
Reference in New Issue