SES-74 created master-page with - select role

This commit is contained in:
ngawron 2020-12-03 22:31:43 +01:00 committed by Łukasz Góreczny
parent b2387e0cc0
commit b5c37e40e4
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 { appRoutingModule } from '../app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@NgModule({
declarations: [
@ -20,6 +22,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
FormsModule,
appRoutingModule,
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
],
providers: [],
bootstrap: [AppComponent]

View File

@ -1,18 +1,49 @@
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 10%;
}
html {
font-size: 14px;
.button {
border-radius: 15px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
#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;
}
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
@media (min-width: 768px) {
.button {
margin: 20px;
padding: 20px;
width: 658px;
height: 202px;
}
.font {
font-size: 40px;
}
}

View File

@ -1,2 +1,4 @@
<button>Player</button>
<button>Gamme Master</button>
<div class="container font">
<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>
<h2>Choose your role</h2>
<div class="container"></div>