Clean up styling of location form (#6969)

* cleaned up styling of location form * click to show coordinates on form * make entering coordinates link underlined
publiclab · Dec 17, 2019 · 6ae2264 · 6ae2264
1 parent 570a3bb
commit 6ae2264
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -35,4 +35,5 @@
  *= require jquery-confirm/css/jquery-confirm.css
  *= require jquery.atwho
  *= require profile
+ *= require location
 */
diff --git a/app/assets/stylesheets/location.css b/app/assets/stylesheets/location.css
@@ -0,0 +1,16 @@
+.leaflet-marker-icon {
+  background: url("https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png") ; 
+}
+
+#map_content p {
+  margin: 0;
+}
+#map_content label {
+  margin-bottom: .2rem;
+}
+#map_content .form-group {
+  margin-bottom: 1.4rem;
+}
+#map_content .form-group .btn {
+  margin-top: .4rem;
+}
diff --git a/app/views/editor/rich.html.erb b/app/views/editor/rich.html.erb
@@ -21,9 +21,7 @@
 <%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>
 
 <style type="text/css">
-  .leaflet-marker-icon {
-    background: url("https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png") ; 
-  }
+  /* Fix a background-color error on this page. */
   body {
     background-color: white;
   }
@@ -35,6 +33,10 @@
   .ple-module-main_image .col-lg-9 {
     margin: 0 auto;
   }
+
+  #coord_button {
+    text-decoration: underline;
+  }
 </style>
 
 <div class="pl-editor">
@@ -137,45 +139,44 @@
             </div>
 
             <div class="col-lg-6">
-              <label>By place name</label>
-              <p>
-                <input id="placenameInput" type="text" class="form-control" />
-              </p>
-              <p><label>Or by entering coordinates</label></p>
-
-              <div class="row">
-                <div class="col-lg-6">
-                  <p>
-                    <label>
-                      Latitude
+              <div class="form-group">
+                <label>By place name</label>
+                <p>
+                  <input id="placenameInput" type="text" class="form-control" />
+                </p>
+              </div>
+
+              <div class="form-group">
+                Or <a href="#" id="coord_button">by entering coordinates</a>
+
+                <div id="coord_input" class="row">
+                  <div class="col-sm-6">
+                    <label>Latitude</label>
+                    <p>
                       <input 
                         id="lat" 
                         type="text" 
                         class="form-control" 
                         placeholder="Latitude" 
                       />
-                    </label>
-                  </p>
-                </div>
+                    </p>
+                  </div>
 
-                <div class="col-lg-6">
-                  <p>
-                    <label>
-                      Longitude
+                  <div class="col-sm-6">
+                    <label>Longitude</label>
+                    <p>
                       <input 
                         id="lng" 
                         type="text" 
                         class="form-control" 
                         placeholder="Longitude" 
                       />
-                    </label>
-                  </p>
+                    </p>
+                  </div>
                 </div>
               </div>
 
-              <br>
-
-              <p>
+              <div class="form-group">
                 <button 
                   class="btn btn-lg btn-outline-secondary" 
                   onclick="editor.mapModule.blurredLocation.geocodeWithBrowser(true);" 
@@ -185,10 +186,8 @@
                     Use current location
                   </div>
                 </button>
-              </p>
+              </div>
 
-              <br>
-
               <div class="form-check">
                 <label class="form-check-label">
                   <input 
@@ -199,7 +198,7 @@
                   />
                   Blur my location
                 </label>
-                <a href="https://publiclab.org/location-privacy">Learn more</a>
+                <a href="https://publiclab.org/location-privacy" target="_blank">Learn more »</a>
               </div>
 
             </div> 
@@ -415,6 +414,12 @@
       }
     });
 
+    $('#coord_button').click((event) => {
+      event.preventDefault();
+      $('#coord_input').toggle();
+    });
+    $("#coord_input").hide();
+
     // upload via posting "posted_main_image"
     function dataURItoBlob(dataURI) {
       // convert base64 to raw binary data held in a string
@@ -459,4 +464,5 @@
       }
       console.log("Draft:", editor.data.draft);
   }
+
 </script>