diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css
index 799a29378d..d212207354 100755
--- a/akvo/rsr/static/styles-src/main.css
+++ b/akvo/rsr/static/styles-src/main.css
@@ -2049,11 +2049,18 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
color: #202024; }
.results .sidebar .result-nav.expanded ~ .result-nav:before {
background-color: transparent; }
- .results .sidebar .result-nav .result-title .fa {
- float: right;
- font-size: 1.3em;
- margin-right: 6px;
- text-shadow: 0 1px 0 white; }
+ .results .sidebar .result-nav .result-title {
+ position: relative; }
+ .results .sidebar .result-nav .result-title .fa {
+ float: right;
+ font-size: 1.3em;
+ margin-right: 6px;
+ text-shadow: 0 1px 0 white; }
+ .results .sidebar .result-nav .result-title > span {
+ max-width: 80%;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden; }
.results .sidebar .result-nav .result-indicator-count {
color: #bcbca6;
margin-top: -10px;
@@ -2082,8 +2089,8 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
.results .sidebar .result-nav.expanded .result-nav-full .indicator-nav {
padding: 0.25em 0em 0.75em 0.5em;
/* Transparent border means text doesn't shift when
- ** we add a colored border to active elements.
- */
+ ** we add a colored border to active elements.
+ */
border-left: 4px solid transparent; }
.results .sidebar .result-nav.expanded .result-nav-full .indicator-nav.active {
background-color: #ececec;
@@ -2232,9 +2239,9 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
background-color: rgba(0, 0, 0, 0.2); }
.results .indicator-bar-display-container .indicator-bar-progress-container {
/* The progress box has non-zero width, so add some
- ** padding to ensure it doesn't overflow the parent
- ** container.
- */
+ ** padding to ensure it doesn't overflow the parent
+ ** container.
+ */
position: relative;
height: 100%; }
.results .indicator-bar-display-container .indicator-bar-progress-container .indicator-bar-progress {
@@ -2310,9 +2317,9 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
border-right: none; }
.results .update-dialog-container td .update-entry-container .indicator-bar-display-container .indicator-bar-progress-container {
/* The progress box has non-zero width, so add some
- ** padding to ensure it doesn't overflow the parent
- ** container.
- */
+ ** padding to ensure it doesn't overflow the parent
+ ** container.
+ */
position: relative;
height: 100%; }
.results .update-dialog-container td .update-entry-container .indicator-bar-display-container .indicator-bar-progress-container .indicator-bar-progress {
diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss
index b4d9ee12e6..66ff7fae43 100755
--- a/akvo/rsr/static/styles-src/main.scss
+++ b/akvo/rsr/static/styles-src/main.scss
@@ -904,6 +904,7 @@ h4.detailedInfo {
@include responsive(xtra-small-max-screens) {
display: none;
}
+
margin-top: -30px;
z-index: 99;
opacity: 0.8;
@@ -1333,7 +1334,7 @@ header {
padding: 15px 0;
background: $rsrHeader;
border-bottom: 1px solid rgba($rsrGreen, 0.15);
- margin:-10px 0 15px 0;
+ margin: -10px 0 15px 0;
@include box-shadow(inset 0 2px 6px -5px rgba($akvoBlack, 0.5));
h1 {
margin-top: 10px;
@@ -1661,12 +1662,12 @@ div.textBlock {
.budgetItem {
margin-top: 12px;
width: 60%;
-
&:nth-child(1), &:nth-child(2) {
margin-top: 0;
}
}
}
+
/* Project hierarchy */
.project-hierarchy-window {
border: 0.1em solid #d3d3d3;
@@ -2525,7 +2526,6 @@ body {
padding: 0.5em;
margin: 0 1em;
color: $anchorLink;
-
&:hover, &.selected {
border-bottom: 3px solid $newResultColor;
color: $newResultColor;
@@ -2539,684 +2539,643 @@ body {
/* Results framework display */
.results {
- position: relative;
-
- * {
- box-sizing: border-box;
- }
-
- article {
- margin: 0 1em;
- @include border-radius(3px);
- overflow: hidden;
- }
-
- .clickable {
- cursor: pointer;
-
- &:hover {
- opacity: 0.8;
- }
-
- &:active {
- opacity: 0.6;
+ position: relative;
+ * {
+ box-sizing: border-box;
}
- }
-
- .bg-transition {
- @include transition(background-color 0.25s ease-in-out);
- }
-
- .border-transition {
- @include transition(border 0.25s ease-in-out);
- }
-
- .opacity-transition {
- @include transition(opacity 0.25s ease-in-out);
- }
-
- .results-container {
- @include display-flex();
- }
- .sidebar {
- width: 25%;
- min-width: 200px;
- overflow-y: auto;
- background-color: rgb(239, 239, 229);
- vertical-align: top;
- border: 1px solid rgb(224, 225, 226);
-
- .result-nav {
- padding: 1px 0.75em 1.75em 0.75em;
- &:before {
- height: 1px;
- background-color: rgb(224, 225, 226);
- width: 100%;
- display: block;
- content: '';
- margin: 0 auto;
- @include transition(background-color 0.25s ease-in-out);
- }
- &:last-child {
- padding-bottom: 1em;
- }
- }
-
- .result-nav-header {
- padding: 0.25em 0.75em 0 0.75em;
- h3 {
- color: rgba($akvoBlack, 0.4);
- font-size: 0.9em;
- text-transform: uppercase;
- margin-top: 5px;
- }
+ article {
+ margin: 0 1em;
+ @include border-radius(3px);
+ overflow: hidden;
}
-
- .result-nav {
- cursor: pointer;
- .fa-chevron-up {
- display: none;
- }
-
- h3 {
- font-size: 1.1em;
- color: $secondary6;
- @include noWrapTxt;
- }
- &.expanded {
- &:before {
- background-color: transparent;
+ .clickable {
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
}
- h3 {
- color: $akvoBlack;
+ &:active {
+ opacity: 0.6;
}
- ~.result-nav {
+ }
+ .bg-transition {
+ @include transition(background-color 0.25s ease-in-out);
+ }
+ .border-transition {
+ @include transition(border 0.25s ease-in-out);
+ }
+ .opacity-transition {
+ @include transition(opacity 0.25s ease-in-out);
+ }
+ .results-container {
+ @include display-flex;
+ }
+ .sidebar {
+ width: 25%;
+ min-width: 200px;
+ overflow-y: auto;
+ background-color: rgb(239, 239, 229);
+ vertical-align: top;
+ border: 1px solid rgb(224, 225, 226);
+ .result-nav {
+ padding: 1px 0.75em 1.75em 0.75em;
&:before {
- background-color: transparent;
- }
- }
- }
- .result-title {
- .fa {
- float: right;
- font-size: 1.3em;
- margin-right: 6px;
- text-shadow: 0 1px 0 rgb(255, 255, 255);
- }
- }
-
- .result-indicator-count {
- color: rgb(188, 188, 166);
- margin-top: -10px;
- display: block;
- }
-
- .result-nav-full {
- display: none;
- }
-
- .indicator-text {
- display: none;
- }
-
- &.expanded {
- background: white;
- .fa-chevron-down {
- display: none;
- }
- .fa-chevron-up {
- display: block;
- }
- .indicator-text {
- display: initial;
- }
- .indicator-count {
- display: none;
- }
- .result-nav-full {
- display: block;
- cursor: pointer;
- padding: 0.5em 0 0 5px;
- background-color: white;
- margin-top: 1em;
- background-color: transparent;
-
- .indicator-nav {
- padding: 0.25em 0em 0.75em 0.5em;
- /* Transparent border means text doesn't shift when
- ** we add a colored border to active elements.
- */
- border-left: 4px solid rgba(0, 0, 0, 0);
-
- &.active {
- background-color: rgb(236, 236, 236);
- border-left: 4px solid rgb(174, 9, 34);
+ height: 1px;
+ background-color: rgb(224, 225, 226);
+ width: 100%;
+ display: block;
+ content: '';
+ margin: 0 auto;
+ @include transition(background-color 0.25s ease-in-out);
}
-
&:last-child {
- margin-bottom: 0;
+ padding-bottom: 1em;
}
- }
- a {
- h4 {
- font-size: 1.1em;
- color: rgb(100, 100, 100);
- margin-bottom: 1px;
- @include noWrapTxt;
- }
- &.active {
- h4 {
- color: #ae0922;
- }
- }
- }
- .last-update {
- font-size: 0.9em;
- color: rgb(170, 170, 170);
- }
- }
- }
- }
- }
- .indicator-container {
- vertical-align: top;
- overflow-y: scroll;
- padding: 0.25em 1em;
- background-color: rgb(255, 255, 255);
- border: 1px solid rgb(241, 241, 242);
- @include flex(1);
-
- .result-summary {
- display: none;
- opacity: 0;
-
- h4 {
- font-size: 0.9em;
- color: #aaaaaa;
- font-variant: small-caps;
- text-transform: lowercase;
- }
-
- h3 {
- font-size: 1.2em;
- color: #424c2b;
- margin-bottom: 4px;
- }
-
- .result-parent {
- font-size: 0.8em;
- color: #aaaaaa;
- }
-
- .indicator-link {
- cursor: pointer;
-
- &:hover {
- opacity: 0.8;
- }
-
- &:active {
- opacity: 0.6;
- }
- }
- .result-indicators {
- margin-top: 20px;
- ul {
- list-style-type: none;
- padding-left: 5px;
- li {
- color: $anchorLink;
- }
- }
- }
- }
-
- .indicator-group {
- padding: 0;
- display: none;
-
- h4.indicator-title {
- color: rgb(174, 9, 34);
- font-size: 1em;
- .glyphicon {
- float: left;
- margin-right: 4px;
- }
- }
-
- .baseline {
- padding: 2em 0;
- .baseline-value, .baseline-year {
- width: 30%;
- display: inline-block;
- padding: 0 0 0 5%;
-
- dt {
- color: rgb(129, 131, 134);
- }
- dd {
- font-size: 1.5em;
- font-weight: bold;
- color: rgb(81, 80, 80);
- }
}
- }
-
- .indicator-periods-title {
- font-size: 1em;
- color: rgb(81, 80, 80);
- }
-
- .table {
- padding: 0.5em 0.25em;
- /*background-color: rgb(235,235,231);*/
- tbody {
- &.indicator-period {
- border-top: 1px solid #E7E8E8;
- }
- &.expanded {
- background-color: white;
- }
- }
- thead {
- font-weight: normal;
- color: rgb(192, 192, 192);
- tr {
- background-color: #ececec;
- }
+ .result-nav-header {
+ padding: 0.25em 0.75em 0 0.75em;
+ h3 {
+ color: rgba($akvoBlack, 0.4);
+ font-size: 0.9em;
+ text-transform: uppercase;
+ margin-top: 5px;
+ }
}
-
- tr, td {
- border: none;
- color: rgb(172, 172, 172);
+ .result-nav {
+ cursor: pointer;
+ .fa-chevron-up {
+ display: none;
+ }
+ h3 {
+ font-size: 1.1em;
+ color: $secondary6;
+ @include noWrapTxt;
+ }
+ &.expanded {
+ &:before {
+ background-color: transparent;
+ }
+ h3 {
+ color: $akvoBlack;
+ }
+ ~ .result-nav {
+ &:before {
+ background-color: transparent;
+ }
+ }
+ }
+ .result-title {
+ position: relative;
+ .fa {
+ float: right;
+ font-size: 1.3em;
+ margin-right: 6px;
+ text-shadow: 0 1px 0 rgb(255, 255, 255);
+ }
+ > span {
+ max-width: 80%;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ .result-indicator-count {
+ color: rgb(188, 188, 166);
+ margin-top: -10px;
+ display: block;
+ }
+ .result-nav-full {
+ display: none;
+ }
+ .indicator-text {
+ display: none;
+ }
+ &.expanded {
+ background: white;
+ .fa-chevron-down {
+ display: none;
+ }
+ .fa-chevron-up {
+ display: block;
+ }
+ .indicator-text {
+ display: initial;
+ }
+ .indicator-count {
+ display: none;
+ }
+ .result-nav-full {
+ display: block;
+ cursor: pointer;
+ padding: 0.5em 0 0 5px;
+ background-color: white;
+ margin-top: 1em;
+ background-color: transparent;
+ .indicator-nav {
+ padding: 0.25em 0em 0.75em 0.5em;
+ /* Transparent border means text doesn't shift when
+ ** we add a colored border to active elements.
+ */
+ border-left: 4px solid rgba(0, 0, 0, 0);
+ &.active {
+ background-color: rgb(236, 236, 236);
+ border-left: 4px solid rgb(174, 9, 34);
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ a {
+ h4 {
+ font-size: 1.1em;
+ color: rgb(100, 100, 100);
+ margin-bottom: 1px;
+ @include noWrapTxt;
+ }
+ &.active {
+ h4 {
+ color: #ae0922;
+ }
+ }
+ }
+ .last-update {
+ font-size: 0.9em;
+ color: rgb(170, 170, 170);
+ }
+ }
+ }
}
-
- tr {
- min-height: 125px;
- .add-button {
+ }
+ .indicator-container {
+ vertical-align: top;
+ overflow-y: scroll;
+ padding: 0.25em 1em;
+ background-color: rgb(255, 255, 255);
+ border: 1px solid rgb(241, 241, 242);
+ @include flex(1);
+ .result-summary {
display: none;
- }
- &.expanded ~ .add-button-tr td {
- text-align: right;
- .add-button {
- border: none;
- display: inline-block;
- margin-right: 1.4em;
+ opacity: 0;
+ h4 {
+ font-size: 0.9em;
+ color: #aaaaaa;
+ font-variant: small-caps;
+ text-transform: lowercase;
+ }
+ h3 {
+ font-size: 1.2em;
+ color: #424c2b;
+ margin-bottom: 4px;
+ }
+ .result-parent {
+ font-size: 0.8em;
+ color: #aaaaaa;
+ }
+ .indicator-link {
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
+ }
+ &:active {
+ opacity: 0.6;
+ }
+ }
+ .result-indicators {
+ margin-top: 20px;
+ ul {
+ list-style-type: none;
+ padding-left: 5px;
+ li {
+ color: $anchorLink;
+ }
+ }
}
- }
- }
-
- td {
- vertical-align: middle;
- &.fromTime, &.toTime, &.target-td, &.expand-td {
- white-space: nowrap;
- }
- &.indicator-bar-td {
- width: 55%;
- }
}
-
- .expand-indicator-period {
- .fa-chevron-up {
+ .indicator-group {
+ padding: 0;
display: none;
- }
- .fa-chevron-down {
- display: initial;
- }
- &.expanded {
- .fa-chevron-up {
- display: initial;
+ h4.indicator-title {
+ color: rgb(174, 9, 34);
+ font-size: 1em;
+ .glyphicon {
+ float: left;
+ margin-right: 4px;
+ }
+ }
+ .baseline {
+ padding: 2em 0;
+ .baseline-value, .baseline-year {
+ width: 30%;
+ display: inline-block;
+ padding: 0 0 0 5%;
+ dt {
+ color: rgb(129, 131, 134);
+ }
+ dd {
+ font-size: 1.5em;
+ font-weight: bold;
+ color: rgb(81, 80, 80);
+ }
+ }
+ }
+ .indicator-periods-title {
+ font-size: 1em;
+ color: rgb(81, 80, 80);
+ }
+ .table {
+ padding: 0.5em 0.25em;
+ /*background-color: rgb(235,235,231);*/
+ tbody {
+ &.indicator-period {
+ border-top: 1px solid #E7E8E8;
+ }
+ &.expanded {
+ background-color: white;
+ }
+ }
+ thead {
+ font-weight: normal;
+ color: rgb(192, 192, 192);
+ tr {
+ background-color: #ececec;
+ }
+ }
+ tr, td {
+ border: none;
+ color: rgb(172, 172, 172);
+ }
+ tr {
+ min-height: 125px;
+ .add-button {
+ display: none;
+ }
+ &.expanded ~ .add-button-tr td {
+ text-align: right;
+ .add-button {
+ border: none;
+ display: inline-block;
+ margin-right: 1.4em;
+ }
+ }
+ }
+ td {
+ vertical-align: middle;
+ &.fromTime, &.toTime, &.target-td, &.expand-td {
+ white-space: nowrap;
+ }
+ &.indicator-bar-td {
+ width: 55%;
+ }
+ }
+ .expand-indicator-period {
+ .fa-chevron-up {
+ display: none;
+ }
+ .fa-chevron-down {
+ display: initial;
+ }
+ &.expanded {
+ .fa-chevron-up {
+ display: initial;
+ }
+ .fa-chevron-down {
+ display: none;
+ }
+ }
+ }
}
- .fa-chevron-down {
- display: none;
+ .indicator {
+ display: none;
}
- }
}
- }
-
- .indicator {
- display: none;
- }
}
- }
- /* Styling for the indicator period progress bar */
- .indicator-bar-td,
- .target-td {
- height: 80px;
- padding: 0;
- }
- .indicator-bar-display-container {
- position: relative;
- height: 100%;
- margin-left: 15px;
- margin-right: 15px;
- .indicator-bar, .indicator-bar-progress-amount {
- position: absolute;
- top: 38px;
- bottom: 24px;
- left: 0px;
- height: 8px;
- @include border-radius(2px);
- border: 1px solid #CDDFEF;
- }
- .indicator-bar {
- background-color: #E2EBF5;
- right: 0px;
- }
- .indicator-bar-progress-amount {
- background-color: rgba(0,0,0,0.2);
- }
- .indicator-bar-progress-container {
- /* The progress box has non-zero width, so add some
- ** padding to ensure it doesn't overflow the parent
- ** container.
- */
- position: relative;
- height: 100%;
-
- .indicator-bar-progress {
- position: absolute;
- width: 3px;
- height: 23px;
- top: 30px;
- background-color: #A3C7E3;
- text-align: center;
- }
- }
- }
- .target-td {
- vertical-align: middle;
- }
- .indicator-bar-progress-complete-container {
- .indicator-bar-progress-complete {
- padding-left: 15px;
- font-size: 1.1em;
- font-weight: normal;
- color: rgb(81, 80, 80);
- vertical-align: bottom;
- }
- .indicator-bar-progress-text {
- padding-left: 15px;
- font-size: 1.1em;
- font-weight: bold;
- color: #A3C7E3;
- vertical-align: bottom;
- }
- }
-
- .indicator-container .indicator-group .table tbody {
- background-color: white;
- border-bottom: none !important;
-
- .indicator-bar-td * {
- /*display: none;*/
- }
- }
-
- .update-dialog-container {
- td {
- padding: 8px 2em;
- .update-entry-container {
- padding: 2em;
- margin-bottom: 2em;
+ /* Styling for the indicator period progress bar */
+ .indicator-bar-td,
+ .target-td {
+ height: 80px;
+ padding: 0;
+ }
+ .indicator-bar-display-container {
position: relative;
- background-color: #ececec;
- .update-exceed-target {
- margin: 10px 0 0 0;
- input {
- margin-right: 10px;
- }
- label {
- margin-right: 10px;
- color: rgba($akvoBlack, 0.5);
- }
- }
- .indicator-bar-display-container {
- position: relative;
- height: 100%;
- margin-left: 15px;
- margin-right: 15px;
- .indicator-bar-progress-text {
- position: absolute;
- bottom: -18px;
- width: 30px;
- margin-left: -15px;
- text-align: center;
- color: #B5B5B5;
- &:last-child {
- color: #A3C7E3;
- }
- }
- .indicator-bar, .indicator-bar-progress-amount {
+ height: 100%;
+ margin-left: 15px;
+ margin-right: 15px;
+ .indicator-bar, .indicator-bar-progress-amount {
position: absolute;
top: 38px;
bottom: 24px;
left: 0px;
- height: 14px;
+ height: 8px;
@include border-radius(2px);
border: 1px solid #CDDFEF;
- }
- .indicator-bar {
- background-color: #fff;
+ }
+ .indicator-bar {
+ background-color: #E2EBF5;
right: 0px;
- }
- .indicator-bar-progress-amount {
- background-color: #fff;
- border-right: none;
- }
- .indicator-bar-progress-container {
+ }
+ .indicator-bar-progress-amount {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+ .indicator-bar-progress-container {
/* The progress box has non-zero width, so add some
** padding to ensure it doesn't overflow the parent
** container.
*/
position: relative;
height: 100%;
-
.indicator-bar-progress {
- position: absolute;
- width: 3px;
- height: 20px;
- top: 35px;
- background-color: #B5B5B5;
- &:nth-last-child(2) {
- background-color: #A3C7E3;
- }
- text-align: center;
- &.update-dialog-timeline-marker {
- border: none;
- }
+ position: absolute;
+ width: 3px;
+ height: 23px;
+ top: 30px;
+ background-color: #A3C7E3;
+ text-align: center;
}
- }
}
- .target-td {
- vertical-align: middle;
- }
- .indicator-bar-progress-complete-container {
- .indicator-bar-progress-complete {
+ }
+ .target-td {
+ vertical-align: middle;
+ }
+ .indicator-bar-progress-complete-container {
+ .indicator-bar-progress-complete {
padding-left: 15px;
- font-size: 1.5em;
+ font-size: 1.1em;
font-weight: normal;
color: rgb(81, 80, 80);
vertical-align: bottom;
- }
- .indicator-bar-progress-text {
+ }
+ .indicator-bar-progress-text {
padding-left: 15px;
- font-size: 1.5em;
+ font-size: 1.1em;
font-weight: bold;
color: #A3C7E3;
vertical-align: bottom;
- z-index: 19999;
- }
}
- &:last-child {
- margin-bottom: 0;
- }
-
- .edit-button {
- position: absolute;
- height: 20px;
- width: 20px;
- top: 15px;
- right: 10px;
- color: $akvoBlack;
- font-size: 1.5em;
- &.activated {
- display: none;
- }
- }
-
- .delete-button {
- position: absolute;
- height: 20px;
- width: 20px;
- top: 13px;
- right: 35px;
- font-size: 1.5em;
- color: $akvoBlack;
- &.activated {
- display: none;
- }
- }
-
- .update-date {
- display: inline-block;
- text-align: left;
- width: 50%;
- }
- .update-name {
- display: inline-block;
- text-align: left;
- width: 30%;
- margin-right: 10%;
- color: $akvoBlack;
- }
- .update-timeline {
- display: inline-block;
- width: 75%;
- height: 80px;
- padding-top: 1em;
- z-index: 99;
- position: relative;
- }
- .update-target {
- position: absolute;
- margin-top: 45px;
- display: inline-block;
- width: 24%;
- height: 80px;
- text-align: center;
- span {
- font-size: 1.1em;
- color: rgb(81, 80, 80);
- vertical-align: text-top;
- &.update-target-actual {
- padding-left: 15px;
- font-size: 1.1em;
- font-weight: bold;
- color: #A3C7E3;
- vertical-align: bottom;
- }
- }
- }
- .update-description {
- padding: 0.5em;
- margin: 20px auto 30px;
- &.editable {
- background: whitesmoke;
- border: 1px solid #A3C7E3;
- }
- .update-photo {
- float: right;
- width: 150px;
- height: 100px;
- background-size: cover;
- }
- }
- .save-button {
- position: absolute;
- display: none;
- right: 10px;
- bottom: 10px;
- &.active {
- display: inline-block;
- padding: 3px 7px;
- color: white;
- background-color: $akvoBlack;
- @include border-radius(2px);
- text-align: center;
- }
- }
- .cancel-button {
- position: absolute;
- display: none;
- right: 60px;
- bottom: 10px;
- &.active {
- display: inline-block;
- padding: 3px 7px;
- color: $akvoBlack;
- @include border-radius(2px);
- text-align: center;
- }
+ }
+ .indicator-container .indicator-group .table tbody {
+ background-color: white;
+ border-bottom: none !important;
+ .indicator-bar-td * {
+ /*display: none;*/
}
- .edit-slider {
- z-index: 9999;
- .noUi-base, &.noUi-horizontal {
- height: 5px;
- border: 0;
- background-color: rgba(white, 0);
- margin-top: -28px;
- z-index: 99999;
- @include border-radius(4px);
- box-shadow: none;
-
- .noUi-origin {
- background-color: rgba(white, 0);
- @include border-radius(4px);
- }
- .noUi-handle {
- width: 28px;
- height: 28px;
- z-index: 9999;
- background-color: rgb(0,122,184);
- cursor: pointer;
- left: -14px;
- box-shadow: none;
- top: -7px;
- color: white;
- &:after {
- display: block;
- content: '|||';
- color: white;
- width: 26px;
- height: 26px;
- line-height: 23px;
- text-align: center;
- letter-spacing: -2px;
- color: white;
- background-color: transparent;
- top: 0;
- left: -1px;
-
- }
- &:before {
- display: none;
- }
- &:hover {
- background-color: lighten(rgb(0,122,184), 10%);;
- }
- &:active {
- background-color: $flowOrange;
- }
+ }
+ .update-dialog-container {
+ td {
+ padding: 8px 2em;
+ .update-entry-container {
+ padding: 2em;
+ margin-bottom: 2em;
+ position: relative;
+ background-color: #ececec;
+ .update-exceed-target {
+ margin: 10px 0 0 0;
+ input {
+ margin-right: 10px;
+ }
+ label {
+ margin-right: 10px;
+ color: rgba($akvoBlack, 0.5);
+ }
+ }
+ .indicator-bar-display-container {
+ position: relative;
+ height: 100%;
+ margin-left: 15px;
+ margin-right: 15px;
+ .indicator-bar-progress-text {
+ position: absolute;
+ bottom: -18px;
+ width: 30px;
+ margin-left: -15px;
+ text-align: center;
+ color: #B5B5B5;
+ &:last-child {
+ color: #A3C7E3;
+ }
+ }
+ .indicator-bar, .indicator-bar-progress-amount {
+ position: absolute;
+ top: 38px;
+ bottom: 24px;
+ left: 0px;
+ height: 14px;
+ @include border-radius(2px);
+ border: 1px solid #CDDFEF;
+ }
+ .indicator-bar {
+ background-color: #fff;
+ right: 0px;
+ }
+ .indicator-bar-progress-amount {
+ background-color: #fff;
+ border-right: none;
+ }
+ .indicator-bar-progress-container {
+ /* The progress box has non-zero width, so add some
+ ** padding to ensure it doesn't overflow the parent
+ ** container.
+ */
+ position: relative;
+ height: 100%;
+ .indicator-bar-progress {
+ position: absolute;
+ width: 3px;
+ height: 20px;
+ top: 35px;
+ background-color: #B5B5B5;
+ &:nth-last-child(2) {
+ background-color: #A3C7E3;
+ }
+ text-align: center;
+ &.update-dialog-timeline-marker {
+ border: none;
+ }
+ }
+ }
+ }
+ .target-td {
+ vertical-align: middle;
+ }
+ .indicator-bar-progress-complete-container {
+ .indicator-bar-progress-complete {
+ padding-left: 15px;
+ font-size: 1.5em;
+ font-weight: normal;
+ color: rgb(81, 80, 80);
+ vertical-align: bottom;
+ }
+ .indicator-bar-progress-text {
+ padding-left: 15px;
+ font-size: 1.5em;
+ font-weight: bold;
+ color: #A3C7E3;
+ vertical-align: bottom;
+ z-index: 19999;
+ }
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .edit-button {
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ top: 15px;
+ right: 10px;
+ color: $akvoBlack;
+ font-size: 1.5em;
+ &.activated {
+ display: none;
+ }
+ }
+ .delete-button {
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ top: 13px;
+ right: 35px;
+ font-size: 1.5em;
+ color: $akvoBlack;
+ &.activated {
+ display: none;
+ }
+ }
+ .update-date {
+ display: inline-block;
+ text-align: left;
+ width: 50%;
+ }
+ .update-name {
+ display: inline-block;
+ text-align: left;
+ width: 30%;
+ margin-right: 10%;
+ color: $akvoBlack;
+ }
+ .update-timeline {
+ display: inline-block;
+ width: 75%;
+ height: 80px;
+ padding-top: 1em;
+ z-index: 99;
+ position: relative;
+ }
+ .update-target {
+ position: absolute;
+ margin-top: 45px;
+ display: inline-block;
+ width: 24%;
+ height: 80px;
+ text-align: center;
+ span {
+ font-size: 1.1em;
+ color: rgb(81, 80, 80);
+ vertical-align: text-top;
+ &.update-target-actual {
+ padding-left: 15px;
+ font-size: 1.1em;
+ font-weight: bold;
+ color: #A3C7E3;
+ vertical-align: bottom;
+ }
+ }
+ }
+ .update-description {
+ padding: 0.5em;
+ margin: 20px auto 30px;
+ &.editable {
+ background: whitesmoke;
+ border: 1px solid #A3C7E3;
+ }
+ .update-photo {
+ float: right;
+ width: 150px;
+ height: 100px;
+ background-size: cover;
+ }
+ }
+ .save-button {
+ position: absolute;
+ display: none;
+ right: 10px;
+ bottom: 10px;
+ &.active {
+ display: inline-block;
+ padding: 3px 7px;
+ color: white;
+ background-color: $akvoBlack;
+ @include border-radius(2px);
+ text-align: center;
+ }
+ }
+ .cancel-button {
+ position: absolute;
+ display: none;
+ right: 60px;
+ bottom: 10px;
+ &.active {
+ display: inline-block;
+ padding: 3px 7px;
+ color: $akvoBlack;
+ @include border-radius(2px);
+ text-align: center;
+ }
+ }
+ .edit-slider {
+ z-index: 9999;
+ .noUi-base, &.noUi-horizontal {
+ height: 5px;
+ border: 0;
+ background-color: rgba(white, 0);
+ margin-top: -28px;
+ z-index: 99999;
+ @include border-radius(4px);
+ box-shadow: none;
+ .noUi-origin {
+ background-color: rgba(white, 0);
+ @include border-radius(4px);
+ }
+ .noUi-handle {
+ width: 28px;
+ height: 28px;
+ z-index: 9999;
+ background-color: rgb(0, 122, 184);
+ cursor: pointer;
+ left: -14px;
+ box-shadow: none;
+ top: -7px;
+ color: white;
+ &:after {
+ display: block;
+ content: '|||';
+ color: white;
+ width: 26px;
+ height: 26px;
+ line-height: 23px;
+ text-align: center;
+ letter-spacing: -2px;
+ color: white;
+ background-color: transparent;
+ top: 0;
+ left: -1px;
+ }
+ &:before {
+ display: none;
+ }
+ &:hover {
+ background-color: lighten(rgb(0, 122, 184), 10%);
+ }
+ &:active {
+ background-color: $flowOrange;
+ }
+ }
+ }
+ &.active {
+ display: initial;
+ }
+ }
}
- }
- &.active {
- display: initial;
- }
}
- }
}
- }
}
/* Modal dialog stuff for the Project Editor */
@@ -3232,12 +3191,11 @@ div.active {
display: block;
padding: 0.5em;
background-color: white;
- border: 1px solid rgb(200,200,200);
+ border: 1px solid rgb(200, 200, 200);
border-radius: 0 0 4px 4px;
margin-top: -3px;
cursor: pointer;
color: rgba($progressSuccess, 1);
-
&:hover {
font-weight: bold;
}
@@ -3254,7 +3212,7 @@ div.active {
bottom: 0;
left: 0;
z-index: 1031;
- background-color: rgba(0,0,0,0.7);
+ background-color: rgba(0, 0, 0, 0.7);
}
.modalContainer {
@@ -3264,14 +3222,13 @@ div.active {
bottom: 20%;
left: 100px;
z-index: 1032;
-
@media only screen and (max-width: $width-small) {
right: 25px;
left: 25px;
}
@media only screen and (max-width: $xtra-small) {
right: 5px;
- left: 5px;
+ left: 5px;
}
@media only screen and (max-height: 900px) {
top: 10%;
@@ -3281,26 +3238,22 @@ div.active {
top: 5%;
bottom: 5%;
}
-
.orgModal {
width: 100%;
max-width: 800px;
max-height: 100%;
margin: auto;
- background-color: white;
+ background-color: white;
overflow-y: scroll;
position: relative;
- @include border-radius(5px);
-
+ @include border-radius(5px);
.modalContents {
min-width: 100px;
position: relative;
padding: 1em 2em 5em 2em;
-
.inputContainer {
margin-top: 2.75em;
margin-bottom: 1em;
-
input, select, textarea {
& + label {
position: absolute;
@@ -3316,10 +3269,9 @@ div.active {
&:focus + label {
color: $rsrBlue;
}
- }
+ }
}
}
-
.controls {
position: absolute;
bottom: 0;
@@ -3327,7 +3279,6 @@ div.active {
right: 0;
height: 3.5em;
text-align: right;
-
button {
margin: 0 0.5em;
&.modal-cancel {
diff --git a/akvo/templates/project_main_tabs/results.html b/akvo/templates/project_main_tabs/results.html
index 0cad4b9119..0f2e256914 100644
--- a/akvo/templates/project_main_tabs/results.html
+++ b/akvo/templates/project_main_tabs/results.html
@@ -12,7 +12,7 @@ {% trans "Results" %} ({{project.results.all.count}})
- {{result.title}}
+ {{result.title}}
{{result.indicators.all.count}}{% trans "Indicators:" %}