[#766] Merging new version of feature/rsr_v3 into branch

akvo · Oct 9, 2014 · 6f1386b · 6f1386b
2 parents b096320 + 1c5075a
commit 6f1386b
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 27 deletions.
diff --git a/akvo/rsr/static/rsr/v3/css/src/main.css b/akvo/rsr/static/rsr/v3/css/src/main.css
@@ -1,6 +1,6 @@
 /* Hack for full-width columns below 570px */
-@media (max-width: 570px) { 
-	.col-ts-12 { 
+@media (max-width: 570px) {
+	.col-ts-12 {
 		float: none;
 		width: 100%;
 	}
@@ -23,14 +23,20 @@ body > .navbar {
 	padding: 4px 9px;
 }
 .navbar-brand {
-	width: 150px;
+	width: 122px;
 	background-image: url(../../img/logo.png);
 	background-size: contain;
 	background-repeat: no-repeat;
 	text-indent: -999px;
-	margin-top: 7px;
-	height: 33px;
-	margin-left: 0;
+	margin-top: 11px;
+	margin-left: 15px;
+	height: 27px;
+	padding: 0;
+}
+@media (min-width: 768px) {
+	body > .navbar >.container .navbar-brand {
+		margin-left: 0;
+	}
 }
 
 /* FOOTER */

diff --git a/akvo/templates/base.html b/akvo/templates/base.html
@@ -19,8 +19,10 @@
 
     {# jQuery #}
     <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
     {% compressed_css 'rsr_v3_style' %}
+    {% compressed_js 'rsr_v3_libraries' %}
 
     <!-- Piwik -->
     {% tracking_code %}
@@ -37,9 +39,5 @@
 
     {% include 'navigation/footer.html' %}
 
-    {# JS #}
-    <script src="http://fb.me/react-0.10.0.js"></script>
-    {% compressed_js 'rsr_v3_libraries' %}
-
   </body>
 </html>
diff --git a/akvo/templates/myrsr/my_projects.html b/akvo/templates/myrsr/my_projects.html
@@ -5,8 +5,8 @@
 {% block title %}{% trans "MyRSR - my proejcts" %}{% endblock %}
 
 {% block myrsr_main %}
-<div class="col-md-9 table-responsive">
-  <h2>{% trans "My project" %}s</h2>
+<div class="table-responsive">
+  <h1>{% trans "My project" %}s</h1>
   <table class="table table-striped">
     <tr>
       <td>Image</td>

diff --git a/akvo/templates/myrsr/my_updates.html b/akvo/templates/myrsr/my_updates.html
@@ -5,9 +5,9 @@
 {% block title %}{% trans 'MyRSR - My updates' %}{% endblock %}
 
 {% block myrsr_main %}
+    <h1>My updates</h1>
     {% if user.updates %}
-        <div class="col-md-9 table-responsive" id="updates">
-            <h2>My updates</h2>
+        <div class="table-responsive" id="updates">
             <table class="table table-striped">
                 <tr><th>Media</th><th>Title</th><th>Date</th><th>Project</th><th>Options</th></tr>
                 {% for update in user.updates %}
@@ -16,7 +16,6 @@ <h2>My updates</h2>
             </table>
         </div>
     {% else %}
-        <h2>My updates</h2>
         <h2><small>You have not placed any updates yet.</small></h2>
     {% endif %}
-{% endblock %}
+{% endblock %}
diff --git a/akvo/templates/myrsr/myrsr.html b/akvo/templates/myrsr/myrsr.html
@@ -0,0 +1,99 @@
+{% extends "myrsr/myrsr_base.html" %}
+
+{% load i18n bootstrap3 %}
+
+{% block title %}{% trans 'MyRSR' %} - {{ user.first_name }} {{ user.last_name }}{% endblock %}
+
+{% block head_js %}
+    <script>
+        $(document).ready(function() {
+
+            $('#profileForm').submit(function(event) {
+
+                var $form = $(this);
+                var serializedData = $form.serialize();
+
+                $.post('/myrsr/', serializedData, function(response) {
+                    response = JSON.parse(response);
+                    $( "#profile" ).prepend('<div class="alert alert-' + response["status"] + '" role="alert">' + response["message"] + '</div>');
+                });
+
+                event.preventDefault();
+
+            });
+
+            $('#passwordForm').submit(function(event) {
+
+                var $form = $(this);
+                var serializedData = $form.serialize();
+
+                $.post('/myrsr/', serializedData, function(response) {
+                    response = JSON.parse(response);
+                    $( "#password" ).prepend('<div class="alert alert-' + response["status"] + '" role="alert">' + response["message"] + '</div>');
+                });
+
+                event.preventDefault();
+
+            });
+
+            $('#organisationForm').submit(function(event) {
+
+                var $form = $(this);
+                var serializedData = $form.serialize();
+
+                $.post('/myrsr/', serializedData, function(response) {
+                    response = JSON.parse(response);
+                    $( "#organisations" ).prepend('<div class="alert alert-' + response["status"] + '" role="alert">' + response["message"] + '</div>');
+                });
+
+                event.preventDefault();
+
+            });
+        });
+    </script>
+{% endblock %}
+
+{% block myrsr_main %}
+    <div class="row">
+        <div class="col-md-6 col-xs-6 col-ts-12" id="profile">
+            <h1>My details</h1>
+            <form method="post" action="" id="profileForm">
+                {% csrf_token %}
+                {% for field in profileform %}
+                    {% bootstrap_field field %}
+                {% endfor %}
+                {% buttons %}
+                    <button type="submit" class="btn btn-primary">
+                        {% trans 'Update details' %}
+                    </button>
+                {% endbuttons %}
+            </form>
+        </div>
+
+        <div class="col-md-6 col-xs-6 col-ts-12" id="organisations">
+            <h1>My organisations</h1>
+            {% if user.organisations.all %}
+            <ul>
+                {% for org in user.organisations.all %}
+                <li>{{ org.name }}</li>
+                {% endfor %}
+            </ul>
+            {% else %}
+            <h2><small>Not affiliated with an organisation.</small></h2>
+            {% endif %}
+
+            <h3>Connect with an organisation</h3>
+            <form method="post" action="" id="organisationForm">
+                {% csrf_token %}
+                {% for field in organisationform %}
+                    {% bootstrap_field field %}
+                {% endfor %}
+                {% buttons %}
+                    <button type="submit" class="btn btn-success">
+                        {% trans 'Request to join' %}
+                    </button>
+                {% endbuttons %}
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/akvo/templates/myrsr/myrsr_base.html b/akvo/templates/myrsr/myrsr_base.html
@@ -19,7 +19,9 @@ <h4>MyRSR</h4>
     </div>
     {% endblock %}
 
+    <div class="col-md-10">
     {% block myrsr_main %}{% endblock %}
+    </div>
 
 </div>
 {% endblock %}
diff --git a/akvo/templates/myrsr/password_change.html b/akvo/templates/myrsr/password_change.html
@@ -34,7 +34,8 @@
 {% endblock %}
 
 {% block myrsr_main %}
-<div class="col-md-6 col-md-offset-2" id="password">
+<div class="col-md-6" id="password">
+<h1>Change your password</h1>
 <form method="post" action="" id="passwordForm">
     {% csrf_token %}
     {% bootstrap_form_errors form type='non_fields' %}
@@ -48,4 +49,4 @@
     {% endbuttons %}
 </form>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/akvo/templates/myrsr/user_management.html b/akvo/templates/myrsr/user_management.html
@@ -5,9 +5,9 @@
 {% block title %}{% trans 'MyRSR - My updates' %}{% endblock %}
 
 {% block myrsr_main %}
+    <h1>User management</h1>
     {% if users %}
-        <div class="col-md-10 table-responsive" id="updates">
-            <h2>User management</h2>
+        <div class="table-responsive" id="updates">
             <table class="table table-striped">
                 <tr><th>Email</th><th>First name</th><th>Last name</th><th>Organisation</th><th>Permissions</th><th></th></tr>
                 {% for user in users %}
@@ -16,7 +16,6 @@ <h2>User management</h2>
             </table>
         </div>
     {% else %}
-        <h2>User management</h2>
         <h2><small>No users.</small></h2>
     {% endif %}
-{% endblock %}
+{% endblock %}
diff --git a/akvo/templates/navigation/header.html b/akvo/templates/navigation/header.html
@@ -1,4 +1,11 @@
-{% load bootstrap3 %}
+{% load i18n bootstrap3 %}
+
+{% url 'project-directory' as project_url %}
+{% url 'update-directory' as update_url %}
+{% url 'organisation-directory' as organisation_url %}
+{% url 'my_details' as myrsr_url %}
+
+{% with current_path=request.path|slice:":6" project_path=project_url|slice:":6" organisation_path=organisation_url|slice:":6" update_path=update_url|slice:":6" myrsr_path=myrsr_url|slice:":6" %}
 
 <nav class="navbar" role="navigation">
   <div class="container">
@@ -13,12 +20,33 @@
       <a class="navbar-brand" href="{% url 'index' %}">Akvo RSR</a>
     </div>
 
+    <style>
+     .active {color: #3D328B;}
+     .nav a {text-transform: uppercase;}
+    </style>
+
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="navbar-collapsed">
       <ul class="nav navbar-nav a-main">
-        <li><a href="{% url 'project-directory' %}">Projects</a></li>
-        <li><a href="{% url 'update-directory' %}">Updates</a></li>
-        <li><a href="{% url 'organisation-directory' %}">Organisations</a></li>
+        <li>
+          <a class="{% if current_path == project_path %}
+             active{% endif %}"
+             href="{% url 'project-directory' %}">
+            {% trans "Projects" %}
+          </a>
+        </li>
+        <li>
+          <a class="{% if current_path == update_path %}active{% endif %}"
+             href="{% url 'update-directory' %}">
+            {% trans "Updates" %}
+          </a>
+        </li>
+        <li>
+          <a class="{% if current_path  == organisation_path %}active{% endif %}"
+             href="{% url 'organisation-directory' %}">
+            {% trans "Organisations" %}
+          </a>
+        </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li>
@@ -30,10 +58,14 @@
         <li><a href="{% url 'register' %}">Register</a></li>
         <li><a href="{% url 'sign_in' %}">Sign in</a></li>
         {% else %}
-        <li><a href="{% url 'my_details' %}">MyRSR</a></li>
+        <li>
+          <a class="{% if current_path == myrsr_path %}active{% endif %}"
+             href="{% url 'my_details' %}">MyRSR</a>
+        </li>
         <li><a href="{% url 'sign_out' %}">Sign out</a></li>
         {% endif %}
       </ul>
     </div>
   </div>
 </nav>
+{% endwith %}