[#1049] UI fixes

akvo · Feb 17, 2015 · 75d31db · 75d31db
1 parent 97c45b7
commit 75d31db
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 40 deletions.
diff --git a/akvo/rsr/static/rsr/v3/css/src/main.css b/akvo/rsr/static/rsr/v3/css/src/main.css
@@ -369,7 +369,8 @@ nav.navbar-fixed-top {
         nav.navbar-fixed-top .navbar-nav.navbar-right li a {
           padding: 10px 15px; } }
       nav.navbar-fixed-top .navbar-nav.navbar-right li a.active {
-        background: none; }
+        background: none;
+        color: #ff5500; }
 
 .navbar-inverse .navbar-collapse {
   border-color: #e4e4e4; }
@@ -404,17 +405,17 @@ nav.navbar-fixed-top {
         background: rgba(255, 85, 0, 0.05) url(../../img/carret.png) 98% center no-repeat;
         background-size: 5px auto; }
       .myRsrMenu nav[role=navigation] ul li a.active {
-        color: #72742a;
+        color: #ff5500;
         font-weight: bold;
-        background: rgba(255, 85, 0, 0.05) url(../../img/carret.png) 98% center no-repeat;
+        background: rgba(255, 85, 0, 0.05) url(../../img/carretWhite.png) 98% center no-repeat;
         background-size: 5px auto; }
 
 #profile .usrAvatar {
-  background-color: rgba(32, 32, 36, 0.05);
-  padding: 10px; }
+  background-color: rgba(32, 32, 36, 0);
+  padding: 10px 0 10px 0; }
 
 #organisations {
-  background: rgba(255, 85, 0, 0.1);
+  background: rgba(255, 85, 0, 0.05);
   padding-bottom: 15px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
@@ -674,7 +675,7 @@ h4.detailedInfo {
   .main-list.projects ul li .projectLocation {
     color: rgba(32, 32, 36, 0.5); }
   .main-list.projects ul li:hover {
-    background: rgba(1, 1, 4, 0.05);
+    background: rgba(44, 42, 116, 0.15);
     border: thin solid rgba(44, 42, 116, 0.35); }
 .main-list.updates ul li {
   border: thin solid rgba(0, 167, 157, 0);
@@ -699,7 +700,7 @@ h4.detailedInfo {
   .main-list.updates ul li .projectLocation {
     color: rgba(32, 32, 36, 0.5); }
   .main-list.updates ul li:hover {
-    background: rgba(0, 14, 13, 0.05);
+    background: rgba(0, 167, 157, 0.1);
     border: thin solid rgba(0, 167, 157, 0.35); }
 .main-list.organisations ul li {
   border: thin solid rgba(238, 49, 36, 0);
@@ -728,7 +729,7 @@ h4.detailedInfo {
     background: rgba(238, 49, 36, 0.05);
     border: thin solid rgba(238, 49, 36, 0.15); }
   .main-list.organisations ul li:hover {
-    background: rgba(112, 15, 9, 0.05);
+    background: rgba(238, 49, 36, 0.1);
     border: thin solid rgba(238, 49, 36, 0.35); }
   .main-list.organisations ul li img {
     filter: gray;
@@ -797,6 +798,7 @@ div.projectTopRow {
   position: relative;
   background: rgba(245, 245, 245, 0.5);
   margin-top: 1px;
+  margin-bottom: 20px;
   border-bottom: 1px solid rgba(32, 32, 36, 0.1); }
   div.projectTopRow #carousel {
     padding: 15px 0;
@@ -902,23 +904,26 @@ div.projectTopRow {
       font-weight: normal; }
 
 div.timelineBlock {
-  margin: 15px auto 25px; }
+  margin: 15px auto 25px;
+  display: none; }
   div.timelineBlock #timeline {
     height: 200px; }
 
-div.textBlock .panel {
-  border: 1px solid rgba(235, 235, 235, 0.5); }
-  div.textBlock .panel .panel-heading {
-    padding: 0; }
-    div.textBlock .panel .panel-heading .panel-title a {
-      display: block;
-      padding: 15px 15px; }
-  div.textBlock .panel .panel-collapse .panel-body {
-    background: rgba(44, 42, 116, 0); }
-div.textBlock .udpateComponent {
-  padding-top: 10px;
-  padding-bottom: 15px;
-  background: #fff6f1; }
+div.textBlock {
+  margin: 10px auto; }
+  div.textBlock .panel {
+    border: 1px solid rgba(235, 235, 235, 0.5); }
+    div.textBlock .panel .panel-heading {
+      padding: 0; }
+      div.textBlock .panel .panel-heading .panel-title a {
+        display: block;
+        padding: 15px 15px; }
+    div.textBlock .panel .panel-collapse .panel-body {
+      background: rgba(44, 42, 116, 0); }
+  div.textBlock .udpateComponent {
+    padding-top: 10px;
+    padding-bottom: 15px;
+    background: #fff6f1; }
 
 #project-footer {
   margin-bottom: -16px;
@@ -978,10 +983,16 @@ div.textBlock .udpateComponent {
   background: rgba(32, 32, 36, 0.05); }
 .organisationDetail h1 {
   margin-top: 0;
-  margin-bottom: 20px; }
+  margin-bottom: 20px;
+  color: #ee3124;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(238, 49, 36, 0.05);
+  position: relative; }
+  .organisationDetail h1 i {
+    font-size: 0.75em;
+    top: -5px; }
 .organisationDetail .orgLogo {
-  padding: 10px 0;
-  background: rgba(255, 255, 255, 0.5); }
+  padding: 10px 0; }
   .organisationDetail .orgLogo img {
     width: 35%;
     margin-left: 5px; }

diff --git a/akvo/rsr/static/rsr/v3/css/src/main.scss b/akvo/rsr/static/rsr/v3/css/src/main.scss
@@ -378,6 +378,7 @@ nav.navbar-fixed-top {
                     }
                     &.active {
                         background: none;
+                        color:$anchorLinkHover;
                     }
                 }
             }
@@ -427,9 +428,9 @@ nav.navbar-fixed-top {
                         background-size: 5px auto;
                     }
                     &.active {
-                        color: complement($rsrBlue);
+                        color: $anchorLinkHover;
                         font-weight: bold;
-                        background: rgba($anchorLinkHover, 0.05) url(../../img/carret.png) 98% center no-repeat;
+                        background: rgba($anchorLinkHover, 0.05) url(../../img/carretWhite.png) 98% center no-repeat;
                         background-size: 5px auto;
                     }
                 }
@@ -439,12 +440,12 @@ nav.navbar-fixed-top {
 }
 #profile {
     .usrAvatar {
-        background-color: rgba($akvoBlack,0.05);
-        padding:10px;
+        background-color: rgba($akvoBlack,0);
+        padding:10px 0 10px 0;
     }
 }
 #organisations {
-    background: darken(rgba($anchorLinkHover, 0.1), 0);
+    background: darken(rgba($anchorLinkHover, 0.05), 0);
     padding-bottom: 15px;
     @include border-radius(5px);
     @include responsive(small-max-screens) {
@@ -783,7 +784,7 @@ h4.detailedInfo {
                     color: rgba($akvoBlack, 0.5);
                 }
                 &:hover {
-                    background: darken(rgba($rsrBlue, 0.05), 30%);
+                    background: darken(rgba($rsrBlue, 0.15), 0%);
                     border:thin solid rgba($rsrBlue, 0.35);
                 }
             }
@@ -823,7 +824,7 @@ h4.detailedInfo {
                     color: rgba($akvoBlack, 0.5);
                 }
                 &:hover {
-                    background: darken(rgba($rsrGreen, 0.05), 30%);
+                    background: darken(rgba($rsrGreen, 0.10), 0%);
                     border:thin solid rgba($rsrGreen, 0.35);
                 }
                 .excerpt {
@@ -876,7 +877,7 @@ h4.detailedInfo {
                     border:thin solid rgba($akvoTvRed, 0.15);
                 }
                 &:hover {
-                    background: darken(rgba($akvoTvRed, 0.05), 30%);
+                    background: darken(rgba($akvoTvRed, 0.10), 0%);
                     border:thin solid rgba($akvoTvRed, 0.35);
                 }
                 img {
@@ -961,6 +962,7 @@ div.projectTopRow {
     position: relative;
     background: rgba(245, 245, 245, 0.5);
     margin-top: 1px;
+    margin-bottom: 20px;
     border-bottom: 1px solid rgba($akvoBlack, 0.1);
     #carousel {
         padding: 15px 0;
@@ -1101,12 +1103,14 @@ div.projectTopRow {
 }
 div.timelineBlock {
     margin: 15px auto 25px;
+    display:none;
     #timeline {
         height: 200px;
     }
 }
 
 div.textBlock {
+    margin:10px auto;
     .panel {
         border: 1px solid rgba(235, 235, 235, 0.5);
         .panel-heading {
@@ -1207,10 +1211,17 @@ div.textBlock {
     h1 {
         margin-top:0;
         margin-bottom:20px;
+        color: rgba($akvoTvRed, 1);
+        padding-bottom:10px;
+        border-bottom:1px solid rgba($akvoTvRed,0.05);
+        position:relative;
+        i {
+            font-size:0.75em;
+            top:-5px;
+        }
     }
     .orgLogo {
         padding:10px 0;
-        background:rgba(white,0.5);
         img {
             width:35%;
             margin-left:5px;

diff --git a/akvo/rsr/static/rsr/v3/img/carretWhite.png b/akvo/rsr/static/rsr/v3/img/carretWhite.png
diff --git a/akvo/rsr/static/rsr/v3/js/src/react-my-details.js b/akvo/rsr/static/rsr/v3/js/src/react-my-details.js
@@ -194,7 +194,7 @@ var AddEmploymentForm = React.createClass({displayName: 'AddEmploymentForm',
     render: function() {
         return (
             React.DOM.span(null, 
-                React.DOM.h4(null, "Connect with an organisation"),
+                React.DOM.h4(null, "Connect with your employer"),
                 React.DOM.form(null, 
                     OrganisationInput( {ref:"organisationInput"} ),
                     CountryInput( {ref:"countryInput"} ),

diff --git a/akvo/rsr/static/rsr/v3/js/src/react-my-details.jsx b/akvo/rsr/static/rsr/v3/js/src/react-my-details.jsx
@@ -194,7 +194,7 @@ var AddEmploymentForm = React.createClass({
     render: function() {
         return (
             <span>
-                <h4>Connect with an organisation</h4>
+                <h4>Connect with your employer</h4>
                 <form>
                     <OrganisationInput ref="organisationInput" />
                     <CountryInput ref="countryInput" />

diff --git a/akvo/templates/navigation/footer.html b/akvo/templates/navigation/footer.html
@@ -9,6 +9,8 @@
                     <li><a href="http://rsr.akvo.org/rest/docs/">API</a></li>
                     <li><a href="http://akvo.org/help/akvo-policies-and-terms-2/akvo-rsr-terms-of-use/">Terms of service</a></li>
                     <li class="akvoLogo"><a href="http://akvo.org">Akvo.org</a></li>
+                    <li class="uiFeedback"><a href="#"><i class="fa fa-comment-o"></i> Leave a feedback</a></li>
+
                 </ul>
             </div>
         </div>

diff --git a/akvo/templates/organisation_main.html b/akvo/templates/organisation_main.html
@@ -6,7 +6,7 @@
     <div class="row verticalPadding organisationHeader">
       <div class="col-sm-6">
         <div class="col-sm-12">
-          <h1>{{organisation.name}}</h1>
+          <h1><i class="fa fa-users"></i> {{organisation.name}}</h1>
         </div>
         <div class="col-sm-12 orgLogo">
           {% if organisation.logo %}

diff --git a/akvo/templates/partials/project_footer.html b/akvo/templates/partials/project_footer.html
@@ -4,7 +4,7 @@
     <div class="container">
         <div class="row">
             <div class="col-sm-3">
-                <p><span class="detailedInfo">{% trans "Related documents" %}:</span></p>
+                <p><span class="detailedInfo"><i class="fa fa-file-text"></i> {% trans "Related documents" %}:</span></p>
                 <p>
                     {% for doc in project.documents.all %}
                         {{doc.show_link|safe}}<br>
@@ -14,7 +14,7 @@
                 </p>
             </div>
             <div class="col-sm-3">
-                <p><span class="detailedInfo">{% trans "Related links" %}:</span></p>
+                <p><span class="detailedInfo"><i class="fa fa-external-link"></i> {% trans "Related links" %}:</span></p>
                 <p>
                     {% for link in project.links.all %}
                         {{link.show_link|safe}}<br>