Permalink
Browse files

Step 19.12: Updated the layout of the parties list

  • Loading branch information...
1 parent ab7785b commit c5ee7765568da2c3bf06d9c1be8bd7d67a2bb902 @dotansimha dotansimha committed with DAB0mB Oct 29, 2016
Showing with 61 additions and 95 deletions.
  1. +61 −95 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>

0 comments on commit c5ee776

Please sign in to comment.