From 58a42036d9c5b9c3ca89df5863fdc1a0039ed497 Mon Sep 17 00:00:00 2001
From: dotansimha <dotansimha@gmail.com>
Date: Tue, 27 Sep 2016 13:34:03 +0300
Subject: [PATCH] Step 19.14: Update the layout of the party details

---
 .../app/parties/party-details.component.html  | 109 +++++++++---------
 1 file changed, 52 insertions(+), 57 deletions(-)

diff --git a/client/imports/app/parties/party-details.component.html b/client/imports/app/parties/party-details.component.html
index c7fc2340a..7bcaa8591 100644
--- a/client/imports/app/parties/party-details.component.html
+++ b/client/imports/app/parties/party-details.component.html
@@ -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>
\ No newline at end of file
+</div>