From c3c015ec30bfb4735e7674b5f4916aca8fce4e08 Mon Sep 17 00:00:00 2001 From: Loic Date: Tue, 9 Feb 2016 15:35:00 +0200 Subject: [PATCH] [#1897] WIP --- akvo/rsr/static/scripts-src/results-data.js | 99 ++++++--------- akvo/rsr/static/scripts-src/results-data.jsx | 107 +++++++--------- akvo/rsr/static/styles-src/main.css | 106 ++++++++++++---- akvo/rsr/static/styles-src/main.scss | 122 +++++++++++++++---- 4 files changed, 262 insertions(+), 172 deletions(-) diff --git a/akvo/rsr/static/scripts-src/results-data.js b/akvo/rsr/static/scripts-src/results-data.js index 87412893a8..a41ffe5f87 100644 --- a/akvo/rsr/static/scripts-src/results-data.js +++ b/akvo/rsr/static/scripts-src/results-data.js @@ -257,14 +257,14 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', } else { headerLeft = React.DOM.div( {className:"col-xs-9"}, React.DOM.span( {className:"update-user"}, this.props.update.user_details.first_name, " ", this.props.update.user_details.last_name), - React.DOM.span( {className:"update-created-at"}, " | ", displayDate(this.props.update.created_at)) + React.DOM.span( {className:"update-created-at"}, displayDate(this.props.update.created_at)) ) } return ( React.DOM.div( {className:"row update-entry-container-header"}, headerLeft, - React.DOM.div( {className:"col-xs-3"}, + React.DOM.div( {className:"col-xs-3 text-right"}, React.DOM.span( {className:"update-status"}, " ", this.props.update.status_display) ) ) @@ -279,7 +279,7 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', if (isNaN(updateData) || isNaN(relativeData) || relativeData === 0) { return ( - React.DOM.div(null, + React.DOM.div( {className:"upActualValue"}, React.DOM.span( {className:"update-actual-value-text"}, i18n.actual_value,": " ), React.DOM.span( {className:"update-actual-value-data"}, this.state.data),React.DOM.br(null) ) @@ -287,7 +287,7 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', } else { relativeData = relativeData > 0 ? '+' + relativeData.toString() : relativeData.toString(); return ( - React.DOM.div(null, + React.DOM.div( {className:"upActualValue"}, React.DOM.span( {className:"update-actual-value-text"}, i18n.actual_value,": " ), React.DOM.span( {className:"update-actual-value-data"}, updateData, " " ), React.DOM.span( {className:"update-relative-value"}, "(",relativeData,")") @@ -433,13 +433,12 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', var addCommentInput; if (addComments) { - addCommentInput = React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-8"}, - React.DOM.label( {htmlFor:inputId}, i18n.comment), - React.DOM.input( {className:"form-control", value:this.state.comment, id:inputId, placeholder:i18n.add_comment_placeholder, onChange:this.handleCommentChange} ) - ), - React.DOM.div( {className:"col-xs-3"}, - React.DOM.a( {onClick:this.addComment}, i18n.add_comment) + addCommentInput = React.DOM.div(null, + React.DOM.div( {className:"input-group"}, + React.DOM.input( {className:"form-control", value:this.state.comment, id:inputId, placeholder:i18n.add_comment_placeholder, onChange:this.handleCommentChange} ), + React.DOM.span( {className:"input-group-btn"}, + React.DOM.button( {onClick:this.addComment, type:"submit", className:"btn btn-default"}, i18n.add_comment) + ) ) ); } else { @@ -459,27 +458,17 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', switch(this.props.update.status) { case 'P': return ( - React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-9"}, - React.DOM.a( {onClick:this.switchEdit}, i18n.cancel) - ), - React.DOM.div( {className:"col-xs-3"}, - React.DOM.a( {onClick:this.approve}, i18n.approve) - ) + React.DOM.ul( {className:"nav nav-pills bottomRow navbar-right"}, + React.DOM.li( {role:"presentation", className:"cancelUpdate"}, React.DOM.a( {onClick:this.switchEdit}, i18n.cancel)), + React.DOM.li( {role:"presentation", className:"approveUpdate"}, React.DOM.a( {onClick:this.approve, className:"btn btn-default btn-xs"}, i18n.approve)) ) ); default: return ( - React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-7"}, - React.DOM.a( {onClick:this.switchEdit}, i18n.cancel) - ), - React.DOM.div( {className:"col-xs-2"}, - React.DOM.a( {onClick:this.saveUpdate}, i18n.save) - ), - React.DOM.div( {className:"col-xs-3"}, - React.DOM.a( {onClick:this.askForApproval}, i18n.submit_for_approval) - ) + React.DOM.ul( {className:"nav nav-pills bottomRow navbar-right"}, + React.DOM.li( {role:"presentation", className:"cancelUpdate"}, React.DOM.a( {onClick:this.switchEdit}, i18n.cancel)), + React.DOM.li( {role:"presentation", className:"saveUpdate"}, React.DOM.a( {onClick:this.saveUpdate, className:"btn btn-default btn-xs"}, i18n.save)), + React.DOM.li( {role:"presentation", className:"submitUpdate"}, React.DOM.a( {onClick:this.askForApproval, className:"btn btn-default btn-xs"}, i18n.submit_for_approval)) ) ); } @@ -487,16 +476,10 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', switch(this.props.update.status) { case 'P': return ( - React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-7"}, - React.DOM.a( {onClick:this.returnForRevision}, i18n.return_for_revision) - ), - React.DOM.div( {className:"col-xs-2"}, - React.DOM.a( {onClick:this.switchEdit}, i18n.edit_update) - ), - React.DOM.div( {className:"col-xs-3"}, - React.DOM.a( {onClick:this.approve}, i18n.approve) - ) + React.DOM.ul( {className:"nav nav-pills bottomRow navbar-right"}, + React.DOM.li( {role:"presentation", className:"returnUpdate"}, React.DOM.a( {onClick:this.returnForRevision, className:"btn btn-default btn-sm"}, i18n.return_for_revision)), + React.DOM.li( {role:"presentation", className:"editUpdate"}, React.DOM.a( {onClick:this.switchEdit, className:"btn btn-default btn-xs"}, i18n.edit_update)), + React.DOM.li( {role:"presentation", className:"approveUpdate"}, React.DOM.a( {onClick:this.approve, className:"btn btn-default btn-xs"}, i18n.approve)) ) ); case 'A': @@ -505,11 +488,8 @@ var UpdateEntry = React.createClass({displayName: 'UpdateEntry', ); default: return ( - React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-9"}), - React.DOM.div( {className:"col-xs-3"}, - React.DOM.a( {onClick:this.switchEdit}, i18n.edit_update) - ) + React.DOM.ul( {className:"nav nav-pills bottomRow navbar-right"}, + React.DOM.li( {role:"presentation", className:"editUpdate"}, React.DOM.a( {onClick:this.switchEdit, className:"btn btn-default btn-xs"}, i18n.edit_update)) ) ); } @@ -588,8 +568,8 @@ var IndicatorPeriodMain = React.createClass({displayName: 'IndicatorPeriodMain', renderNewUpdate: function() { if (!this.props.selectedPeriod.locked) { return ( - React.DOM.div( {className:"col-xs-3 new-update"}, - React.DOM.a( {onClick:this.addNewUpdate}, i18n.new_update) + React.DOM.div( {className:"new-update"}, + React.DOM.a( {onClick:this.addNewUpdate, className:"btn btn-xs btn-default"}, React.DOM.i( {className:"fa fa-plus"}), " ", i18n.new_update) ) ); } else if (isAdmin) { @@ -623,24 +603,24 @@ var IndicatorPeriodMain = React.createClass({displayName: 'IndicatorPeriodMain', render: function() { return ( React.DOM.div( {className:"indicator-period opacity-transition"}, - React.DOM.div( {className:"row"}, - React.DOM.div( {className:"col-xs-9"}, + React.DOM.div( {className:"indicTitle"}, React.DOM.h4( {className:"indicator-title"}, i18n.indicator_period,": ", displayDate(this.props.selectedPeriod.period_start), " - ", displayDate(this.props.selectedPeriod.period_end) - ) - ), + ), this.renderNewUpdate() ), - React.DOM.dl( {className:"period-target-actual"}, - React.DOM.div( {className:"period-target"}, - React.DOM.dt(null, i18n.target_value), - React.DOM.dd(null, this.props.selectedPeriod.target_value) - ), - React.DOM.div( {className:"period-actual"}, - React.DOM.dt(null, i18n.actual_value), - React.DOM.dd(null, - this.props.selectedPeriod.actual_value, - this.renderPercentageComplete() + React.DOM.div( {className:"period-target-actual"}, + React.DOM.div( {className:"periodValues"}, + React.DOM.div( {className:"period-target"}, + i18n.target_value, + React.DOM.span(null, this.props.selectedPeriod.target_value) + ), + React.DOM.div( {className:"period-actual"}, + i18n.actual_value, + React.DOM.span(null, + this.props.selectedPeriod.actual_value, + this.renderPercentageComplete() + ) ) ), React.createElement(UpdatesList, { @@ -903,7 +883,6 @@ var MainContent = React.createClass({displayName: 'MainContent', return ( React.DOM.div( {className:"indicator opacity-transition"}, React.DOM.h4( {className:"indicator-title"}, - React.DOM.i( {className:"fa fa-tachometer"} ), this.props.selectedIndicator.title, "(",this.showMeasure(),")" ), diff --git a/akvo/rsr/static/scripts-src/results-data.jsx b/akvo/rsr/static/scripts-src/results-data.jsx index 71820bc70c..4326377fb3 100644 --- a/akvo/rsr/static/scripts-src/results-data.jsx +++ b/akvo/rsr/static/scripts-src/results-data.jsx @@ -257,14 +257,14 @@ var UpdateEntry = React.createClass({ } else { headerLeft =
{this.props.update.user_details.first_name} {this.props.update.user_details.last_name} - | {displayDate(this.props.update.created_at)} + {displayDate(this.props.update.created_at)}
} return (
{headerLeft} -
+
{this.props.update.status_display}
@@ -279,7 +279,7 @@ var UpdateEntry = React.createClass({ if (isNaN(updateData) || isNaN(relativeData) || relativeData === 0) { return ( -
+
{i18n.actual_value}: {this.state.data}
@@ -287,7 +287,7 @@ var UpdateEntry = React.createClass({ } else { relativeData = relativeData > 0 ? '+' + relativeData.toString() : relativeData.toString(); return ( -
+
{i18n.actual_value}: {updateData} ({relativeData}) @@ -433,13 +433,12 @@ var UpdateEntry = React.createClass({ var addCommentInput; if (addComments) { - addCommentInput =
-
- + addCommentInput =
+
-
-
- {i18n.add_comment} + + +
; } else { @@ -459,45 +458,29 @@ var UpdateEntry = React.createClass({ switch(this.props.update.status) { case 'P': return ( - + ); default: return ( - + ); } } else { switch(this.props.update.status) { case 'P': return ( - + ); case 'A': return ( @@ -505,12 +488,9 @@ var UpdateEntry = React.createClass({ ); default: return ( -
-
- -
+ ); } } @@ -588,8 +568,8 @@ var IndicatorPeriodMain = React.createClass({ renderNewUpdate: function() { if (!this.props.selectedPeriod.locked) { return ( -
- {i18n.new_update} + ); } else if (isAdmin) { @@ -623,25 +603,25 @@ var IndicatorPeriodMain = React.createClass({ render: function() { return (
-
-
+

{i18n.indicator_period}: {displayDate(this.props.selectedPeriod.period_start)} - {displayDate(this.props.selectedPeriod.period_end)}

-
{this.renderNewUpdate()}
-
-
-
{i18n.target_value}
-
{this.props.selectedPeriod.target_value}
-
-
-
{i18n.actual_value}
-
- {this.props.selectedPeriod.actual_value} - {this.renderPercentageComplete()} -
+
+
+
+ {i18n.target_value} + {this.props.selectedPeriod.target_value} +
+
+ {i18n.actual_value} + + {this.props.selectedPeriod.actual_value} + {this.renderPercentageComplete()} + +
{React.createElement(UpdatesList, { addEditingData: this.props.addEditingData, @@ -654,7 +634,7 @@ var IndicatorPeriodMain = React.createClass({ selectPeriod: this.props.selectPeriod, reloadPeriod: this.props.reloadPeriod })} -
+
); } @@ -903,7 +883,6 @@ var MainContent = React.createClass({ return (

- {this.props.selectedIndicator.title} ({this.showMeasure()})

diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css index b9f8d0a337..2659f770cf 100755 --- a/akvo/rsr/static/styles-src/main.css +++ b/akvo/rsr/static/styles-src/main.css @@ -2018,7 +2018,7 @@ body.translationBarActive div.skiptranslate ~ #map { .projectEdit select + span + label, .projectEdit select + ul + label { position: absolute; - top: 0px; + top: -20px; transition: top 0.7s ease, opacity 0.7s ease; opacity: 1; font-size: 13px; @@ -2241,29 +2241,33 @@ body.translationBarActive div.skiptranslate ~ #map { display: -webkit-flex; display: flex; padding-left: 0; } - .results .baseline { + .results .baseline, .results .periodValues { padding: 2em 0; position: relative; width: 100%; margin-bottom: 55px; } .results .baseline .baseline-value, - .results .baseline .baseline-year { + .results .baseline .baseline-year, .results .baseline .period-target, .results .baseline .period-actual, .results .periodValues .baseline-value, + .results .periodValues .baseline-year, .results .periodValues .period-target, .results .periodValues .period-actual { width: 50%; display: inline-block; padding: 0 0 0 5px; } .results .baseline .baseline-value span:first-child, - .results .baseline .baseline-year span:first-child { + .results .baseline .baseline-year span:first-child, .results .baseline .period-target span:first-child, .results .baseline .period-actual span:first-child, .results .periodValues .baseline-value span:first-child, + .results .periodValues .baseline-year span:first-child, .results .periodValues .period-target span:first-child, .results .periodValues .period-actual span:first-child { color: #818386; display: block; } .results .baseline .baseline-value span:nth-child(2), - .results .baseline .baseline-year span:nth-child(2) { - font-size: 1.5em; + .results .baseline .baseline-year span:nth-child(2), .results .baseline .period-target span:nth-child(2), .results .baseline .period-actual span:nth-child(2), .results .periodValues .baseline-value span:nth-child(2), + .results .periodValues .baseline-year span:nth-child(2), .results .periodValues .period-target span:nth-child(2), .results .periodValues .period-actual span:nth-child(2) { + font-size: 1.6em; display: block; font-weight: bold; - color: #515050; } - .results .baseline .baseline-value { + color: #515050; + margin-left: 5px; } + .results .baseline .baseline-value, .results .baseline .period-target, .results .periodValues .baseline-value, .results .periodValues .period-target { float: left; } - .results .baseline .baseline-year { + .results .baseline .baseline-year, .results .baseline .period-actual, .results .periodValues .baseline-year, .results .periodValues .period-actual { float: right; } .results .sidebar { width: 30%; @@ -2313,7 +2317,7 @@ body.translationBarActive div.skiptranslate ~ #map { transition: all 0.2s linear; } .results .sidebar .result-nav:hover { opacity: 1; - background: rgba(114, 205, 255, 0.3); } + background: rgba(114, 205, 255, 0.1); } .results .sidebar .result-nav .result-nav-summary { padding: 25px 0 10px 10px; } .results .sidebar .result-nav .result-nav-summary h3 { @@ -2395,10 +2399,11 @@ body.translationBarActive div.skiptranslate ~ #map { background: rgba(44, 42, 116, 0.5); } .results .sidebar .result-nav.expanded .result-nav-full div .indicator-nav.active { background: rgba(44, 42, 116, 0.8) url(../images/carretWhite.svg) center right no-repeat; - border-left: 8px solid rgba(174, 9, 34, 0); + border-left: 10px solid rgba(174, 9, 34, 0); background-size: 5% auto; } .results .sidebar .result-nav.expanded .result-nav-full div .indicator-nav.active h4 { - color: white; } + color: white; + font-weight: bold; } .results .sidebar .result-nav.expanded .result-nav-full div .indicator-nav:last-child { margin-bottom: 0; } .results .sidebar .result-nav.expanded .result-nav-full div a h4 { @@ -2418,14 +2423,21 @@ body.translationBarActive div.skiptranslate ~ #map { vertical-align: top; overflow-y: scroll; padding: 0.25em 1em; - background-color: white; + background-color: rgba(245, 245, 245, 0.2); -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } - .results .indicator-container .indicator-title i { - display: none; } + .results .indicator-container .indicator-period .indicTitle { + position: relative; } + .results .indicator-container .indicator-period .indicTitle .indicator-title i { + display: none; } + .results .indicator-container .indicator-period .indicTitle .new-update { + position: absolute; + display: inline-block; + top: 0; + right: 0; } .results .indicator-container .indicator-periods-title { font-size: 1em; color: #202024; @@ -2718,16 +2730,60 @@ body.translationBarActive div.skiptranslate ~ #map { .results label.imageUpload input[type="file"], .results label.fileUpload input[type="file"] { position: fixed; top: -1000px; } - .results .update-entry-container { - padding: 2em; - margin-bottom: 2em; - position: relative; - background-color: #ececec; } - .results .update-entry-container:first-child { - border-left: 4px solid #ae0922; } - .results .update-entry-container.edit-in-progress { - background-color: #D1E6D1; - border-left: none; } + .results .update-container { + background: rgba(32, 32, 36, 0); + border: 1px solid rgba(32, 32, 36, 0.1); + padding: 0 1em 0.75em 1em; + margin-bottom: 20px; } + .results .update-container .update-entry-container { + margin-bottom: 2em; + position: relative; } + .results .update-container .update-entry-container.edit-in-progress { + background-color: #D1E6D1; + border-left: none; } + .results .update-container .update-entry-container .update-entry-container-header { + background: rgba(32, 32, 36, 0.1); + padding: 0.75em 0; } + .results .update-container .update-entry-container .update-entry-container-header .update-user { + color: #2c2a74; } + .results .update-container .update-entry-container .update-entry-container-header .update-created-at { + margin-left: 15px; } + .results .update-container .update-entry-container .update-entry-container-header .update-status { + color: #ee3124; } + .results .update-container .update-entry-container .comments .input-group { + margin-top: 20px; + /* button { + background: $akvoBlack; + color:white; + &:hover { + background: $akvoPurple; + } + }*/ } + .results .update-container .update-entry-container .comments .comment { + margin-top: 20px; + margin-bottom: 20px; } + .results .update-container .update-entry-container .comments .comment .comment-header { + margin-bottom: 5px; + font-weight: bold; } + .results .update-container .update-entry-container .bottomRow { + margin-top: 20px; + padding: 0.75em; + position: relative; } + .results .update-container .update-entry-container .bottomRow .btn { + background: #202024; + color: white; } + .results .update-container .update-entry-container .bottomRow .btn:hover { + background: #2c2a74; } + .results .update-container .update-entry-container .upActualValue { + margin-top: 20px; + margin-bottom: 15px; } + .results .update-container .update-entry-container .upActualValue .update-actual-value-text { + color: rgba(32, 32, 36, 0.4); } + .results .update-container .update-entry-container .upActualValue .update-actual-value-data { + font-weight: bold; } + .results .update-container .update-entry-container .upActualValue .update-relative-value { + margin-left: 5px; + font-weight: bold; } .results .update-dialog-container.pending-new-update .update-entry-container { background-color: #D1E6D1; } .results .update-dialog-container.pending-new-update .update-entry-container:first-child { diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss index 8e0d6ada0a..688f7bb4f0 100755 --- a/akvo/rsr/static/styles-src/main.scss +++ b/akvo/rsr/static/styles-src/main.scss @@ -2490,7 +2490,7 @@ body { & + span + label, & + ul + label { position: absolute; - top: 0px; + top: -20px; transition: top 0.7s ease, opacity 0.7s ease; opacity: 1; // Some nice styling @@ -2729,13 +2729,13 @@ body { @include display-flex; padding-left: 0; } - .baseline { + .baseline, .periodValues { padding: 2em 0; position: relative; width: 100%; margin-bottom: 55px; .baseline-value, - .baseline-year { + .baseline-year, .period-target, .period-actual { width: 50%; display: inline-block; padding: 0 0 0 5px; @@ -2744,16 +2744,17 @@ body { display: block; } span:nth-child(2) { - font-size: 1.5em; + font-size: 1.6em; display: block; font-weight: bold; color: rgb(81, 80, 80); + margin-left: 5px; } } - .baseline-value { + .baseline-value, .period-target { float: left; } - .baseline-year { + .baseline-year, .period-actual { float: right; } } @@ -2802,7 +2803,7 @@ body { @include transition(all 0.2s linear); &:hover { opacity: 1; - background: rgba($rsrBlue2, 0.3); + background: rgba($rsrBlue2, 0.1); } .result-nav-summary { padding: 25px 0 10px 10px; @@ -2911,10 +2912,11 @@ body { } &.active { background: rgba($akvoPurple, 0.8) url(../images/carretWhite.svg) center right no-repeat; - border-left: 8px solid rgba(174, 9, 34, 0); + border-left: 10px solid rgba(174, 9, 34, 0); background-size: 5% auto; h4 { color: white; + font-weight: bold; } } &:last-child { @@ -2948,11 +2950,22 @@ body { vertical-align: top; overflow-y: scroll; padding: 0.25em 1em; - background-color: rgb(255, 255, 255); + background-color: rgba(245, 245, 245,0.2); @include flex(1); - .indicator-title { - i { - display: none; + .indicator-period { + .indicTitle{ + position: relative; + .indicator-title { + i { + display: none; + } + } + .new-update { + position: absolute; + display: inline-block; + top:0; + right:0; + } } } .indicator-periods-title { @@ -3323,17 +3336,80 @@ body { top: -1000px; } } - .update-entry-container { - padding: 2em; - margin-bottom: 2em; - position: relative; - background-color: #ececec; - &:first-child { - border-left: 4px solid #ae0922; - } - &.edit-in-progress { - background-color: #D1E6D1; - border-left: none; + .update-container{ + background: rgba($akvoBlack,0); + border:1px solid rgba($akvoBlack,0.1); + padding:0 1em 0.75em 1em; + margin-bottom: 20px; + .update-entry-container { + margin-bottom: 2em; + position: relative; + &.edit-in-progress { + background-color: #D1E6D1; + border-left: none; + } + .update-entry-container-header { + background: rgba($akvoBlack,0.1); + padding:0.75em 0; + .update-user {color:$akvoPurple;} + .update-created-at {margin-left: 15px;} + .update-status {color:$akvoTvRed;} + } + .comments { + .input-group { + margin-top: 20px; + /* button { + background: $akvoBlack; + color:white; + &:hover { + background: $akvoPurple; + } + }*/ + } + .comment { + margin-top: 20px; + margin-bottom: 20px; + .comment-header { + margin-bottom:5px; + font-weight: bold; + } + .comment-text { + + } + } + } + .bottomRow { + margin-top: 20px; + padding:0.75em; + position: relative; + .btn { + background: $akvoBlack; + color:white; + &:hover { + background: $akvoPurple; + } + } + .cancelUpdate {} + .editUpdate {} + .saveUpdate {} + .returnUpdate {} + .submitUpdate {} + .approveUpdate {} + } + .upActualValue { + margin-top: 20px; + margin-bottom: 15px; + .update-actual-value-text { + color:rgba($akvoBlack,0.4); + } + .update-actual-value-data { + font-weight: bold; + } + .update-relative-value { + margin-left: 5px; + font-weight: bold; + } + } } } .update-dialog-container {