Merge pull request #411 from Cadasta/feature/css-locationdetails

Location details right panel
Cadasta · Jul 12, 2016 · 65d2820 · 65d2820
2 parents 7e79bd3 + 1fd2503
commit 65d2820
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 43 deletions.
diff --git a/cadasta/core/static/css/main.css b/cadasta/core/static/css/main.css
diff --git a/cadasta/core/static/css/main.css.map b/cadasta/core/static/css/main.css.map
diff --git a/cadasta/core/static/css/main.scss b/cadasta/core/static/css/main.scss
@@ -668,15 +668,15 @@ header {
     position: relative;
     background: #fff;
     margin: 0 auto;
-    padding: 30px;
+    padding: 24px;
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
     -moz-box-shadow: 0 0 6px rgba(0,0,0,.3);
     box-shadow: 0 0 6px rgba(0,0,0,.3);
     z-index: 300;
     .btn {
-      min-width: 120px;
+      min-width: 110px;
     }
     .more-menu {
       width: auto !important;
@@ -725,7 +725,7 @@ header {
       background: transparent;
       padding: 20px 15px;
       .btn {
-        min-width: 120px;
+        min-width: 110px;
         margin-right: 20px;
         margin-bottom: 10px;
         &:last-child {
@@ -737,6 +737,16 @@ header {
   .nav-tabs {
     margin-bottom: 20px;
   }
+  .detail .nav-tabs {
+    li > a {
+      font-size: 13px;
+      padding: 10px;
+    }
+    li.active > a, li.active > a:hover, li.active > a:focus {
+      border-color: $table-border-color;
+      border-bottom-color: transparent;
+    }
+  }
 }
 
 @media (max-width: $screen-sm-max) {
@@ -872,6 +882,18 @@ div.dataTables_wrapper div.dataTables_info /* showing number total */ {
   max-width: 100px;
 }
 
+table.table-location { // location details in map area
+  border-top: none;
+  border-bottom: none;
+  tr:first-child td {
+    border-top: none;
+  }
+  label {
+    text-transform: uppercase;
+    font-size: 12px;
+  }
+}
+
 @media (max-width: $screen-sm-max) {
   table {
     overflow-x: auto;
@@ -1151,4 +1173,15 @@ ul.errorlist {
     color: $alert-danger-text;
     padding: 2px 8px;
   }
-}
+}
+
+/* =Map location details
+-------------------------------------------------------------- */
+
+.content-single .detail h2 span {
+  font-size: 14px;
+  color: #a6a7a8;
+  display: block;
+  text-transform: uppercase;
+  padding-bottom: 2px;
+ } 
diff --git a/cadasta/core/static/css/single.scss b/cadasta/core/static/css/single.scss
@@ -195,3 +195,36 @@
   }
 }
 
+/* =Map location details in right column
+-------------------------------------------------------------- */
+
+.content-single .detail {
+  h2 {
+    margin-top: 10px;
+    span {
+      font-size: 11px;
+      color: $gray-medium;
+      display: block;
+      text-transform: uppercase; 
+      padding-bottom: 2px;
+    }
+  }
+  .btn-group {
+    margin-bottom: 20px;
+  }
+  .btn-full .btn {
+    padding: 10px 12px;
+  }
+}
+
+#project-map {
+  h2 {
+  padding-bottom: 0;
+  }
+  .btn-wrap { // button
+    padding: 4px 4px 5px;
+    .btn-block {
+      margin: 0 auto;
+    }
+  }
+}
diff --git a/cadasta/templates/organization/project_dashboard.html b/cadasta/templates/organization/project_dashboard.html
@@ -19,7 +19,7 @@
 <script>
   function project_map_init(map, options) {
     var trans = {
-      open: "{% trans 'Open Location' %}"
+      open: "{% trans 'Open location' %}"
     };
 
     {% if project.extent %}

diff --git a/cadasta/templates/spatial/location_add.html b/cadasta/templates/spatial/location_add.html
@@ -31,7 +31,7 @@
       // TODO: It seems Leaflet has a bug with L.geoJson()
       // not returning the correct bounds (see #377 for details)
       var trans = {
-        open: "{% trans 'Open Location' %}"
+        open: "{% trans 'Open location' %}"
       };
 
       {% if object.extent %}

diff --git a/cadasta/templates/spatial/location_detail.html b/cadasta/templates/spatial/location_detail.html
@@ -7,7 +7,7 @@
 {% block location_panel %}
 
 <div class="page-title">
-  <h2>Location</h2>
+  <h2><span>Location </span>{{ location.get_type_display }}</h2>
   <div class="top-btn pull-right">
     <!-- More options menu -->
     <div class="dropdown pull-right btn-more">
@@ -30,51 +30,84 @@ <h2>Location</h2>
 </ul>
 
 <div class="tab-content">
+  <!-- Overview tab -->
   <div role="tabpanel" class="tab-pane active" id="overview">
-    <table class="table table-striped">
+    <table class="table table-location">
       <tbody>
         <tr>
-          <td><strong>Type</strong></td>
-          <td>{{ location.get_type_display }}</td>
+          <td class="col-md-4"><label>Type</label></td>
+          <td class="col-md-8">{{ location.get_type_display }}</td>
         </tr>
         {% for attr in attributes %}
         <tr>
-          <td><strong>{{ attr.0 }}</strong></td>
+          <td><label>{{ attr.0 }}</label></td>
           <td>{{ attr.1 }}</td>
         </tr>
         {% endfor %}
       </tbody>
     </table>
   </div>
+  <!-- /overview tab -->
 
+  <!-- Relationship tab -->
   <div role="tabpanel" class="tab-pane" id="relationships">
-    <table class="table table-hover datatable" data-paging-type="simple">
-      <thead>
-        <tr>
-          <th>{% trans "Relationship type" %}</th>
-          <th>{% trans "Party" %}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for rel in relationships %}
-        <tr class="linked" onclick="window.document.location='{% url 'parties:relationship_detail' object.organization.slug object.slug rel.id %}';">
-          <td>{{ rel.tenure_type.label }}</td>
-          <td><a href="{% url 'parties:detail' object.organization.slug object.slug rel.party.id %}">{{ rel.party.name }}</a></td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-    <a href="{% url 'locations:relationship_add' object.organization.slug object.slug location.id %}" class="btn btn-primary btn-block">
-      {% trans "Add new relationship" %}
-    </a>
+    {% if has_relationships %}
+      <div class="pull-right">
+        <a href="{% url 'locations:relationship_add' object.organization.slug object.slug location.id %}" class="btn btn-primary btn-small">
+        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
+        {% trans "Add relationship" %}
+        </a>
+      </div>
+      <table class="table table-hover datatable" data-paging-type="simple">
+        <thead>
+          <tr>
+            <th>{% trans "Relationship type" %}</th>
+            <th>{% trans "Party" %}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for rel in relationships %}
+          <tr class="linked" onclick="window.document.location='{% url 'parties:relationship_detail' object.organization.slug object.slug rel.id %}';">
+            <td>{{ rel.tenure_type.label }}</td>
+            <td><a href="{% url 'parties:detail' object.organization.slug object.slug rel.party.id %}">{{ rel.party.name }}</a></td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    {% else %}
+      <div>
+        <p>{% trans "This location does not have any relationships and is not connected to any parties. To add your first relationship, select the button below." %}</p>
+        <div class="btn-full">
+          <a href="{% url 'locations:relationship_add' object.organization.slug object.slug location.id %}" class="btn btn-primary">
+          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
+          {% trans "Add relationship" %}
+          </a>
+        </div>
+      </div>
+    {% endif %}
   </div>
+  <!-- /relationship tab -->
 
+  <!-- Resources tab -->
   <div role="tabpanel" class="tab-pane" id="resources">
-    {% include 'resources/table_sm.html' with object_list=location.resources %}
-    <div class="btn-group btn-group-justified">
-      <a class="btn btn-primary" href="{% url 'locations:resource_add' object.organization.slug object.slug location.id %}">{% trans "Add from library" %}</a>
-      <a class="btn btn-primary" href="{% url 'locations:resource_new' object.organization.slug object.slug location.id %}">{% trans "Upload new resource" %}</a>
-    </div>
+    {% if has_resources %}
+      <div class="btn-group btn-group-justified">
+        <a class="btn btn-primary btn-sm" href="{% url 'locations:resource_add' object.organization.slug object.slug location.id %}">{% trans "Add from library" %}</a>
+        <a class="btn btn-primary btn-sm" href="{% url 'locations:resource_new' object.organization.slug object.slug location.id %}">{% trans "Upload new resource" %}</a>
+      </div>
+      {% include 'resources/table_sm.html' with object_list=location.resources %}
+    {% else %}
+      <div>
+        <p>{% trans "This location does not have any connected resources. To add a resource, selection from the options below." %}</p>
+        <div class="btn-full btn-group btn-group-justified">
+          <a class="btn btn-primary" href="{% url 'locations:resource_add' object.organization.slug object.slug location.id %}">{% trans "Add from library" %}</a>
+          <a class="btn btn-primary" href="{% url 'locations:resource_new' object.organization.slug object.slug location.id %}">{% trans "Upload new resource" %}</a>
+        </div>
+      </div>
+    {% endif %}
   </div>
+  <!-- /resources tab -->
+
 </div>
+
 {% endblock %}
diff --git a/cadasta/templates/spatial/location_edit.html b/cadasta/templates/spatial/location_edit.html
@@ -33,7 +33,7 @@
           layer.bindPopup("<div class=\"text-wrap\">" +
                          "<h2><span>Location</span>" +
                          feature.properties.type + "</h2></div>" +
-                         "<div class=\"btn-wrap\"><a href='" + feature.properties.url + "' class=\"btn btn-primary btn-sm btn-block\">{% trans 'Open Location' %}</a>"  +
+                         "<div class=\"btn-wrap\"><a href='" + feature.properties.url + "' class=\"btn btn-primary btn-sm btn-block\">{% trans 'Open location' %}</a>"  +
                          "</div>");
         }
       });

diff --git a/cadasta/templates/spatial/location_map.html b/cadasta/templates/spatial/location_map.html
@@ -19,7 +19,7 @@
     // TODO: It seems Leaflet has a bug with L.geoJson()
     // not returning the correct bounds (see #377 for details)
     var trans = {
-      open: "{% trans 'Open Location' %}"
+      open: "{% trans 'Open location' %}"
     };
 
     {% if object.extent %}

diff --git a/cadasta/templates/spatial/location_wrapper.html b/cadasta/templates/spatial/location_wrapper.html
@@ -22,7 +22,7 @@
 <script>
   function locations_map_init(map, options) {
     var trans = {
-      open: "{% trans 'Open Location' %}"
+      open: "{% trans 'Open location' %}"
     };
 
     {% if object.extent %}
@@ -40,7 +40,7 @@
       onEachFeature: function(feature, layer) {
         layer.bindPopup("<div class=\"text-wrap\">" +
                        "<h2><span>Location</span>{{ location.get_type_display }}</h2></div>" +
-                       "<div class=\"btn-wrap\"><a href='{% url 'locations:detail' object.organization.slug object.slug location.id %}' class=\"btn btn-primary btn-sm btn-block\">{% trans 'Open Location' %}</a>"  +
+                       "<div class=\"btn-wrap\"><a href='{% url 'locations:detail' object.organization.slug object.slug location.id %}' class=\"btn btn-primary btn-sm btn-block\">{% trans 'Open location' %}</a>"  +
                        "</div>");
       }
     });