mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-02-23 11:19:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rework layout

Browse Source
This commit is contained in:
Liam Westby 2018-04-16 14:38:57 -05:00
parent a2d21a71a6
commit cbfcf39111
2 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/prebuild/src/app/login/login.component.html
View File

@ -11,38 +11,63 @@
<div>
<app-slider [activePane]="pane">
<div leftPane>
<div class="form-group">
<div class="form-item">
<button type="button" (click)="showGuestLogin()">Play as Guest</button>
<button type="button" (click)="hostRound()">Host Round</button>
</div>
<div class="form-group">
<div class="form-item">
<button type="button" (click)="showGuestLogin()">Play as Guest</button>
</div>
<h2 class="section-header">or</h2>
<div class="form-item">
<button type="button" (click)="hostRound()">Host Round</button>
</div>
</div>
</div>
<div centerPane>
<div class="form-group">
<div class="form-item">
<label>Username</label>
<input type="text" id="username" name="username" [(ngModel)]="username" />
</div>
<div class="form-item">
<button type="button" (click)="loginAsGuest(username)">Sign In</button>
</div>
</div>
</div>
<div rightPane>
<div class="form-group">
<player [ngStyle]="player.style" [player]="player"></player>
<div class="form-item" id="player-card">
<label>Player</label>
<player [ngStyle]="player.style" [player]="player"></player>
</div>
</div>
<div class="form-group">
<div class="form-item">
<label>Code</label>
<button type="button" (click)="logout()">Log Out</button>
</div>
</div>
<div class="form-group">
<div class="form-item">
<button type="button" (click)="quickJoin()">Play Now</button>
</div>
<h2 class="section-header" style="margin-bottom: 0">or</h2>
<div class="form-item">
<label>Party Code</label>
<input type="text" id="roundid" name="roundid" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
<button type="button" (click)="joinRound()">Join Round</button>
<button type="button" (click)="logout()">Log Out</button>
<div class="form-item">
<button type="button" (click)="joinRound()">Join Party</button>
</div>
</div>
<div class="form-group">
<div class="form-item">
<button type="button" (click)="hostRound()">Host Party</button>
</div>
</div>
</div>
</app-slider>
<div class="form-group">
<button type="button" (click)="slide()">Debug Forward</button>
<button type="button" (click)="slideBack()">Debug Backward</button>
</div>
</div>
</div>
</div>

31
frontend/prebuild/src/app/login/login.component.scss
View File

@ -25,7 +25,7 @@
text-align: center;
letter-spacing: .7em;
line-height: 1.5em;
padding-left: .7em;
padding-left: .8em;
}
#login-content {
@ -39,7 +39,8 @@
#login-title {
margin-top: 10px;
padding-bottom: 50px;
padding-bottom: 10px;
}
#login-icon {
padding-bottom: 40px;
@ -49,10 +50,13 @@
image-rendering: crisp-edges;
}
#player-card {
height: 60px;
}
.form-group {
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
margin-bottom: 30px;
display: flex;
flex-flow: column;
@ -63,11 +67,11 @@
.form-item {
width: 100%;
margin-top: 6px;
margin-bottom: 12px;
margin-bottom: 10px;
}
.form-item label {
width: 100%;
margin-bottom: -4px;
padding-bottom: 0px;
font-size: 0.8em;
@ -102,8 +106,6 @@
button {
width: 100%;
margin-top: 6px;
margin-bottom: 6px;
padding-top: 6px;
padding-bottom: 6px;
background-color: rgba(0, 0, 20, 0.2);
@ -114,6 +116,19 @@ button {
border-color: #bbb;
}
.section-header {
width: 100%;
margin-bottom: 15px;
font-size: 1.4em;
font-variant: small-caps;
font-weight: 300;
text-transform: lowercase;
text-align: center;
color: white;
}
@media screen and (min-width: 550px) {
#login-container {
width: 500px;