Commit 19cb3fd9 authored by Dennis Willers's avatar Dennis Willers
Browse files

Add Angular Material Design Modules and design startpage

parent 7dd3285e

package.json

+2 −1
Original line number Diff line number Diff line
@@ -7,7 +7,8 @@ 
    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

    "e2e": "ng e2e",

    "postinstall": "ngcc"

  },

  "private": true,

  "dependencies": {

src/app/app.component.html

+1 −1
Original line number Diff line number Diff line 
<div style="background-color: azure" fxLayout="column" fxFlexFill>

<div fxLayout="column" fxFlexFill style="background-color: #e7e7e7">

  <app-header>

  </app-header>

  <div fxFlex>

src/app/app.module.ts

+9 −1
Original line number Diff line number Diff line
@@ -9,6 +9,10 @@ import { HeaderComponent } from './header/header.component'; 
import { FooterComponent } from './footer/footer.component';

import { FlexLayoutModule } from '@angular/flex-layout';

import { SelectGameComponent } from './select-game/select-game.component';

import {MatButtonModule} from '@angular/material/button';

import {MatFormFieldModule} from '@angular/material/form-field';

import {MatInputModule} from '@angular/material/input';

import {MatCardModule} from '@angular/material/card';



@NgModule({

  declarations: [
@@ -22,7 +26,11 @@ import { SelectGameComponent } from './select-game/select-game.component'; 
    AppRoutingModule,

    BrowserAnimationsModule,

    MatToolbarModule,

    FlexLayoutModule

    FlexLayoutModule,

    MatButtonModule,

    MatFormFieldModule,

    MatInputModule,

    MatCardModule

  ],

  providers: [],

  bootstrap: [AppComponent]

src/app/select-game/select-game.component.html

+23 −1
Original line number Diff line number Diff line 
<p>select-game works!</p>
 
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">

  <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>

  <h2>Ideal im Lockdown!</h2>

  <br>

  <br>

  <br>

  <mat-card>

    <mat-card-title>Spielsuche</mat-card-title>

    <mat-card-subtitle>Finde oder erstelle ein Spiel über den Spielnamen</mat-card-subtitle>

    <mat-card-content>

      <form>

        <mat-form-field>

          <mat-label>Spielname</mat-label>

          <input type="text" matInput>

        </mat-form-field>

      </form>

    </mat-card-content>

    <mat-card-actions>

      <button mat-raised-button color="primary">Spiel erstellen</button>

      <button mat-raised-button color="primary">Spiel beitreten</button>

    </mat-card-actions>

  </mat-card>

</div>

src/app/select-game/select-game.component.scss

+9 −0
Original line number Diff line number Diff line 
.example-form {

  min-width: 150px;

  max-width: 500px;

  width: 100%;

}



.example-full-width {

  width: 100%;

}