Permalink
Browse files

Step 19.12: Updated the layout of the parties list

  • Loading branch information...
dotansimha authored and DAB0mB committed Oct 29, 2016
1 parent ab7785b commit c5ee7765568da2c3bf06d9c1be8bd7d67a2bb902
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.