Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/set-details'
Browse files Browse the repository at this point in the history 
Conflicts:
	.floo
	modules/UshahidiUI/media/css/style.css
  • Loading branch information
@rjmackay
rjmackay committed Oct 24, 2013
2 parents 09682de + 940198e commit 0e8bb50
Show file tree
Hide file tree
Showing 14 changed files with 582 additions and 102 deletions.
2 changes: 1 addition & 1 deletion modules/UshahidiUI/media/css/style.css
View file

Large diffs are not rendered by default.

228 changes: 186 additions & 42 deletions modules/UshahidiUI/media/css/test/style.css
View file

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions modules/UshahidiUI/media/js/app/controllers/Controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,18 @@ define(['App', 'backbone', 'marionette', 'controllers/ModalController',
that.layout.mainRegion.show(new SetsView());
});
},

setDetail : function(id)
{
var that = this;
App.homeLayout.close();
require(['views/SetDetailView'], function(SetDetailView)
{
App.vent.trigger('page:change', 'sets/:id');
that.layout.mainRegion.show(new SetDetailView());
});
},

login : function ()
{
var that = this;
Expand Down
3 changes: 2 additions & 1 deletion modules/UshahidiUI/media/js/app/routers/AppRouter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ define(['marionette'],
'views/map' : 'viewsMap',
'posts/:id' : 'postDetail',
'sets' : 'sets',
'sets/:id' : 'setDetail',
'login' : 'login',
'register' : 'register',
'*path' : 'index'
}
});
});
});
2 changes: 1 addition & 1 deletion modules/UshahidiUI/media/js/app/templates/PostListItem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h5 class="list-view-post-title"><i class="icon-lock"></i> <a href="#posts/{{id}
</div> <!-- end .list-view-post-details -->

<div class="list-view-post-excerpt">
<p>{{ prune content 100 }} <a href="#posts/{{id}}"><span class="read-more">&nbsp;Read&nbsp;More ...</span></a></p>
<p>{{ prune content 100 }} <a href="#posts/{{id}}"><span class="read-more"> ...&nbsp;Read&nbsp;More</span></a></p>
</div> <!-- end .list-view-post-excerpt -->

<div class="list-view-post-admin">
Expand Down
220 changes: 220 additions & 0 deletions modules/UshahidiUI/media/js/app/templates/SetDetail.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<div class="body-wrapper">
<div class="row">

<form role="form" class="custom" action="">
<div class="sets-search-bar">
<div class="sets-search-bar-title">
<h5>Accidents</h5>
<p class="sets-search-bar-subtitle">36 posts</p>
</div> <!-- end .sets-search-bar-title -->

<div class="sets-search-bar-create-button">
<a href="#sets" class="js-create-set"> <i class="icon-plus-sign"></i>Create a Set</a>
</div>

<div class="sets-search-bar-search-field">
<label class="visually-hidden" for="sets-search-field"></label>
<input id= "sets-search-field" type="text" placeholder="Find Sets">
</div>
</div> <!-- end .set-search-bar -->
</form> <!-- end form -->

<div id="map" class="set-detail-map"></div> <!-- end .map -->

<aside class="set-detail-summary-card">
{{> set-module }}
</aside>

<div class="set-detail-post-list-wrapper">

<div class="set-detail-post-list-filter">
<div class="row">

<form role="form" class="custom" action="">
<div class="list-view-filter-info">
<!-- TODO: need to add dynamic data here -->
<h5>Showing 3 from 1,500 posts</h5>
</div> <!-- end .list-view-filter-info -->

<div class="list-view-filter-count">
<div class="filter-count-select">
<label class="visually-hidden" for="filter-posts-count">Number of posts shown</label>
<select id="filter-posts-count" >
<option selected>3</option>
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>

</div> <!-- end .list-view-filter-count -->

<div class="list-view-filter-sort">
<div class="filter-sort-select">
<label class="visually-hidden" for="filter-posts-sort">Sort posts by</label>
<select id="filter-posts-sort" >
<option selected value="updated">Date/Time updated</option>
<option value="created">Date/Time created</option>
<option value="title">Title A-Z</option>
<option value="id">ID</option>
</select>
</div>

</div> <!-- end .list-view-filter-sort -->
</form> <!-- end .form -->

</div> <!-- end .row -->
</div> <!-- end .list-view-filter -->

<ul class="set-detail-post-list">
<li class="set-detail-post">
<article>
<div class="list-view-post-image">
<img src="{{imageurl "mini-coop-square.jpg"}}" alt="">
</div> <!-- end .list-view-post-image -->

<div class="list-view-post-details">
<div class="row">
<h5 class="list-view-post-title"><i class="icon-lock"></i> <a href="#posts/{{id}}"><!-- {{ title }} --> Mini Cooper Spotted on the Streets of London.</a></h5>
<div class="list-view-post-time">
<p> <i class="icon-time"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .list-view-post-time -->
</div> <!-- end .row -->
</div> <!-- end .list-view-post-details -->

<div class="list-view-post-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, voluptate, architecto distinctio debitis pariatur aliquid sit dignissimos dicta aliquam obcaecati expedita inventore reprehenderit voluptatem labore odit corporis voluptates magnam hic.<a href="#posts/{{id}}"><span class="read-more"> ...&nbsp;Read&nbsp;More</span></a></p>
</div> <!-- end .list-view-post-excerpt -->
</article> <!-- end <article> -->

<div class="set-detail-post-admin">
<div class="set-detail-post-list-categories-wrapper">
<h6>Categories</h6>
<ul class="list-view-post-categories">
<a href="#"><li><i class="icon-circle" style="color: #C50813"></i>Automobiles</li></a>
<a href="#"><li><i class="icon-circle" style="color: #23699D;"></i>Transport</li></a>
<a href="#"><li><i class="icon-circle" style="color: #4fa425;"></i>London</li></a>
<a href="#"><li><i class="icon-circle" style="color: #baac29;"></i>Retro</li></a>
</ul>
</div> <!-- end .list-view-post-categories-wrapper -->

<div class="set-detail-post-edit-wrapper">
<ul class="list-view-post-edit">
<li><a href="#" class="list-view-post-edit-buttons js-post-edit"> <i class="icon-edit"></i> <span class="hide-for-medium-down">edit</span></a></li>
<li><a href="#" class="list-view-post-edit-buttons js-post-set"> <i class="icon-plus-sign"></i> <span class="hide-for-medium-down">set</span></a></li>
<li>
{{#if isPublished}}
<a href="#" class="list-view-post-edit-buttons post-unpublish"> <i class="icon-file"></i> <span class="hide-for-medium-down">unpublish</span></a>
{{else}}
<a href="#" class="list-view-post-edit-buttons post-publish"> <i class="icon-file"></i> <span class="hide-for-medium-down">publish</span></a>
{{/if}}
</li>
<li><a href="#" class="list-view-post-edit-buttons post-delete"> <i class="icon-trash"></i></a></li>
</ul> <!-- end .list-view-post-edit -->
</div> <!-- end .list-view-post-edit-wrapper -->
</div>
</li> <!-- end .set-detail-post-list-item -->

<li class="set-detail-post">
<article>
<div class="list-view-post-image">
<img src="{{imageurl "mini-coop-square.jpg"}}" alt="">
</div> <!-- end .list-view-post-image -->

<div class="list-view-post-details">
<div class="row">
<h5 class="list-view-post-title"><i class="icon-lock"></i> <a href="#posts/{{id}}"><!-- {{ title }} --> Mini Cooper Spotted on the Streets of London.</a></h5>
<div class="list-view-post-time">
<p> <i class="icon-time"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .list-view-post-time -->
</div> <!-- end .row -->
</div> <!-- end .list-view-post-details -->

<div class="list-view-post-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, voluptate, architecto distinctio debitis pariatur aliquid sit dignissimos dicta aliquam obcaecati expedita inventore reprehenderit voluptatem labore odit corporis voluptates magnam hic.<a href="#posts/{{id}}"><span class="read-more"> ...&nbsp;Read&nbsp;More</span></a></p>
</div> <!-- end .list-view-post-excerpt -->
</article> <!-- end <article> -->

<div class="set-detail-post-admin">
<div class="set-detail-post-list-categories-wrapper">
<h6>Categories</h6>
<ul class="list-view-post-categories">
<a href="#"><li><i class="icon-circle" style="color: #C50813"></i>Automobiles</li></a>
<a href="#"><li><i class="icon-circle" style="color: #23699D;"></i>Transport</li></a>
<a href="#"><li><i class="icon-circle" style="color: #4fa425;"></i>London</li></a>
<a href="#"><li><i class="icon-circle" style="color: #baac29;"></i>Retro</li></a>
</ul>
</div> <!-- end .list-view-post-categories-wrapper -->

<div class="set-detail-post-edit-wrapper">
<ul class="list-view-post-edit">
<li><a href="#" class="list-view-post-edit-buttons js-post-edit"> <i class="icon-edit"></i> <span class="hide-for-medium-down">edit</span></a></li>
<li><a href="#" class="list-view-post-edit-buttons js-post-set"> <i class="icon-plus-sign"></i> <span class="hide-for-medium-down">set</span></a></li>
<li>
{{#if isPublished}}
<a href="#" class="list-view-post-edit-buttons post-unpublish"> <i class="icon-file"></i> <span class="hide-for-medium-down">unpublish</span></a>
{{else}}
<a href="#" class="list-view-post-edit-buttons post-publish"> <i class="icon-file"></i> <span class="hide-for-medium-down">publish</span></a>
{{/if}}
</li>
<li><a href="#" class="list-view-post-edit-buttons post-delete"> <i class="icon-trash"></i></a></li>
</ul> <!-- end .list-view-post-edit -->
</div> <!-- end .list-view-post-edit-wrapper -->
</div>
</li> <!-- end .set-detail-post-list-item -->

<li class="set-detail-post">
<article>
<div class="list-view-post-image">
<img src="{{imageurl "mini-coop-square.jpg"}}" alt="">
</div> <!-- end .list-view-post-image -->

<div class="list-view-post-details">
<div class="row">
<h5 class="list-view-post-title"><i class="icon-lock"></i> <a href="#posts/{{id}}"><!-- {{ title }} --> Mini Cooper Spotted on the Streets of London.</a></h5>
<div class="list-view-post-time">
<p> <i class="icon-time"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .list-view-post-time -->
</div> <!-- end .row -->
</div> <!-- end .list-view-post-details -->

<div class="list-view-post-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, voluptate, architecto distinctio debitis pariatur aliquid sit dignissimos dicta aliquam obcaecati expedita inventore reprehenderit voluptatem labore odit corporis voluptates magnam hic.<a href="#posts/{{id}}"><span class="read-more"> ...&nbsp;Read&nbsp;More</span></a></p>
</div> <!-- end .list-view-post-excerpt -->
</article> <!-- end <article> -->

<div class="set-detail-post-admin">
<div class="set-detail-post-list-categories-wrapper">
<h6>Categories</h6>
<ul class="list-view-post-categories">
<a href="#"><li><i class="icon-circle" style="color: #C50813"></i>Automobiles</li></a>
<a href="#"><li><i class="icon-circle" style="color: #23699D;"></i>Transport</li></a>
<a href="#"><li><i class="icon-circle" style="color: #4fa425;"></i>London</li></a>
<a href="#"><li><i class="icon-circle" style="color: #baac29;"></i>Retro</li></a>
</ul>
</div> <!-- end .list-view-post-categories-wrapper -->

<div class="set-detail-post-edit-wrapper">
<ul class="list-view-post-edit">
<li><a href="#" class="list-view-post-edit-buttons js-post-edit"> <i class="icon-edit"></i> <span class="hide-for-medium-down">edit</span></a></li>
<li><a href="#" class="list-view-post-edit-buttons js-post-set"> <i class="icon-plus-sign"></i> <span class="hide-for-medium-down">set</span></a></li>
<li>
{{#if isPublished}}
<a href="#" class="list-view-post-edit-buttons post-unpublish"> <i class="icon-file"></i> <span class="hide-for-medium-down">unpublish</span></a>
{{else}}
<a href="#" class="list-view-post-edit-buttons post-publish"> <i class="icon-file"></i> <span class="hide-for-medium-down">publish</span></a>
{{/if}}
</li>
<li><a href="#" class="list-view-post-edit-buttons post-delete"> <i class="icon-trash"></i></a></li>
</ul> <!-- end .list-view-post-edit -->
</div> <!-- end .list-view-post-edit-wrapper -->
</div>
</li> <!-- end .set-detail-post-list-item -->
</ul> <!-- end .set-detail-post-list -->

</div> <!-- end .set-detail-post-list-outer-wrapper -->

</div>
</div>


Empty file added modules/UshahidiUI/media/js/app/templates/SetDetailLayout.html
View file
Empty file.
16 changes: 8 additions & 8 deletions modules/UshahidiUI/media/js/app/templates/Sets.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ <h5>My Sets</h5>
</form> <!-- end form -->

<ul class="sets-grid">
{{> set-module }}
{{> set-module }}
{{> set-module }}
{{> set-module }}
{{> set-module }}
{{> set-module }}
{{> set-module }}
{{> set-module }}
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
<li>{{> set-module }}</li>
</ul> <!-- end .sets-grid -->

<div class="pagination-centered">
Expand Down
88 changes: 43 additions & 45 deletions modules/UshahidiUI/media/js/app/templates/partials/set-module.html
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,43 @@
<li>
<div class="set-wrapper">

<div class="set-image">
<img src="{{ imageurl "mini-coop.jpg"}}" alt="">
</div> <!-- end .set-image -->

<!-- FIXME: set-post-number icon - need a responsive & dynamic solution here. What happens with 3 and 4 digit numbers? -->
<div class="set-post-number">36</div>

<div class="set-body">
<div class="set-title">
<h3><a href="#">London Automobiles</a></h3>
</div> <!-- end .set-title -->

<div class="set-time-meta">
<small> <i class="icon-time"></i>Last updated Tuesday at 8:23pm </small>
</div> <!-- end .set-time-meta -->

<div class="set-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, quis consectetur ...</p>
</div> <!-- end .set-excerpt -->

<div class="set-view-posts">
<a href="#" class="set-view-posts-button" >view posts</a>
</div> <!-- end .set-view-posts -->

<div class="set-tags">
<small>
<a href="#">automobiles</a>, <a href="#">mozilla</a>, <a href="#">barbican</a>, <a href="#">leicester square</a>, <a href="#">hand & shears</a>
</small>
</div> <!-- end .set-tags -->

<div class="set-actions">
<ul class="set-actions-list">
<li><small><a href="#"><i class="icon-edit"></i> edit set</a></small></li>
<li><small><a href="#"><i class="icon-trash"></i> delete set</a></small></li>
<li><small><a href="#"><i class="icon-lock"></i></a></small></li>
<li><small><a href="#"><i class="icon-eye-open"></i> 12547</a></small></li>
</ul> <!-- end .set-actions-list -->
</div> <!-- end .set-actions -->
</div> <!-- end .set-body -->

</div> <!-- end .set-wrapper -->
</li>
<div class="set-wrapper">

<div class="set-image">
<img src="{{ imageurl "mini-coop.jpg"}}" alt="">
</div> <!-- end .set-image -->

<!-- FIXME: set-post-number icon - need a responsive & dynamic solution here. What happens with 3 and 4 digit numbers? -->
<div class="set-post-number">36</div>

<div class="set-body">
<div class="set-title">
<h3><a href="#sets/1">London Automobiles</a></h3>
</div> <!-- end .set-title -->

<div class="set-time-meta">
<small> <i class="icon-time"></i>Last updated Tuesday at 8:23pm </small>
</div> <!-- end .set-time-meta -->

<div class="set-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, quis consectetur ...</p>
</div> <!-- end .set-excerpt -->

<div class="set-view-posts">
<a href="#sets/1" class="set-view-posts-button" >view posts</a>
</div> <!-- end .set-view-posts -->

<div class="set-tags">
<small>
<a href="#">automobiles</a>, <a href="#">mozilla</a>, <a href="#">barbican</a>, <a href="#">leicester square</a>, <a href="#">hand & shears</a>
</small>
</div> <!-- end .set-tags -->

<div class="set-actions">
<ul class="set-actions-list">
<li><small><a href="#"><i class="icon-edit"></i> edit set</a></small></li>
<li><small><a href="#"><i class="icon-trash"></i> delete set</a></small></li>
<li><small><a href="#"><i class="icon-lock"></i></a></small></li>
<li><small><a href="#"><i class="icon-eye-open"></i> 12547</a></small></li>
</ul> <!-- end .set-actions-list -->
</div> <!-- end .set-actions -->
</div> <!-- end .set-body -->

</div> <!-- end .set-wrapper -->
Empty file added modules/UshahidiUI/media/js/app/views/SetDetailLayout.js
View file
Empty file.
13 changes: 13 additions & 0 deletions modules/UshahidiUI/media/js/app/views/SetDetailView.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
define([ 'App', 'marionette', 'handlebars', 'text!templates/SetDetail.html', 'text!templates/partials/set-module.html'],
function( App, Marionette, Handlebars, template, setModuleTemplate)
{
// Hacky - make sure we register partials before we call compile
Handlebars.registerPartial('set-module', setModuleTemplate);
return Marionette.ItemView.extend( {
template: Handlebars.compile(template),
initialize: function() {
},
events : {
}
});
});
1 change: 0 additions & 1 deletion modules/UshahidiUI/media/scss/modules/posts/_list-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@
background: $blueGray;
padding: 20px 15px;
margin: 0 0 20px 0;
.list-view-filter-info,
.list-view-filter-count {
@media #{$small} {
border-right: 1px solid darken($blueGray, 10);
Expand Down
Loading

0 comments on commit 0e8bb50

Please sign in to comment.