diff --git a/modules/UshahidiUI/media/js/app/templates/messages/MessageListItem.html b/modules/UshahidiUI/media/js/app/templates/messages/MessageListItem.html index 5986a989dd..64bcdcbee7 100644 --- a/modules/UshahidiUI/media/js/app/templates/messages/MessageListItem.html +++ b/modules/UshahidiUI/media/js/app/templates/messages/MessageListItem.html @@ -1,13 +1,13 @@ -
+
-
-
+
+
{{! TODO: add support for real map}} -
-
+
+
-
+
{{! 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}} @@ -33,105 +33,105 @@

{{location}}

{{/if}}

{{ datetime-calendar created }}

-
-
+
+
{{! TODO: increase this size before landing, "10" is only for testing }} {{ prune message 10 }} {{message}} -
+
- + -
- +
+ +
+ actions
+ +
{{! TODO: fill this with real content }} - + + {{! TODO: make this action possible }} - + diff --git a/modules/UshahidiUI/media/js/app/templates/settings/DataProviderList.html b/modules/UshahidiUI/media/js/app/templates/settings/DataProviderList.html index 7078f2d1b2..5998b975d8 100644 --- a/modules/UshahidiUI/media/js/app/templates/settings/DataProviderList.html +++ b/modules/UshahidiUI/media/js/app/templates/settings/DataProviderList.html @@ -63,7 +63,7 @@

Messages Configuration

-
diff --git a/modules/UshahidiUI/media/js/app/templates/settings/DataProviderListItem.html b/modules/UshahidiUI/media/js/app/templates/settings/DataProviderListItem.html index 3312969d14..1802c51ead 100644 --- a/modules/UshahidiUI/media/js/app/templates/settings/DataProviderListItem.html +++ b/modules/UshahidiUI/media/js/app/templates/settings/DataProviderListItem.html @@ -1,16 +1,16 @@ -
-
-
{{ name }}
-
+
+
+
{{ name }}
+
-
-
+
+
-
-
- {{#if enabled}}Disable{{else}}Enable{{/if}} - Configure +
+
+ {{#if enabled}}Disable{{else}}Enable{{/if}} + Configure
-
+
-
+
diff --git a/modules/UshahidiUI/media/js/app/templates/settings/FormEditor.html b/modules/UshahidiUI/media/js/app/templates/settings/FormEditor.html index 8daa12c0a9..d3fefc9b59 100644 --- a/modules/UshahidiUI/media/js/app/templates/settings/FormEditor.html +++ b/modules/UshahidiUI/media/js/app/templates/settings/FormEditor.html @@ -7,17 +7,6 @@

Forms » {{name}} {{id}}: {{type}}

-
-
- -
-
-
-
- -
-
-
diff --git a/modules/UshahidiUI/media/js/app/templates/settings/FormList.html b/modules/UshahidiUI/media/js/app/templates/settings/FormList.html index b4b55e703a..15de20ec3c 100644 --- a/modules/UshahidiUI/media/js/app/templates/settings/FormList.html +++ b/modules/UshahidiUI/media/js/app/templates/settings/FormList.html @@ -7,22 +7,11 @@

Form Wizard

-
-
- -
-
-
-
- -
-
-
-

- Do you want to create a new form or edit a form? -

-
diff --git a/modules/UshahidiUI/media/js/app/templates/settings/FormListItem.html b/modules/UshahidiUI/media/js/app/templates/settings/FormListItem.html index 5539400a5e..21f697bbeb 100644 --- a/modules/UshahidiUI/media/js/app/templates/settings/FormListItem.html +++ b/modules/UshahidiUI/media/js/app/templates/settings/FormListItem.html @@ -1,3 +1,14 @@ -
- {{name}} type: {{type}} -
+
+ +
+
{{name}}
+
+ +
+
+ Edit + type : {{type}} +
+
+ +
diff --git a/modules/UshahidiUI/media/js/app/views/settings/AttributeListItem.js b/modules/UshahidiUI/media/js/app/views/settings/AttributeListItem.js index e0a2f81484..0395986a53 100644 --- a/modules/UshahidiUI/media/js/app/views/settings/AttributeListItem.js +++ b/modules/UshahidiUI/media/js/app/views/settings/AttributeListItem.js @@ -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(''); - - // add a submit button to the form - // todo: use "submitButton: title" in Backbone.Form v0.15 - $form.append(''); + // add a submit button to the form + // todo: use "submitButton: title" in Backbone.Form v0.15 + $form.append('
'); // hide the field editor form until activated this.$('.js-form') diff --git a/modules/UshahidiUI/media/js/app/views/settings/DataProviderList.js b/modules/UshahidiUI/media/js/app/views/settings/DataProviderList.js index 73882b1903..707f34c514 100644 --- a/modules/UshahidiUI/media/js/app/views/settings/DataProviderList.js +++ b/modules/UshahidiUI/media/js/app/views/settings/DataProviderList.js @@ -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, diff --git a/modules/UshahidiUI/media/js/app/views/settings/DataProviderListItem.js b/modules/UshahidiUI/media/js/app/views/settings/DataProviderListItem.js index effe8fa043..efd0a623f5 100644 --- a/modules/UshahidiUI/media/js/app/views/settings/DataProviderListItem.js +++ b/modules/UshahidiUI/media/js/app/views/settings/DataProviderListItem.js @@ -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, @@ -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'); diff --git a/modules/UshahidiUI/media/scss/modules/form-wizard/_form-wizard.scss b/modules/UshahidiUI/media/scss/modules/form-wizard/_form-wizard.scss new file mode 100644 index 0000000000..ab58620b7b --- /dev/null +++ b/modules/UshahidiUI/media/scss/modules/form-wizard/_form-wizard.scss @@ -0,0 +1,2 @@ +@import "modules/card"; +@import "modules/edit"; diff --git a/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_card.scss b/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_card.scss new file mode 100644 index 0000000000..3e70702506 --- /dev/null +++ b/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_card.scss @@ -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; +} diff --git a/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_edit.scss b/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_edit.scss new file mode 100644 index 0000000000..8fe0ffd25c --- /dev/null +++ b/modules/UshahidiUI/media/scss/modules/form-wizard/modules/_edit.scss @@ -0,0 +1,43 @@ +/*------------------------------------*\ + CONTENTS +\*------------------------------------*/ +/* +* CUSTOM FORM EDIT...............custom form fields +*/ + + + + +/*------------------------------------*\ + $CUSTOM FORM EDIT +\*------------------------------------*/ + +.ui-sortable { + @include grid-column(12, $collapse: true); + li { + @include grid-column(12, $collapse: true); + } +} + +.form-edit-cancel { + @include grid-column(6); + padding-left: 0; + @media #{$small} { + @include grid-column(3); + padding-left: 0; + } + .cancel-edit-button { + @include button($padding: $button-med, $bg: $alert-color, $radius: true, $full-width: true); + } +} +.form-edit-save { + @include grid-column(6); + padding-right: 0; + @media #{$small} { + @include grid-column(3); + padding-right: 0; + } + .save-edit-button { + @include button($padding: $button-med, $bg: $success-color, $radius: true, $full-width: true); + } +} diff --git a/modules/UshahidiUI/media/scss/modules/forms/_forms.scss b/modules/UshahidiUI/media/scss/modules/forms/_forms.scss index 377eb7cee3..7d960cf2db 100644 --- a/modules/UshahidiUI/media/scss/modules/forms/_forms.scss +++ b/modules/UshahidiUI/media/scss/modules/forms/_forms.scss @@ -26,18 +26,29 @@ input[type="radio"], select { margin: 0 3px 1em 0; } -label.checkbox { - width:100%; - cursor:pointer; - overflow: hidden; - margin: 0; - - input[type=checkbox] { - display:none; margin : 0; - } - - i { - font-weight: bold; +label { + font-size: $h6-font-size; + font-family: $header-font-family; + font-weight: $header-font-weight; + font-style: $header-font-style; + color: $header-font-color; + text-rendering: $header-text-rendering; + margin-top: $header-top-margin; + margin-bottom: $header-bottom-margin; + line-height: $header-line-height - em-calc(3); + &.checkbox { + width:100%; + cursor:pointer; + overflow: hidden; + margin: 0; + + input[type=checkbox] { + display:none; margin : 0; + } + + i { + font-weight: bold; + } } } diff --git a/modules/UshahidiUI/media/scss/partials/card/_card-global.scss b/modules/UshahidiUI/media/scss/modules/messages/card/_card-global.scss similarity index 89% rename from modules/UshahidiUI/media/scss/partials/card/_card-global.scss rename to modules/UshahidiUI/media/scss/modules/messages/card/_card-global.scss index 627b221dc5..31c83f956e 100644 --- a/modules/UshahidiUI/media/scss/partials/card/_card-global.scss +++ b/modules/UshahidiUI/media/scss/modules/messages/card/_card-global.scss @@ -2,19 +2,19 @@ CONTENTS \*------------------------------------*/ /** - * CARD WRAPPER............... - * CARD DETAILS...............card details/main content - * CARD ACTIONS...............card actions + * MESSAGE CARD WRAPPER............... + * MESSAGE CARD DETAILS...............message card details/main content + * MESSAGE CARD ACTIONS...............message card actions */ /*------------------------------------*\ - $CARD WRAPPER + $MESSAGE CARD WRAPPER \*------------------------------------*/ -.card-wrapper { +.message-card-wrapper { @include grid-column(12, $collapse: true); margin-bottom: 20px; @media #{$medium} { @@ -22,7 +22,7 @@ } } -.card-wrapper--selected { +.message-card-wrapper--selected { @include grid-column(12, $collapse: true); opacity: .7; box-shadow: 0 0 10px rgba($black, .6); @@ -30,10 +30,10 @@ } /*------------------------------------*\ - $CARD DETAILS + $MESSAGE CARD DETAILS \*------------------------------------*/ -.card { +.message-card { @include grid-column(12, $collapse: true); padding: 15px; background-color: $secondary-color; @@ -148,10 +148,10 @@ /*------------------------------------*\ - $CARD ACTIONS + $MESSAGE CARD ACTIONS \*------------------------------------*/ -.card-actions-wrapper { +.message-card-actions-wrapper { @include grid-column(12, $collapse: true); background-color: $white; border-right: 2px solid darken($secondary-color, 10); @@ -177,9 +177,9 @@ } } -.card-actions-list { +.message-card-actions-list { @include block-grid($per-row: 4); - .card-actions-list__item { + .message-card-actions-list__item { font-size: emCalc(13px); text-align: center; padding: emCalc(15px); diff --git a/modules/UshahidiUI/media/scss/modules/messages/card/_card.scss b/modules/UshahidiUI/media/scss/modules/messages/card/_card.scss new file mode 100644 index 0000000000..e40eb3d745 --- /dev/null +++ b/modules/UshahidiUI/media/scss/modules/messages/card/_card.scss @@ -0,0 +1,10 @@ +//global card styles +@import "card-global.scss"; + +//global card panel styles +@import "panels/panel.scss"; + +//individual card panel styles +@import "panels/activity-panel.scss"; +@import "panels/reply-panel.scss"; +@import "panels/map-panel.scss"; diff --git a/modules/UshahidiUI/media/scss/partials/card/panels/_activity-panel.scss b/modules/UshahidiUI/media/scss/modules/messages/card/panels/_activity-panel.scss similarity index 100% rename from modules/UshahidiUI/media/scss/partials/card/panels/_activity-panel.scss rename to modules/UshahidiUI/media/scss/modules/messages/card/panels/_activity-panel.scss diff --git a/modules/UshahidiUI/media/scss/partials/card/panels/_map-panel.scss b/modules/UshahidiUI/media/scss/modules/messages/card/panels/_map-panel.scss similarity index 100% rename from modules/UshahidiUI/media/scss/partials/card/panels/_map-panel.scss rename to modules/UshahidiUI/media/scss/modules/messages/card/panels/_map-panel.scss diff --git a/modules/UshahidiUI/media/scss/partials/card/panels/_panel.scss b/modules/UshahidiUI/media/scss/modules/messages/card/panels/_panel.scss similarity index 100% rename from modules/UshahidiUI/media/scss/partials/card/panels/_panel.scss rename to modules/UshahidiUI/media/scss/modules/messages/card/panels/_panel.scss diff --git a/modules/UshahidiUI/media/scss/partials/card/panels/_reply-panel.scss b/modules/UshahidiUI/media/scss/modules/messages/card/panels/_reply-panel.scss similarity index 100% rename from modules/UshahidiUI/media/scss/partials/card/panels/_reply-panel.scss rename to modules/UshahidiUI/media/scss/modules/messages/card/panels/_reply-panel.scss diff --git a/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-card.scss b/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-card.scss index a2526182de..e69de29bb2 100644 --- a/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-card.scss +++ b/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-card.scss @@ -1,180 +0,0 @@ -/*------------------------------------*\ - CONTENTS -\*------------------------------------*/ -/** -* DATA PROVIDER CARD ENABLED...............enabled card styles -* DATA PROVIDER CARD DISABLED...............disabled card styles -*/ - - - - -/*------------------------------------*\ - $DATA PROVIDER CARD ENABLED -\*------------------------------------*/ - -.data-provider-card__list { - @include block-grid(1); - @media #{$mobile} { - @include block-grid(2); - } - @media #{$small} { - @include block-grid(3); - } - @media #{$medium} { - @include block-grid(4); - } -} - -.data-provider-card__list-item { - position: relative; -} - -.data-provider-card { - box-shadow: 0px 1px 2px rgba(lighten($darkGray, 30), 0.5); -} - -.data-provider-hero-unit { - position: relative; - background-color: $success-color; - padding: 5px 0 30px; - border-bottom: 5px solid darken($accent-color, 30); - .data-provider-header { - color: $white; - text-align: center; - text-transform: uppercase; - letter-spacing: .01em; - font-size: 14px; - font-weight: bold; - } -} - -.data-provider-icon { - position: absolute; - top: 40px; - left: 0; - right: 0; - margin: 0 auto; - height: 50px; - width: 50px; - background-color: $secondary-color; - border-radius: 100px; - border: 3px solid darken($accent-color, 30); - [class*='-icon'] { - position: relative; - top: 8px; - left: 8px; - padding: 0; - display: inline-block; - font-family: FontAwesome; - font-size: 30px; - font-style: normal; - font-weight: normal; - line-height: 1; - &:before { - content: "\f00c"; - color: $success-color; - } - } -} - -.data-provider-body { - background-color: $white; - padding: 60px 0 20px; -} - -.data-provider-status-wrapper { - @include grid-column(5, $center: true); - @media #{$mobile} { - @include grid-column(8, $center: true); - } - @media #{$xlarge} { - @include grid-column(7 , $center: true); - } -} - -.data-provider-status { - @include button($padding: $button-sml, $bg: $secondary-color, $disabled: true, $radius: true, $full-width: true); - opacity: 1; - color: $accent-color; -} - -.data-provider-configure { - @include button($padding: $button-sml, $bg: $secondary-color, $disabled: false, $radius: true, $full-width: true); - opacity: 1; - color: $accent-color; -} - -/*------------------------------------*\ - $DATA PROVIDER CARD DISABLED -\*------------------------------------*/ - -.disabled { - .data-provider-hero-unit { - background-color: $secondary-color; - border-bottom: 5px solid rgba($accent-color, .5); - .data-provider-header { - color: $accent-color; - } - } - .data-provider-status { - @include button($padding: $button-sml, $bg: $success-color, $disabled: true, $radius: true, $full-width: false); - opacity: 1; - cursor: pointer; - } - .data-provider-icon { - border: 3px solid rgba($accent-color, .5);; - [class*='-icon'] { - &:before { - color: $accent-color; - opacity: .5; - } - } - } -} - -.disabled .sms-icon { - top: 5px; - left: 15px; - padding: 0; - font-size: 35px; - &:before { - content: "\f10b"; - } -} -.disabled .email-icon { - top: 10px; - left: 10px; - padding: 0; - font-size: 24px; - &:before { - content: "\f0e0"; - } -} -.disabled .twitter-icon { - top: 9px; - left: 9px; - padding: 0; - font-size: 30px; - &:before { - content: "\f099"; - } -} -.disabled .rss-icon { - top: 10px; - left: 13px; - padding: 0; - font-size: 26px; - &:before { - content: "\f09e"; - } -} -.disabled .instagram-icon { - top: 9px; - left: 11px; - padding: 0; - font-size: 26px; - &:before { - content: "\f16d"; - } -} diff --git a/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-forms.scss b/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-forms.scss index c11c9d9740..eb75c07be6 100644 --- a/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-forms.scss +++ b/modules/UshahidiUI/media/scss/modules/messages/config/modules/_data-provider-forms.scss @@ -14,17 +14,6 @@ .data-provider-config-form { @include grid-column(12); - label { - font-size: $h6-font-size; - font-family: $header-font-family; - font-weight: $header-font-weight; - font-style: $header-font-style; - color: $header-font-color; - text-rendering: $header-text-rendering; - margin-top: $header-top-margin; - margin-bottom: $header-bottom-margin; - line-height: $header-line-height - em-calc(3); - } } [class*='field-'] { diff --git a/modules/UshahidiUI/media/scss/partials/card/_card.scss b/modules/UshahidiUI/media/scss/partials/card/_card.scss index e40eb3d745..cc129d9062 100644 --- a/modules/UshahidiUI/media/scss/partials/card/_card.scss +++ b/modules/UshahidiUI/media/scss/partials/card/_card.scss @@ -1,10 +1,183 @@ -//global card styles -@import "card-global.scss"; +/*------------------------------------*\ + CONTENTS +\*------------------------------------*/ +/** +* CARD ENABLED...............enabled card styles +* CARD DISABLED...............disabled card styles +*/ -//global card panel styles -@import "panels/panel.scss"; -//individual card panel styles -@import "panels/activity-panel.scss"; -@import "panels/reply-panel.scss"; -@import "panels/map-panel.scss"; + + +/*------------------------------------*\ + $CARD ENABLED +\*------------------------------------*/ + +.card-list { + @include block-grid(1); + @media #{$mobile} { + @include block-grid(2); + } + @media #{$small} { + @include block-grid(3); + } + @media #{$medium} { + @include block-grid(4); + } +} + +.card-list__item { + position: relative; +} + +.card { + box-shadow: 0px 1px 2px rgba(lighten($darkGray, 30), 0.5); +} + +%card-hero-unit, +.card-hero-unit { + position: relative; + background-color: $success-color; + padding: 5px 0 30px; + border-bottom: 5px solid darken($accent-color, 30); +} + +%card-header, +.card-header { + color: $white; + text-align: center; + text-transform: uppercase; + letter-spacing: .01em; + font-size: 14px; + font-weight: bold; +} + +.card-icon { + position: absolute; + top: 40px; + left: 0; + right: 0; + margin: 0 auto; + height: 50px; + width: 50px; + background-color: $secondary-color; + border-radius: 100px; + border: 3px solid darken($accent-color, 30); + [class*='-icon'] { + position: relative; + top: 8px; + left: 8px; + padding: 0; + display: inline-block; + font-family: FontAwesome; + font-size: 30px; + font-style: normal; + font-weight: normal; + line-height: 1; + &:before { + content: "\f00c"; + color: $success-color; + } + } +} + +.card-body { + background-color: $white; + padding: 60px 0 20px; +} + +.card-status-wrapper { + @include grid-column(5, $center: true); + @media #{$mobile} { + @include grid-column(8, $center: true); + } + @media #{$xlarge} { + @include grid-column(7 , $center: true); + } +} + +.card-status { + @include button($padding: $button-sml, $bg: $secondary-color, $disabled: true, $radius: true, $full-width: true); + opacity: 1; + color: $accent-color; +} + +.card-configure { + @include button($padding: $button-sml, $bg: $secondary-color, $disabled: false, $radius: true, $full-width: true); + opacity: 1; + color: $accent-color; +} + +/*------------------------------------*\ + $CARD DISABLED +\*------------------------------------*/ + +.disabled { + .card-hero-unit { + background-color: $secondary-color; + border-bottom: 5px solid rgba($accent-color, .5); + .card-header { + color: $accent-color; + } + } + .card-status { + @include button($padding: $button-sml, $bg: $success-color, $disabled: true, $radius: true, $full-width: false); + opacity: 1; + cursor: pointer; + } + .card-icon { + border: 3px solid rgba($accent-color, .5);; + [class*='-icon'] { + &:before { + color: $accent-color; + opacity: .5; + } + } + } +} + +.disabled .sms-icon { + top: 5px; + left: 15px; + padding: 0; + font-size: 35px; + &:before { + content: "\f10b"; + } +} +.disabled .email-icon { + top: 10px; + left: 10px; + padding: 0; + font-size: 24px; + &:before { + content: "\f0e0"; + } +} +.disabled .twitter-icon { + top: 9px; + left: 9px; + padding: 0; + font-size: 30px; + &:before { + content: "\f099"; + } +} +.disabled .rss-icon { + top: 10px; + left: 13px; + padding: 0; + font-size: 26px; + &:before { + content: "\f09e"; + } +} +.disabled .instagram-icon { + top: 9px; + left: 11px; + padding: 0; + font-size: 26px; + &:before { + content: "\f16d"; + } +} diff --git a/modules/UshahidiUI/media/scss/style.scss b/modules/UshahidiUI/media/scss/style.scss index 767052f205..5fa931f731 100644 --- a/modules/UshahidiUI/media/scss/style.scss +++ b/modules/UshahidiUI/media/scss/style.scss @@ -165,6 +165,7 @@ /*MESSAGES*/ @import "modules/messages/listings/messages"; @import "modules/messages/config/message-config"; +@import "modules/messages/card/card"; /*TOOLS*/ @import "modules/tools/manage-users/manage-users"; @@ -198,6 +199,10 @@ /*API EXPLORER*/ @import "modules/api-explorer/json-syntax-highlight"; +/*FORM WIZARD*/ +@import "modules/form-wizard/form-wizard"; + + /*------------------------------------*\