Skip to content

Commit

Permalink
Fixes T351
Browse files Browse the repository at this point in the history
Summary:
* abstracts `card` for reusability
	* reorganizes directories
* styles custom form wizard
	* config
	* settings

* Fixes T351

Test Plan: * check styles and responsiveness for custom form wizard

Reviewers: rjmackay, shadowhand

Reviewed By: shadowhand

Subscribers: dkobia

Maniphest Tasks: T351

Differential Revision: https://phabricator.ushahidi.com/D179
  • Loading branch information
Seth Hall committed Jun 12, 2014
1 parent b263613 commit 80ee4ce
Show file tree
Hide file tree
Showing 23 changed files with 408 additions and 334 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div class="card-wrapper">
<div class="message-card-wrapper">

<div class="card-panel-wrapper card-panel-wrapper--map js-card-panel-map">
<div class="card-panel card-panel--map">
<div class="message-card-panel-wrapper message-card-panel-wrapper--map js-message-card-panel-map">
<div class="message-card-panel message-card-panel--map">
{{! TODO: add support for real map}}
<img src="{{imageurl "map2.jpg"}}" alt="" />
</div> <!-- end .card-panel-map -->
</div> <!-- end .card-panel-wrapper -->
</div> <!-- end .message-card-panel-map -->
</div> <!-- end .message-card-panel-wrapper -->

<article class="card">
<article class="message-card">
<div class="card__icon">
{{! TODO: this should be dynamic from "type", eg: fa-envelope for email, fa-twitter-square for twitter, etc
correct thing to do would be to add .icon-email, .icon-sms, etc classes}}
Expand All @@ -33,105 +33,105 @@ <h5 class="card__header">
<p> <i class="fa fa-map-marker"></i>{{location}}</p>
{{/if}}
<p> <i class="fa fa-clock-o"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .card-meta -->
</div> <!-- end .card-details -->
</div> <!-- end .message-card-meta -->
</div> <!-- end .message-card-details -->
<div class="card__excerpt-wrapper">
<div class="card__excerpt">
{{! TODO: increase this size before landing, "10" is only for testing }}
<span class="excerpt">{{ prune message 10 }}</span>
<span class="rest-of-message">{{message}}</span>
<span class="show-rest-of-message"><i class="expand"></i></span>
</div> <!-- end .card-excerpt -->
</div> <!-- end .message-card-excerpt -->
</div>
</article> <!-- end .card -->
</article> <!-- end .message-card -->

<div class="card-actions-wrapper hide-for-small">
<ul class="card-actions-list">
<li class="card-actions-list__item"><a href="" class="js-message-activity js-stub"> <i class="fa fa-list"></i>Activity</a></li>
<li class="card-actions-list__item"><a href="" class="js-message-reply js-stub"> <i class="fa fa-reply"></i>Reply</a></li>
<div class="message-card-actions-wrapper hide-for-small">
<ul class="message-card-actions-list">
<li class="message-card-actions-list__item"><a href="" class="js-message-activity js-stub"> <i class="fa fa-list"></i>Activity</a></li>
<li class="message-card-actions-list__item"><a href="" class="js-message-reply js-stub"> <i class="fa fa-reply"></i>Reply</a></li>
{{#if isIncoming}}
{{#if post}}
<li class="card-actions-list__item"><a href="#posts/{{post}}" class="js-message-view-post"> <i class="fa fa-edit"></i>View Post</a></li>
<li class="message-card-actions-list__item"><a href="#posts/{{post}}" class="js-message-view-post"> <i class="fa fa-edit"></i>View Post</a></li>
{{else}}
<li class="card-actions-list__item"><a href="" class="js-message-create-post"> <i class="fa fa-plus-circle"></i>Create Post</a></li>
<li class="message-card-actions-list__item"><a href="" class="js-message-create-post"> <i class="fa fa-plus-circle"></i>Create Post</a></li>
{{/if}}
{{#if isArchived}}
<li class="card-actions-list__item"><a href="" class="js-message-unarchive"> <i class="fa fa-archive"></i>Archive</a></li>
<li class="message-card-actions-list__item"><a href="" class="js-message-unarchive"> <i class="fa fa-archive"></i>Archive</a></li>
{{else}}
<li class="card-actions-list__item"><a href="" class="js-message-archive"> <i class="fa fa-archive"></i>Archive</a></li>
<li class="message-card-actions-list__item"><a href="" class="js-message-archive"> <i class="fa fa-archive"></i>Archive</a></li>
{{/if}}
{{/if}}
</ul> <!-- end .card-actions -->
</div> <!-- end .card-actions-wrapper .hide-for-small-->

<div class="card-actions-wrapper show-for-small">
<a href="#" data-dropdown="drop-card-actions" class="dropdown-button show-for-small">actions</a><br>
<ul id="drop-card-actions" data-dropdown-content class="dropdown-list f-dropdown show-for-small">
<li class="dropdown-list__item"><a href="" class="js-card-action-activity js-stub"> <i class="fa fa-list"></i>Activity</a></li>
<li class="dropdown-list__item"><a href="" class="js-card-action-reply js-stub"><i class="fa fa-reply"></i>Reply</a></li>
<li class="dropdown-list__item"><a href="" class="js-card-action-create-post"> <i class="fa fa-edit"></i>Create Post</a></li>
<li class="dropdown-list__item"><a href="" class="js-card-action-archive js-stub"> <i class="fa fa-archive"></i>Archive</a></li>
</ul> <!-- end .card-actions -->
</div> <!-- end .card-actions-wrapper .show-for-small -->
</ul> <!-- end .message-card-actions -->
</div> <!-- end .message-card-actions-wrapper .hide-for-small-->

<div class="message-card-actions-wrapper show-for-small">
<a href="#" data-dropdown="drop-message-card-actions" class="dropdown-button show-for-small">actions</a><br>
<ul id="drop-message-card-actions" data-dropdown-content class="dropdown-list f-dropdown show-for-small">
<li class="dropdown-list__item"><a href="" class="js-message-card-action-activity js-stub"> <i class="fa fa-list"></i>Activity</a></li>
<li class="dropdown-list__item"><a href="" class="js-message-card-action-reply js-stub"><i class="fa fa-reply"></i>Reply</a></li>
<li class="dropdown-list__item"><a href="" class="js-message-card-action-create-post"> <i class="fa fa-edit"></i>Create Post</a></li>
<li class="dropdown-list__item"><a href="" class="js-message-card-action-archive js-stub"> <i class="fa fa-archive"></i>Archive</a></li>
</ul> <!-- end .message-card-actions -->
</div> <!-- end .message-card-actions-wrapper .show-for-small -->

<!-- TODO: These panels should be partials -->

{{! TODO: fill this with real content }}
<div class="card-panel-wrapper visually-hidden js-card-panel-activity">
<div class="card-panel">
<h6 class="card-panel__header">Message Activty<span class="subheader reply-number">2 replies</span></h6>
<ul class="card-panel--activity-list">
<li class="card-panel--activity-list__item js-activity-list__item--photo has-post-image">
<div class="message-card-panel-wrapper visually-hidden js-message-card-panel-activity">
<div class="message-card-panel">
<h6 class="message-card-panel__header">Message Activty<span class="subheader reply-number">2 replies</span></h6>
<ul class="message-card-panel--activity-list">
<li class="message-card-panel--activity-list__item js-activity-list__item--photo has-post-image">

<div class="card-panel__post-image">
<div class="message-card-panel__post-image">
<img src="{{imageurl "car-tree.jpg"}}" alt="" />
</div> <!-- end .card-panel__post-image -->
</div> <!-- end .message-card-panel__post-image -->
<!-- TODO: generate class in js, based on whether or not we have a post image -->
<div class="card-panel__details">
<div class="message-card-panel__details">
<div class="subheader"><a class="username" href="#">Ushbot</a> shared a photo</div>
<div class="details">"Winter storm claims another vehicle."</div>
</div> <!-- end .card-panel__details -->
</div> <!-- end .message-card-panel__details -->
<!-- TODO: generate class in js, based on whether or not we have a post image -->
<div class="card-panel__meta">
<p class="underline location"> <i class="fa fa-map-marker"></i><a href="" class="js-card-action-location">California</a></p>
<div class="message-card-panel__meta">
<p class="underline location"> <i class="fa fa-map-marker"></i><a href="" class="js-message-card-action-location">California</a></p>
<p class="datetime"> <i class="fa fa-clock-o"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .card-panel__meta -->
</div> <!-- end .message-card-panel__meta -->

<div class="view-post"><a href="#">View Post</a></div>
</li>

<li class="card-panel--activity-list__item js-activity-list__item--location">
<li class="message-card-panel--activity-list__item js-activity-list__item--location">

<div class="card-panel__details">
<div class="message-card-panel__details">
<div class="subheader"><a class="username" href="#">Ushbot</a> added a location</div>
<div class="details">Lamu, Kenya</div>
</div> <!-- end .card-panel__details -->
</div> <!-- end .message-card-panel__details -->

<div class="card-panel__meta card-panel__meta--location">
<p class="underline location"> <i class="fa fa-map-marker"></i><a href="" class="js-card-action-location">California</a></p>
<div class="message-card-panel__meta message-card-panel__meta--location">
<p class="underline location"> <i class="fa fa-map-marker"></i><a href="" class="js-message-card-action-location">California</a></p>
<p class="datetime"> <i class="fa fa-clock-o"></i>{{ datetime-calendar created }}</p>
</div> <!-- end .card-panel__meta -->
</div> <!-- end .message-card-panel__meta -->

<div class="view-post"><a href="#">View Post</a></div>
</li>
</ul> <!-- end .card-panel-activity-list -->
</ul> <!-- end .message-card-panel-activity-list -->

</div> <!-- end .card-panel -->
</div> <!-- end .card-panel-wrapper -->
</div> <!-- end .message-card-panel -->
</div> <!-- end .message-card-panel-wrapper -->


{{! TODO: make this action possible }}
<div class="card-panel-wrapper visually-hidden js-card-panel-reply">
<div class="card-panel">
<h6 class="card-panel__header">Send a Response</h6>
<div class="message-card-panel-wrapper visually-hidden js-message-card-panel-reply">
<div class="message-card-panel">
<h6 class="message-card-panel__header">Send a Response</h6>
<textarea class="textarea" name="Name" rows="2" cols="40"></textarea>
<div class="card-panel__button-wrap">
<button type="submit" class="card-reply-autofill js-location-autofill"><i class="fa fa-reply"></i> location</button>
<button type="submit" class="card-reply-autofill card-reply-autofill--more-info js-more-info-autofill"><i class="fa fa-reply"></i> more info</button>
<div class="message-card-panel__button-wrap">
<button type="submit" class="message-card-reply-autofill js-location-autofill"><i class="fa fa-reply"></i> location</button>
<button type="submit" class="message-card-reply-autofill message-card-reply-autofill--more-info js-more-info-autofill"><i class="fa fa-reply"></i> more info</button>
</div>
<button type="submit" class="card-reply-send-button">Send</button>
</div> <!-- end .card-panel -->
</div> <!-- end .card-panel-wrapper -->
<button type="submit" class="message-card-reply-send-button">Send</button>
</div> <!-- end .message-card-panel -->
</div> <!-- end .message-card-panel-wrapper -->

<!-- end panel partials -->
</div> <!-- end .card-wrapper -->
</div> <!-- end .message-card-wrapper -->
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h3>Messages Configuration</h3>
</div> <!-- end .tab-nav -->

<div class="list-view-wrapper">
<ul class="list-view-data-provider-list data-provider-card__list">
<ul class="list-view-data-provider-list card-list">
</ul>
</div> <!-- end .list-view-wrapper -->

Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div class="data-provider-card {{#unless enabled}}disabled{{/unless}}">
<div class="data-provider-hero-unit">
<h6 class="data-provider-header">{{ name }}</h6>
<div class="data-provider-icon">
<div class="card {{#unless enabled}}disabled{{/unless}}">
<div class="card-hero-unit">
<h6 class="card-header">{{ name }}</h6>
<div class="card-icon">
<i class="sms-icon"></i>
</div> <!-- end .data-provider-icon -->
</div> <!-- end .data-provider-hero-unit -->
</div> <!-- end .card-icon -->
</div> <!-- end .card-hero-unit -->

<div class="data-provider-body">
<div class="data-provider-status-wrapper">
<a class="data-provider-status js-provider-status">{{#if enabled}}Disable{{else}}Enable{{/if}}</a>
<a class="data-provider-configure" href="#messages/settings/{{id}}"><i class="fa fa-cogs"></i> Configure</a>
<div class="card-body">
<div class="card-status-wrapper">
<a class="card-status js-provider-status">{{#if enabled}}Disable{{else}}Enable{{/if}}</a>
<a class="card-configure" href="#messages/settings/{{id}}"><i class="fa fa-cogs"></i> Configure</a>
</div>
</div> <!-- end .data-provider-body -->
</div> <!-- end .card-body -->

</div> <!-- end .data-provider-card -->
</div> <!-- end .card-card -->
11 changes: 0 additions & 11 deletions modules/UshahidiUI/media/js/app/templates/settings/FormEditor.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,6 @@ <h3><a href="#settings/forms">Forms</a> &raquo; {{name}} <small>{{id}}: {{type}}
</div> <!-- end .actions-bar-admin data-provider-list -->
</div> <!-- end .actions-bar data-provider-list -->

<div class="list-view-filter--alt">
<div class="row">

<form role="form" action="">
<div class="list-view-filter-info--alt">
</div> <!-- end .list-view-filter-info data-providers -->
</form>

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

<div class="list-view-wrapper">
<div class="available-attributes"></div>
<div class="form-attributes"></div>
Expand Down
19 changes: 4 additions & 15 deletions modules/UshahidiUI/media/js/app/templates/settings/FormList.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,11 @@ <h3><i class="fa fa-magic"></i> Form Wizard</h3>
</div> <!-- end .actions-bar-admin data-provider-list -->
</div> <!-- end .actions-bar data-provider-list -->

<div class="list-view-filter--alt">
<div class="row">

<form role="form" action="">
<div class="list-view-filter-info--alt">
</div> <!-- end .list-view-filter-info data-providers -->
</form>

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

<div class="list-view-wrapper">
<p class="list-view-create-new">
Do you want to <a href="#settings/forms/new" class="js-stub">create a new form</a> or edit a form?
</p>
<ul class="list-view-form-list">
<p class="list-view-create-new">
Do you want to <a href="#settings/forms/new" class="js-stub">create a new form</a> or edit a form?
</p>
<ul class="list-view-form-list card-list--form-wizard">
</ul>
</div> <!-- end .list-view-wrapper -->

Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<article>
<a href="#settings/forms/{{id}}">{{name}}</a> <small><tt>type:</tt> {{type}}</small>
</article>
<div class="card {{#unless enabled}}disabled{{/unless}}">

<div class="card-hero-unit--form-wizard">
<h6 class="card-header--form-wizard">{{name}}</h6>
</div> <!-- end .card-hero-unit-form-wizard -->

<div class="card-body">
<div class="card-status-wrapper">
<a href="#settings/forms/{{id}}" class="card-configure">Edit</a>
<small class="form-type"><tt>type :</tt> {{type}}</small>
</div>
</div> <!-- end .card-body -->

</div> <!-- end .card -->
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,9 @@ define(['underscore', 'handlebars', 'marionette', 'alertify', 'forms/UshahidiFor
var $form = this.form.$el;

// add a cancel button to the form
$form.append('<button class="js-cancel-edit">Cancel</button>');

// add a submit button to the form
// todo: use "submitButton: title" in Backbone.Form v0.15
$form.append('<button type="submit">Save</button>');
// add a submit button to the form
// todo: use "submitButton: title" in Backbone.Form v0.15
$form.append('<div class="form-edit-cancel"><button class="cancel-edit-button js-cancel-edit">Cancel</button></div><div class="form-edit-save"><button class="save-edit-button" type="submit">Save</button></div>');

// hide the field editor form until activated
this.$('.js-form')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ define(['App', 'marionette', 'handlebars', 'underscore', 'views/settings/DataPro
return Marionette.CollectionView.extend(
{
tagName : 'ul',
className : 'data-provider-card__list',
className : 'card-list',

itemView: DataProviderListItem,

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ define(['App','handlebars', 'marionette', 'alertify', 'text!templates/settings/D
//Template HTML string
template: Handlebars.compile(template),
tagName: 'li',
className: 'list-view-data-provider data-provider-card__list-item',
className: 'list-view-data-provider card-list__item',

// Value to track if checkbox for this post has been selected
selected : false,
Expand All @@ -53,7 +53,7 @@ define(['App','handlebars', 'marionette', 'alertify', 'text!templates/settings/D
{
e.preventDefault();

var $el = this.$('.data-provider-card');
var $el = this.$('.card');

$el.toggleClass('disabled');

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import "modules/card";
@import "modules/edit";
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*------------------------------------*\
CONTENTS
\*------------------------------------*/
/**
* FORM WIZARD...............form wizard create/edit/config
* FORM WIZARD SETTINGS...............form wizard settings
*/




/*------------------------------------*\
$FORM WIZARD
\*------------------------------------*/

.card-list--form-wizard {
@extend .card-list;
}

.card-hero-unit--form-wizard {
@extend %card-hero-unit;
background-color: $secondary-color;
padding: 20px 0;
}

.card-header--form-wizard {
@extend %card-header;
color: $body-font-color;
}

.form-type {
display: block;
text-align: center;
}
Loading

0 comments on commit 80ee4ce

Please sign in to comment.