Improve styling of notes popups

diff --git a/app/assets/javascripts/templates/notes/new.jst.ejs b/app/assets/javascripts/templates/notes/new.jst.ejs
index 9295ce873e8a33bfebc237b1ab9642ba5522dcbd..a2796a7a265af17f7768b281dfd5873ebb4bf684 100644 (file)
--- a/app/assets/javascripts/templates/notes/new.jst.ejs
+++ b/app/assets/javascripts/templates/notes/new.jst.ejs
@@ -1,11 +1,15 @@
-<p>
-  <%- I18n.t('javascripts.notes.new.intro_1') %><br/>
-  <%- I18n.t('javascripts.notes.new.intro_2') %>
-</p>
-<form action="#">
-  <input type="hidden" name="lon">
-  <input type="hidden" name="lat">
-  <textarea name="text" cols="40" rows="10"></textarea>
-  <br/>
-  <input type="submit" name="add" value="<%- I18n.t('javascripts.notes.new.add') %>" id="note-add">
-</form>
+<div class="note">
+  <p>
+    <%- I18n.t('javascripts.notes.new.intro_1') %><br/>
+    <%- I18n.t('javascripts.notes.new.intro_2') %>
+  </p>
+  <form action="#">
+    <input type="hidden" name="lon">
+    <input type="hidden" name="lat">
+    <textarea name="text" cols="40" rows="10"></textarea>
+    <br/>
+    <div class="buttons">
+      <input type="submit" name="add" value="<%- I18n.t('javascripts.notes.new.add') %>" id="note-add">
+    </div>
+  </form>
+</div>

diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs
index 2ae846b194244f9856fe995d4f1ae5f601597cbf..cf8ea0a40ce2121fffb82f590efef120d01c905e 100644 (file)
--- a/app/assets/javascripts/templates/notes/show.jst.ejs
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -1,20 +1,24 @@
-<h2><%- I18n.t('javascripts.notes.show.title', { id: note.id }) %></h2>
-<% note.comments.forEach(function (comment) { %>
-<p>
-  <small class="deemphasize">
-    <%- I18n.t('javascripts.notes.show.event', {
-       action: comment.action, user: comment.user, time: comment.date
-    }) %>
-  </small>
-  <br/>
-  <%- comment.text %>
-</p>
-<% }) %>
-<% if (note.status == "open") { %>
-<form action="#">
-  <textarea name="text" cols="40" rows="5"></textarea>
-  <br/>
-  <input type="submit" name="close" value="<%- I18n.t('javascripts.notes.show.close') %>" id="note-close">
-  <input type="submit" name="comment" value="<%- I18n.t('javascripts.notes.show.comment') %>" id="note-comment">
-</form>
-<% } %>
+<div class="note">
+  <h2><%- I18n.t('javascripts.notes.show.title', { id: note.id }) %></h2>
+  <% note.comments.forEach(function (comment) { %>
+  <p>
+    <small class="deemphasize">
+      <%- I18n.t('javascripts.notes.show.event', {
+         action: comment.action, user: comment.user, time: comment.date
+      }) %>
+    </small>
+    <br/>
+    <%- comment.text %>
+  </p>
+  <% }) %>
+  <% if (note.status == "open") { %>
+  <form action="#">
+    <textarea name="text" cols="40" rows="5"></textarea>
+    <br/>
+    <div class="buttons">
+      <input type="submit" name="close" value="<%- I18n.t('javascripts.notes.show.close') %>" id="note-close">
+      <input type="submit" name="comment" value="<%- I18n.t('javascripts.notes.show.comment') %>" id="note-comment">
+    </div>
+  </form>
+  <% } %>
+</div>

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 6ead2220a079949ffb0ee9fd6665df845a6c2e99..d41dd5481bb7df4e6c9d0443da576f74e75eead8 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1265,3 +1265,14 @@ abbr.geo {
     }
   }
 }
+
+/* Rules for the notes interface */
+
+.note {
+  width: 300px;
+
+  .buttons {
+    margin-top: 5px;
+    text-align: right;
+  }
+}