cleaned up styling of location form

publiclab · Dec 13, 2019 · 69eb544 · 69eb544
1 parent 7a6d931
commit 69eb544
Show file tree

Hide file tree

Showing 3 changed files with 42 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;
   }
@@ -129,45 +127,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">
+                <p><label>Or by entering coordinates</label></p>
+
+                <div class="row">
+                  <div class="col-lg-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-lg-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);" 
@@ -177,10 +174,8 @@
                     Use current location
                   </div>
                 </button>
-              </p>
+              </div>
 
-              <br>
-
               <div class="form-check">
                 <label class="form-check-label">
                   <input 
@@ -191,7 +186,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>