Merge pull request #1182 from akvo/1130_org_page_ui

[#1130 #1169] Fixed map on organisation main page and close button on info windows

akvo/rsr/static/rsr/v3/css/src/main.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*---------------------------------------------------------------------------------
 
-            Title:   Akvo RSR v3 
+            Title:   Akvo RSR v3
             Author:  Loic Sans, loic@akvo.org
 
 /*---------------------------------------------------------------------------------*/
@@ -191,7 +191,7 @@ span.twitter-typeahead .tt-suggestion > p {
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
-  line-height: 1.42857;
+  line-height: 1.42857143;
   color: #333333;
   white-space: nowrap; }
 
@@ -1153,7 +1153,8 @@ div.textBlock {
 .organisationDetail .orgDescr {
   background-color: rgba(244, 116, 107, 0.1); }
   .organisationDetail .orgDescr p {
-    padding-left: 20px; }
+    padding-left: 20px;
+    color: rgba(32, 32, 36, 0.45); }
 .organisationDetail h1 {
   margin-top: 0;
   margin-bottom: 20px;
@@ -1170,11 +1171,14 @@ div.textBlock {
     width: 35%;
     margin-left: 5px; }
 .organisationDetail .orgDetails {
-  background: rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.65);
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px; }
+  @media only screen and (max-width: 768px) {
+    .organisationDetail .orgDetails {
+      padding: 10px 15px; } }
 
 /* Update Page */
 .updateMain h1 {

akvo/rsr/static/rsr/v3/css/src/main.scss

@@ -1,6 +1,6 @@
 /*---------------------------------------------------------------------------------
 
-            Title:   Akvo RSR v3 
+            Title:   Akvo RSR v3
             Author:  Loic Sans, loic@akvo.org
 
 /*---------------------------------------------------------------------------------*/
@@ -53,7 +53,7 @@ a, a:link, a:visited {
 img {
     max-width: 100%;
     .gmnoprint  & {
-        max-width: none; 
+        max-width: none;
     }
 }
 
@@ -743,8 +743,8 @@ h4.detailedInfo {
             color: $anchorLinkHover;
         }
         @include responsive(small-max-screens) {
-            padding-top:20px; 
-            padding-bottom:20px; 
+            padding-top:20px;
+            padding-bottom:20px;
         }
     }
     div#filter {
@@ -1371,6 +1371,7 @@ div.textBlock {
         background-color: rgba(lighten($akvoTvRed,15%), 0.1);
         p {
             padding-left: 20px;
+            color: rgba($akvoBlack, 0.45);
         }
     }
     h1 {
@@ -1393,8 +1394,11 @@ div.textBlock {
         }
     }
     .orgDetails {
-        background: rgba(white, 0.45);
+        background: rgba(white, 0.65);
         @include border-radius(5px);
+        @include responsive(small-max-screens) {
+            padding: 10px 15px;
+        }
     }
 }
 
@@ -1454,4 +1458,4 @@ div.textBlock {
     div {
         padding: 5px 10px;
     }
-}
+}

akvo/rsr/static/rsr/v3/js/src/scripts.js

@@ -68,11 +68,13 @@ $(document).ready(function() {
   // Find each element of class rsr_map (from the coll_map template tag)
   // and render map with data from related js object
   _.forEach(document.getElementsByClassName('rsr_map'), function( node ) {
+
     var mapId = node.id,
+        mapConfig = window[mapId],
         disableDefaultUI = false,
         draggable = true;
 
-    if ( node.dynamic === false ) {
+    if ( !mapConfig.dynamic ) {
       disableDefaultUI = true;
       draggable = false;
     }
@@ -120,9 +122,11 @@ $(document).ready(function() {
           infoWindow = new google.maps.InfoWindow({
             content: infoWinTempl(location)
           });
-          google.maps.event.addListener(marker, 'click', function() {
-            infoWindow.open(map, marker);
-          });
+          if (mapConfig.dynamic) {
+            google.maps.event.addListener(marker, 'click', function() {
+              infoWindow.open(map, marker);
+            });
+          }
 
           bounds.extend(marker.position);
         });

akvo/rsr/templatetags/maps.py

@@ -107,6 +107,84 @@ def coll_map(coll, width='100%', height='100%', dynamic='dynamic'):
         'partnersite_widget': False}
 
 
+
+def get_location(item):
+    """..."""
+    try:
+        location = item.primary_location
+
+        if location.latitude == 0 and location.longitude == 0:
+            raise ValueError('latitude or longitude is 0')
+        if location.latitude > 80 or location.latitude < -80:
+            raise ValueError('lat over 80 or lat less than -80')
+
+        if isinstance(item, Project):
+            item_type = 'project'
+            icon = PROJECT_MARKER_ICON
+            text = item.title.encode('utf8')
+
+        elif isinstance(item, Organisation):
+            item_type = 'organisation'
+            icon = ORGANISATION_MARKER_ICON
+            text = item.name.encode('utf8')
+
+        elif isinstance(item, ProjectUpdate):
+            item_type = 'projectUpdate'
+            icon = PROJECT_UPDATE_MARKER_ICON
+            text = item.title.encode('utf8')
+
+        return {'type': item_type,
+                'image': avatar(item),
+                'latitude': location.latitude,
+                'longitude': location.longitude,
+                'url': item.get_absolute_url(),
+                'icon': icon,
+                'pk': str(item.pk),
+                'text': text}
+    except Exception, e:
+        print e
+        return []
+
+
+@register.inclusion_tag('inclusion_tags/map.html')
+def primary_location_map(item, width='100%', height='100%', dynamic='dynamic'):
+    if dynamic != 'dynamic':
+        dynamic = False
+    map_id = 'akvo_map_{}'.format(os.urandom(8).encode('hex'))
+
+    locations = []
+    locations.append(get_location(item))
+
+    return {
+        'map_id': map_id,
+        'width': width,
+        'height': height,
+        'locations': locations,
+        'dynamic': dynamic,
+    }
+
+
+@register.inclusion_tag('inclusion_tags/map.html')
+def locations_map(item, width='100%', height='100%', dynamic='dynamic'):
+    if dynamic != 'dynamic':
+        dynamic = False
+    map_id = 'akvo_map_{}'.format(os.urandom(8).encode('hex'))
+
+    locations = []
+
+    if isinstance(item, Project):
+        locations.append(get_location(item))
+
+
+    return {
+        'map_id': map_id,
+        'width': width,
+        'height': height,
+        'locations': locations,
+        'dynamic': dynamic,
+    }
+
+
 @register.inclusion_tag('inclusion_tags/maps.html')
 def project_map(id, width, height, dynamic='dynamic'):
     """
@@ -183,8 +261,8 @@ def organisation_map(id, width, height, dynamic='dynamic'):
     map_id = 'akvo_map_%s' % os.urandom(8).encode('hex')
 
     locations = []
-
     for location in OrganisationLocation.objects.filter(location_target_id=id):
+
         if location.latitude == 0 and location.longitude == 0:
             continue
         if location.latitude > 80 or location.latitude < -80:

akvo/templates/base.html

@@ -51,6 +51,12 @@
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
     {% compressed_css 'rsr_v3_style' %}
     {% if stylesheet %}<link rel="stylesheet" href="{{MEDIA_URL}}{{stylesheet}}">{% endif %}
+    <style type="text/css">
+        /** FIX for Bootstrap and Google Maps Info window styes problem **/
+        img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
+        max-width: none;
+        }
+    </style>
 
     {% block head %}{% endblock head %}
 

akvo/templates/inclusion_tags/maps.html

@@ -115,5 +115,5 @@
 
         }
     };
-	window.onload = function (){googleMap.load()};
-</script>
+ window.onload = function (){googleMap.load()};
+</script>

akvo/templates/organisation_main.html

@@ -3,7 +3,7 @@
 {% block title %}{{organisation.name}}{% endblock %}
 {% block maincontent %}
   <div class="container organisationDetail">
-    
+
     <div class="row verticalPadding organisationHeader">
 
       <div class="col-sm-6">
@@ -137,11 +137,17 @@ <h2>{% trans 'Funding' %}</h2>
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-12 topMargin">
-      <p>
-      {% organisation_map organisation.id '100%' '300px' %}
-      </p>
+    <div class="col-xs-12 topMargin">
+      {% primary_location_map organisation '100%' '300px' 'dynamic' %}
+      {# org_map organisation '100%' '300px' 'static' #}
     </div>
   </div>
 </div>
-{% endblock %}
+{% endblock %}
+
+{% block js %}
+  {{ block.super }}
+
+  {# Google Maps #}
+  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+{% endblock js %}

akvo/templates/partials/project_header.html

@@ -45,23 +45,24 @@ <h1><a href="{% url 'project-main' project.pk %}"><i class="fa fa-folder-o"></i>
             </div>
         </div>
         <div style="display: None" id="project-map" class="row initial">
+          {# locations_map project '100%' '300px' #}
             {% project_map project.id '100%' '300px' %}
         </div>
     </div>
 </header>
 
 <script type="text/javascript">
-    function maptoggle() {
-        if ($( "#project-map" ).css('display') == 'none') {
-            $( "#project-map" ).slideToggle('slow');
-            if ($('#project-map').hasClass('initial')) {
-                googleMap.load();
-                $( "#project-map" ).removeClass('initial');
-            }
-            $('.map-toggle').html('HIDE MAP -');
-        } else {
-            $( "#project-map" ).slideToggle('slow');
-            $('.map-toggle').html('SHOW MAP +');
-        }
-    };
+ function maptoggle() {
+   if ($( "#project-map" ).css('display') == 'none') {
+     $( "#project-map" ).slideToggle('slow');
+     if ($('#project-map').hasClass('initial')) {
+       googleMap.load();
+       $( "#project-map" ).removeClass('initial');
+     }
+     $('.map-toggle').html('HIDE MAP -');
+   } else {
+     $( "#project-map" ).slideToggle('slow');
+     $('.map-toggle').html('SHOW MAP +');
+   }
+ };
 </script>

akvo/templates/project_directory.html

@@ -143,7 +143,7 @@ <h4 class="detailedInfo">{% trans "Finance" %}</h4>
 {% endblock %}
 {% block js %}
   {{ block.super }}
-  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+  {<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <script type="application/json" id="akvo-rsr-typeahead-thumbs">
    {
      "numberOfProjects": {{ project_count }}

akvo/templates/update_directory.html

@@ -13,24 +13,22 @@
       <div id="search" class="verticalPadding">
         <p>{% trans "Refine the update list below by searching by name, organisation or sector" %}</p>
         <div class="form-inline" role="form">
-          {#<form class="form-inline" role="form">#}
           <div class="form-group">
             <div class="input-group">
               {% bootstrap_field filter.form.title field_class='search-query' show_label=False %}
               <span class="input-group-btn">
                 <button class="btn btn-primary" type="submit">{% trans "Update list" %} &#8250;</button>
               </span>
             </div>
-              <a class="btn showFilters menu-toggle"><i class="fa fa-toggle-off"></i> Advanced filters</a>
+            <a class="btn showFilters menu-toggle"><i class="fa fa-toggle-off"></i> Advanced filters</a>
           </div>
-            {% if q %}
-            <div><a href="{% url 'update-directory' %}" class="btn"><i class="fa fa-times"></i> Reset all filters</a></div>
-            {% endif %}
-          </div>
-          {#</form>#}
+          {% if q %}
+          <div><a href="{% url 'update-directory' %}" class="btn"><i class="fa fa-times"></i> Reset all filters</a></div>
+          {% endif %}
         </div>
       </div>
     </div>
+  </form>
 </section>
 <div id="wrapper">
   <aside  id="sidebar-wrapper" class="{ show_filters }}">