SES-74 created master-page with - select role

This commit is contained in:
ngawron 2020-12-03 22:31:43 +01:00
parent bdeca6efbe
commit afe73424df
5 changed files with 56 additions and 15 deletions

View File

@ -7,6 +7,8 @@ import { SelectRoleComponent } from './components/select-role/select-role.compon
import { MasterPageComponent } from './pages/master-page/master-page.component'; import { MasterPageComponent } from './pages/master-page/master-page.component';
import { appRoutingModule } from '../app.routing'; import { appRoutingModule } from '../app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -20,6 +22,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
FormsModule, FormsModule,
appRoutingModule, appRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

View File

@ -1,18 +1,49 @@
a.navbar-brand { .container {
white-space: normal; display: flex;
text-align: center; justify-content: center;
word-break: break-all; align-items: center;
flex-wrap: wrap;
padding: 10%;
} }
html { .button {
font-size: 14px; border-radius: 15px;
} }
#player-button {
background-color: #2699fb;
}
#game-master-button {
background-color: #440505;
}
.font {
color: #ffffff;
font-weight: bold;
font-style: italic, oblique;
}
@media (max-width: 768px) {
.button {
margin: 10px;
padding: 10px;
width: 328px;
height: 101px;
}
.font {
font-size: 20px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
html { .button {
font-size: 16px; margin: 20px;
padding: 20px;
width: 658px;
height: 202px;
}
.font {
font-size: 40px;
} }
} }
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

View File

@ -1,2 +1,4 @@
<button>Player</button> <div class="container font">
<button>Gamme Master</button> <button id="player-button" class="button font">Player</button>
<button id="game-master-button" class="button font">Game Master</button>
</div>

View File

@ -0,0 +1,5 @@
.container {
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -1,2 +1 @@
<h1>Hello on the Session Companion</h1> <div class="container"></div>
<h2>Choose your role</h2>