Merge pull request #256 from Cadasta/feature/css-editprojectpages

Css for 3 project edit pages
Cadasta · Jun 23, 2016 · 375c330 · 375c330
2 parents bd9cac3 + 74df5de
commit 375c330
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 116 deletions.
diff --git a/cadasta/core/static/css/_variables.scss b/cadasta/core/static/css/_variables.scss
@@ -5,6 +5,7 @@
 $gray-dark:                    #595a5c;  // Cadasta gray
 $gray-medium:                  lighten($gray-dark, 30%); // Cadasta medium gray
 $gray-light:                   lighten($gray-dark, 50%); // Cadasta light gray
+$gray-darker:                  darken(#595a5c, 14%);  // Cadasta darker gray
 $brand-primary:                #2e51a3;  // Cadasta blue
 $brand-lightblue:              lighten($brand-primary, 36%);  // Cadasta light blue
 $brand-darkblue:               #0e305e;  // Cadasta dark blue
@@ -59,7 +60,7 @@ $modal-backdrop-bg:              rgba(0, 0, 0, 0.6);
 $table-cell-padding:            12px 24px !default;
 $table-bg-accent:               #f9f9f9 !default; // Bg for table-striped
 $table-bg-accent:               #lighten($table-bg-accent, 25%); // Bg for table-striped
-$table-bg-hover:                #f2f4f7 !default; // Bg for table-hover
+$table-bg-hover:                #f9fafe !default; // Bg for table-hover
 $table-bg-active:               $table-bg-hover !default;
 $table-border-color:            #e7e8ea; // Bg for table borders
 

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
@@ -497,37 +497,13 @@ header {
     height: 100%;
     min-height: 100%;
     padding-right: 0;
-    #project-map {
+    #project-map, #id_extent_map {
       height: 100%;
       min-height: 100%;
     }
   }
   .main-text {
     padding: 30px 40px 50px 50px;
-    .panel { // content box in main panel 
-      border: 1px solid $table-border-color;
-      .panel-heading {
-        background: transparent;
-        h3 {
-          margin: 4px auto;
-        }
-      }
-      .panel-body {
-        h3 {
-          margin-bottom: 20px;
-          padding-bottom: 10px;
-          border-bottom: solid 1px $gray-light;
-        }
-      }
-      .panel-buttons { // buttons at bottom of panels containing forms
-        background: transparent;
-        padding: 20px 15px;
-        .btn {
-          min-width: 120px;
-          margin-right: 20px;
-        }
-      }
-    }
   }
   .detail { // right panel detail
     height: 100%;
@@ -555,9 +531,39 @@ header {
       &:last-child {
         border-bottom: 0;
         padding-bottom: 6px;
-    }
+      }
     } 
   }
+  .detail-edit { // edit on right
+    background: none;
+  }
+  .panel { // content box in main panel 
+    border: 1px solid $table-border-color;
+    .panel-heading {
+      background: transparent;
+      h3 {
+        margin: 4px auto;
+      }
+    }
+    .panel-body {
+      h3 {
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: solid 1px $gray-light;
+      }
+    }
+    .panel-buttons { // buttons at bottom of panels containing forms
+      background: transparent;
+      padding: 20px 15px;
+      .btn {
+        min-width: 120px;
+        margin-right: 20px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
 }
 
 /* =Forms
@@ -584,6 +590,7 @@ textarea.form-control {
   h4 {
     font-weight: bold;
     margin-top: 0;
+    color: $gray-darker;
   }
   > thead > tr > th {
     border-bottom: 2px solid $table-border-color;
@@ -766,8 +773,3 @@ div#id_extents_location_map {
 label[for="id_extents-location"] {
   display: none;
 }
-
-
-
-
-
diff --git a/cadasta/templates/organization/project_edit_details.html b/cadasta/templates/organization/project_edit_details.html
@@ -12,13 +12,13 @@
 
 {% block content %}
 
-<div class="col-md-11 col-md-offset-1 content-single">
-  <div class="row">
-    <!-- Main text  -->
-    <div class="col-md-12 main-text">
-      <h2>{% trans "Edit project details" %}</h2>
-      <form method="POST" action="{% url 'organization:project-edit-details' project.organization.slug project.slug %}">
-      {% csrf_token %}
+<form method="POST" action="{% url 'organization:project-edit-details' project.organization.slug project.slug %}">
+{% csrf_token %}
+  <div class="col-md-11 col-md-offset-1 content-single">
+    <div class="row">
+      <!-- Main text  -->
+      <div class="col-md-12 main-text">
+        <h2>{% trans "Edit project details" %}</h2>
         <div class="panel panel-default">
           <div class="panel-body">
             <h3>{% trans "1. General information" %}</h3>
@@ -42,15 +42,15 @@ <h3>{% trans "1. General information" %}</h3>
                   <label for="{{ form.description.id_for_label }}">{% trans "Project description" %}</label>
                   {% render_field form.description class+="form-control" %}
                 </div>
-
+  
                 <div class="form-group">
                   {{ form.urls.errors }}
                   <label for="{{ form.urls.id_for_label }}">{% trans "Project URL" %}</label>
                   {% render_field form.urls class+="form-control" %}
                 </div>
               </div>
             </div>
-
+  
             <h3>{% trans "2. Questionnaire" %}</h3>
             <div class="row">
               <div class="col-md-9">
@@ -62,24 +62,22 @@ <h3>{% trans "2. Questionnaire" %}</h3>
                 </div>
               </div>
             </div>
-
+  
             <h3>{% trans "3. Contacts" %}</h3>
             <div class="row">
-              <div class="col-md-12">
+              <div class="col-md-9">
                 {% render_field form.contacts class+="form-control" %}
               </div>
             </div>
           </div>
-
           <div class="panel-footer panel-buttons">
             <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
             <a href="{% url 'organization:project-dashboard' project.organization.slug project.slug %}" class="btn btn-default">{% trans "Cancel" %}</a>
           </div>
-
         </div>
-      </form>
+      </div>
     </div>
   </div>
-</div>
+</form>
 
 {% endblock %}
diff --git a/cadasta/templates/organization/project_edit_geometry.html b/cadasta/templates/organization/project_edit_geometry.html
@@ -4,15 +4,8 @@
 {% load i18n %}
 {% load leaflet_tags %}
 
-{% block left-nav %}overview{% endblock %}
-
 {% block extra_head %}
 {% leaflet_css plugins="draw,forms" %}
-<style type="text/css">
-  #id_extent_map {
-    height: 100%;
-  }  
-</style>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.0/leaflet-geocoder-mapzen.css">
 {% endblock %}
 
@@ -29,40 +22,36 @@
 </script>
 {% endblock %}
 
+{% block left-nav %}overview{% endblock %}
+
 {% block content %}
 
-<div class="col-md-11 col-md-offset-1 content-single">
-  <div class="row">
-    <!-- Main text  -->
-    <div class="col-md-12 main-text">
-      <div class="page-title">
-        <h2>{% trans "Edit project extent" %}</h2>
+<form method="POST" action="{% url 'organization:project-edit-geometry' project.organization.slug project.slug %}">
+{% csrf_token %}
+  <div class="col-md-11 col-md-offset-1 content-single">
+    <div class="row">
+      <!-- Location map  -->
+      <div class="col-md-8 map">
+        {{ form.extent }}
       </div>
-      <div class="panel panel-default">
-        <div class="panel-body">
-          <form method="POST" action="{% url 'organization:project-edit-geometry' project.organization.slug project.slug %}">
-            {% csrf_token %}
-            <div class="row">
-              <!-- Left column map  -->
-              <div class="col-md-7 col-map">
-                {{ form.extent }}
-              </div>
-              <!-- /.col-map -->
-              <!-- Right column detail  -->
-              <div class="col-md-5 col-detail">
-                <h2 class="page-title">{% trans "Edit project geometry" %}</h2>
-                <p>{% trans "Use the map tools to modify your project geometry. Once complete, select the continue button." %}</p>
-
-                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
-                <a class="btn btn-link" href="{% url 'organization:project-dashboard' project.organization.slug project.slug %}">{% trans "Cancel" %}</a>
-              </div>
-              <!-- /.col-detail -->
-            </div>
-          </form>
+      <!-- / location map -->
+      <!-- Location detail  -->
+      <div class="col-md-4 detail detail-edit">
+        <h2>{% trans "Edit project location" %}</h2>
+        <div class="panel panel-default">
+          <div class="panel-body">
+            <p>{% blocktrans %}Use the map tools to modify your project location boundaries. Once complete, select the save button below.{% endblocktrans %}</p>
+            <p>{% blocktrans %}<strong>Need help?</strong> <a href="#">Learn more in this video</a> or <a href="#">visit our help center</a>.{% endblocktrans %}</p>
+          </div>
+          <div class="panel-footer panel-buttons">
+            <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
+            <a href="{% url 'organization:project-dashboard' project.organization.slug project.slug %}" class="btn btn-default">{% trans "Cancel" %}</a>
+          </div>
         </div>
       </div>
+      <!-- / location detail -->
     </div>
   </div>
-</div>
+</form>
 
 {% endblock %}