Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Step 19.14: Update the layout of the party details
- Loading branch information
1 parent
88535d8
commit 58a4203
Showing
1 changed file
with
52 additions
and
57 deletions.
There are no files selected for viewing
109 changes: 52 additions & 57 deletions
109
client/imports/app/parties/party-details.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,56 @@ | ||
| <div class="row ma-party-details-container"> | ||
| <div class="col-sm-6 col-sm-offset-3"> | ||
| <legend>View and Edit Your Party Details:</legend> | ||
| <form class="form-horizontal" *ngIf="party" (submit)="saveParty()"> | ||
| <div class="form-group"> | ||
| <label>Party Name</label> | ||
| <input [disabled]="!isOwner" type="text" [(ngModel)]="party.name" name="name" class="form-control"> | ||
| </div> | ||
| <div class="party-details-container" *ngIf="party"> | ||
| <div class="row"> | ||
| <div class="party-details"> | ||
| <md-card> | ||
| <h2>{{ party.name }}</h2> | ||
| <form layout="column" (submit)="saveParty()"> | ||
| <label>Party Name: </label> | ||
| <md-input [disabled]="!isOwner" [(ngModel)]="party.name" name="name"></md-input> | ||
| <br /> | ||
| <label>Party Description: </label> | ||
| <md-input [disabled]="!isOwner" [(ngModel)]="party.description" name="description"></md-input> | ||
| <br /> | ||
| <label>Location name: </label> | ||
| <md-input [disabled]="!isOwner" [(ngModel)]="party.location.name" name="location"></md-input> | ||
| <br /> | ||
| <md-checkbox [disabled]="!isOwner" [(checked)]="party.public" name="public" aria-label="Public"> | ||
| Public party? | ||
| </md-checkbox> | ||
|
|
||
| <div class="form-group"> | ||
| <label>Description</label> | ||
| <input [disabled]="!isOwner" type="text" [(ngModel)]="party.description" name="description" class="form-control"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label>Location name</label> | ||
| <input [disabled]="!isOwner" type="text" [(ngModel)]="party.location.name" name="location" class="form-control"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <button [disabled]="!isOwner" type="submit" class="btn btn-primary">Save</button> | ||
| <a [routerLink]="['/']" class="btn">Back</a> | ||
| </div> | ||
| </form> | ||
|
|
||
| <ul class="ma-invite-list" *ngIf="isOwner || isPublic"> | ||
| <h3> | ||
| Users to invite: | ||
| </h3> | ||
| <li *ngFor="let user of users | async"> | ||
| <div>{{ user | displayName }}</div> | ||
| <button (click)="invite(user)" class="btn btn-primary btn-sm">Invite</button> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div *ngIf="isInvited"> | ||
| <h2>Reply to the invitation</h2> | ||
| <input type="button" class="btn btn-primary" value="I'm going!" (click)="reply('yes')"> | ||
| <input type="button" class="btn btn-warning" value="Maybe" (click)="reply('maybe')"> | ||
| <input type="button" class="btn btn-danger" value="No" (click)="reply('no')"> | ||
| <div layout="row" layout-align="left"> | ||
| <button [disabled]="!isOwner" type="submit" md-raised-button color="accent">Save</button> | ||
| <a [routerLink]="['/']" md-raised-button class="md-raised">Back</a> | ||
| </div> | ||
| </form> | ||
| </md-card> | ||
| </div> | ||
|
|
||
| <h3 class="ma-map-title"> | ||
| Click the map to set the party location | ||
| </h3> | ||
|
|
||
| <div class="angular-google-map-container"> | ||
| <sebm-google-map | ||
| [latitude]="lat || centerLat" | ||
| [longitude]="lng || centerLng" | ||
| [zoom]="8" | ||
| (mapClick)="mapClicked($event)"> | ||
| <sebm-google-map-marker | ||
| *ngIf="lat && lng" | ||
| [latitude]="lat" | ||
| [longitude]="lng"> | ||
| </sebm-google-map-marker> | ||
| </sebm-google-map> | ||
| <div class="party-invites"> | ||
| <md-card> | ||
| <h2>Invitations</h2> | ||
| <span [hidden]="!party.public">Public party, no need for invitations!</span> | ||
| <md-list> | ||
| <md-list-item *ngFor="let user of users | async"> | ||
| <div>{{ user | displayName }}</div> | ||
| <button (click)="invite(user)" md-raised-button>Invite</button> | ||
| </md-list-item> | ||
| </md-list> | ||
| </md-card> | ||
| </div> | ||
| <div class="party-map"> | ||
| <md-card> | ||
| <h2>Party location</h2> | ||
| <sebm-google-map | ||
| [latitude]="lat || centerLat" | ||
| [longitude]="lng || centerLng" | ||
| [zoom]="8" | ||
| (mapClick)="mapClicked($event)"> | ||
| <sebm-google-map-marker | ||
| *ngIf="lat && lng" | ||
| [latitude]="lat" | ||
| [longitude]="lng"> | ||
| </sebm-google-map-marker> | ||
| </sebm-google-map> | ||
| </md-card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |