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>
|
||||
<router-outlet></router-outlet>
|
||||
<app-main-navigation></app-main-navigation>
|
||||
|
||||
@ -1,82 +1,23 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
#postinput
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
margin: 0.5em
|
||||
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
|
||||
#home
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#feedchooser
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
display: grid
|
||||
grid-template: 100% /50% 50%
|
||||
background-color: $cFontWhite
|
||||
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)
|
||||
#complete-feed
|
||||
box-sizing: border-box
|
||||
display: flex
|
||||
width: 100%
|
||||
padding: 0.5em
|
||||
|
||||
#feedlist
|
||||
@include gridPosition(2, 3, 1, 2)
|
||||
overflow: auto
|
||||
#feedlist
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.feeditemPicture
|
||||
background-color: $cFeedItemBackground
|
||||
min-height: 2em
|
||||
margin: 0.5em
|
||||
padding: 0.25em
|
||||
border-radius: 0.25em
|
||||
.itemhead
|
||||
align-items: flex-start
|
||||
|
||||
.title, .handle, .date
|
||||
margin: 0.125em
|
||||
.title
|
||||
font-weight: bold
|
||||
#input
|
||||
box-sizing: border-box
|
||||
width: 100%
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
|
||||
|
||||
.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/vars.sass'
|
||||
|
||||
.feeditem
|
||||
background-color: $cFeedItemBackground
|
||||
min-height: 2em
|
||||
//max-heigth: 5em
|
||||
margin: 0.5em
|
||||
padding: 0.25em
|
||||
border-radius: 0.25em
|
||||
.post
|
||||
box-sizing: border-box
|
||||
width: 100%
|
||||
margin-top: 0.5em
|
||||
|
||||
|
||||
.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
|
||||
::ng-deep .mat-card-header-text
|
||||
margin: 0px
|
||||
|
||||
.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-feed id="feedcontainer"></home-feed>
|
||||
<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="registercontainer">
|
||||
<h1>Register</h1>
|
||||
<table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
||||
<tr>
|
||||
<td>username: </td>
|
||||
<td><input #username type="text" name="username" username.value=''><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>email:</td>
|
||||
<td><input #email type="text" name="email"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>password:</td>
|
||||
<td> <input #password type="password" name="password"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>repeat password:</td>
|
||||
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
|
||||
<p *ngIf="errorOccurred">{{errorMessage}}</p>
|
||||
<br>
|
||||
<br>
|
||||
<a href="/login">You are already part of greenvironment? - login</a>
|
||||
</div>
|
||||
</div>
|
||||
<mat-card style="text-align: center;" >
|
||||
<mat-card-title>
|
||||
Register
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
<div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
||||
<mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your email" #email >
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your username" #username >
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
|
||||
<button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
|
||||
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
|
||||
<button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
|
||||
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
</button>
|
||||
</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>
|
||||
|
||||
@ -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