Step 19.12: Updated the layout of the parties list

client/imports/app/parties/parties-list.component.html

@@ -1,100 +1,66 @@
-<div class="row">
-  <div class="col-md-12">
-    <div class="jumbotron">
-      <h3>Create a new party!</h3>
-      <parties-form [hidden]="!user"></parties-form>
-      <div [hidden]="user">You need to login to create new parties!</div>
-    </div>
-  </div>
-</div>
-<div class="row ma-filters">
-  <div class="col-md-6">
-    <h3>All Parties:</h3>
-    <form class="form-inline">
-      <input type="text" class="form-control" #searchtext placeholder="Search by Location">
-      <button type="button" class="btn btn-primary" (click)="search(searchtext.value)">Search</button>
-      Sort by name: <select class="form-control" #sort (change)="changeSortOrder(sort.value)">
-      <option value="1" selected>Ascending</option>
-      <option value="-1">Descending</option>
-    </select>
-    </form>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-6">
-    <ul class="list-group">
-      <li class="list-group-item">
-        <pagination-controls (pageChange)="onPageChanged($event)"></pagination-controls>
-      </li>
-      <li *ngFor="let party of parties | async"
-          class="list-group-item ma-party-item">
-        <div class="row">
-          <div class="col-sm-8">
-            <h2 class="ma-party-name">
-              <a [routerLink]="['/party', party._id]">{{party.name}}</a>
-            </h2>
-            @ {{party.location.name}}
-            <p class="ma-party-description">
-              {{party.description}}
-            </p>
-          </div>
-          <div class="col-sm-4">
-            <button class="btn btn-danger pull-right" [hidden]="!isOwner(party)" (click)="removeParty(party)"><i
-              class="fa fa-times"></i></button>
-          </div>
+<parties-form></parties-form>
+
+<div class="parties-list-container">
+  <div class="parties-list">
+    <md-card class="filter-card">
+      <h3>Filter Parties</h3>
+      <form>
+        By Location: <md-input dividerColor="primary" type="text" #searchtext placeholder="Enter Location"></md-input>
+        <button md-button (click)="search(searchtext.value)">Find</button>
+        <br />
+        Sort by name:
+        <select class="form-control" #sort (change)="changeSortOrder(sort.value)">
+          <option value="1" selected>Ascending</option>
+          <option value="-1">Descending</option>
+        </select>
+      </form>
+    </md-card>
+
+    <pagination-controls class="pagination" (pageChange)="onPageChanged($event)"></pagination-controls>
+
+    <md-card *ngFor="let party of parties | async" class="party-card">
+      <h2 class="party-name">
+        <a [routerLink]="['/party', party._id]">{{party.name}}</a>
+      </h2>
+      @ {{party.location.name}}
+      <br />
+      {{party.description}}
+
+      <button class="remove-party" md-icon-button *ngIf="isOwner(party)" (click)="removeParty(party)">
+        <md-icon class="md-24">X</md-icon>
+      </button>
+
+      <div class="rsvp-container">
+        <div class="rsvps-sum">
+          <div class="rsvps-amount">{{party | rsvp:'yes'}}</div>
+          <div class="rsvps-title">Yes</div>
+        </div>
+        <div class="rsvps-sum">
+          <div class="rsvps-amount">{{party | rsvp:'maybe'}}</div>
+          <div class="rsvps-title">Maybe</div>
         </div>
-        <div class="row ma-party-item-bottom">
-          <div class="col-sm-4">
-            <div class="ma-rsvp-sum">
-              <div class="ma-rsvp-amount">
-                <div class="ma-amount">
-                  {{party | rsvp:'yes'}}
-                </div>
-                <div class="ma-rsvp-title">
-                  YES
-                </div>
-              </div>
-              <div class="ma-rsvp-amount">
-                <div class="ma-amount">
-                  {{party | rsvp:'maybe'}}
-                </div>
-                <div class="ma-rsvp-title">
-                  MAYBE
-                </div>
-              </div>
-              <div class="ma-rsvp-amount">
-                <div class="ma-amount">
-                  {{party | rsvp:'no'}}
-                </div>
-                <div class="ma-rsvp-title">
-                  NO
-                </div>
-              </div>
-            </div>
-          </div>
+        <div class="rsvps-sum">
+          <div class="rsvps-amount">{{party | rsvp:'no'}}</div>
+          <div class="rsvps-title">No</div>
         </div>
-      </li>
-      <li class="list-group-item">
-        <pagination-controls (pageChange)="onPageChanged($event)"></pagination-controls>
-      </li>
-    </ul>
+      </div>
+    </md-card>
+
+    <pagination-controls class="pagination" (pageChange)="onPageChanged($event)"></pagination-controls>
   </div>
-  <div class="col-md-6">
-    <ul class="list-group">
-      <li class="list-group-item">
-        <sebm-google-map
-          [latitude]="0"
-          [longitude]="0"
-          [zoom]="1">
-          <div *ngFor="let party of parties | async">
-            <sebm-google-map-marker
-              *ngIf="party.location.lat"
-              [latitude]="party.location.lat"
-              [longitude]="party.location.lng">
-            </sebm-google-map-marker>
-          </div>
-        </sebm-google-map>
-      </li>
-    </ul>
+  <div class="parties-map">
+    <sebm-google-map
+      [latitude]="0"
+      [longitude]="0"
+      [zoom]="1"
+      class="google-map">
+      <div *ngFor="let party of parties | async">
+      <sebm-google-map-marker
+      *ngIf="party.location.lat"
+      [latitude]="party.location.lat"
+      [longitude]="party.location.lng">
+      </sebm-google-map-marker>
+      </div>
+    </sebm-google-map>
   </div>
 </div>