Redesign notes permalink

This adds a small permalink icon to the sprite and updates the CSS for
the permalink. The text is hidden by default and shown on hover.

diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png
index d13dbaa8f3af70f0d8a6cd770192b6f473885bdc..7b6c6a73f564bcca2933a1274c5ac4d6f40b3f22 100644 (file)
Binary files a/app/assets/images/sprite.png and b/app/assets/images/sprite.png differ

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index a70a7532b87b2b62f3f64dcc877fbc1a8b55917b..bf65021fa6cc07dea7657949b0a3f237444ab8f8 100644 (file)
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@@ -27,9 +27,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="8"
-     inkscape:cx="9.2822526"
-     inkscape:cy="168.88141"
+     inkscape:zoom="4.7683716"
+     inkscape:cx="8.5527915"
+     inkscape:cy="148.78096"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -84,15 +84,19 @@
        transform="translate(0,852.36218)"
        sodipodi:nodetypes="sscsscs" />
     <rect
-       style="color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;fill:none;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        id="rect3845"
        width="15"
-       height="45"
+       height="60"
        x="0"
-       y="0"
-       transform="translate(0,852.36218)"
-       inkscape:export-filename="/Users/saman/work_repos/openstreetmap-website/app/assets/images/sprite.png"
+       y="852.36218"
+       inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png"
        inkscape:export-xdpi="90"
        inkscape:export-ydpi="90" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path6649"
+       d="m 10.21875,898.45593 c -0.51124,0 -1.01451,0.20201 -1.40625,0.59375 l -1.59375,1.59375 c 0.70051,0 1.3332,0.25386 1.84375,0.65625 L 9.5,900.86218 c 0.19587,-0.19587 0.46313,-0.3125 0.71875,-0.3125 0.25562,0 0.52288,0.11663 0.71875,0.3125 L 12,901.92468 c 0.39174,0.39174 0.39174,1.04576 0,1.4375 l -1.0625,1.0625 -1.5,1.5 c -0.39174,0.39174 -1.04576,0.39174 -1.4375,0 l -1.0625,-1.0625 c -0.0772,-0.0772 -0.10948,-0.1877 -0.15625,-0.28125 l -1.3125,1.3125 1.84375,1.84375 c 0.78347,0.78347 2.02903,0.78347 2.8125,0 l 3.6875,-3.6875 c 0.783469,-0.78347 0.783469,-2.02903 0,-2.8125 l -2.1875,-2.1875 c -0.39174,-0.39174 -0.89501,-0.59375 -1.40625,-0.59375 z m -3,3 c -0.51124,0 -1.01451,0.20201 -1.40625,0.59375 l -3.6875,3.6875 c -0.78347,0.78347 -0.78347,2.02903 0,2.8125 l 2.1875,2.1875 c 0.78347,0.78347 2.02903,0.78347 2.8125,0 l 1.59375,-1.59375 c -0.70051,0 -1.3332,-0.25386 -1.84375,-0.65625 l -0.4375,0.4375 c -0.39174,0.39174 -1.04576,0.39174 -1.4375,0 l -1.0625,-1.0625 c -0.39174,-0.39174 -0.39174,-1.04576 0,-1.4375 L 5,905.36218 l 1.5,-1.5 c 0.19587,-0.19587 0.46313,-0.3125 0.71875,-0.3125 0.25562,0 0.52288,0.11663 0.71875,0.3125 L 9,904.92468 c 0.0772,0.0772 0.10948,0.1877 0.15625,0.28125 l 1.3125,-1.3125 -1.84375,-1.84375 c -0.39174,-0.39174 -0.89501,-0.59375 -1.40625,-0.59375 z"
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
   </g>
 </svg>

diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs
index f72f003c6bc8536fe432fb864cd99223242decbb..1393e9c89478483085f08f528c6b2741636dd55d 100644 (file)
--- a/app/assets/javascripts/templates/notes/show.jst.ejs
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -1,5 +1,5 @@
 <div class="note">
-  <p class="permalink"><a href="/?note=<%- note.id %>"><%- I18n.t('javascripts.notes.show.permalink', { id: note.id }) %></a></p>
+  <a class="permalink deemphasize" href="/?note=<%- note.id %>"><span><%- I18n.t('javascripts.notes.show.permalink', { id: note.id }) %></span></a>
   <% if (note.comments.some(function (comment) { return !comment.user })) { %>
   <small class="warning"><%- I18n.t('javascripts.notes.show.anonymous_warning') %></small>
   <% } %>
@@ -23,7 +23,6 @@
   <% if (note.status == "open") { %>
   <form action="#">
     <textarea class="comment" name="text" cols="40" rows="5"></textarea>
-    <br/>
     <div class="buttons">
       <input type="submit" name="hide" value="<%- I18n.t('javascripts.notes.show.hide') %>" class="hide_unless_moderator" data-method="DELETE" data-url="<%- note.url %>">
       <input type="submit" name="close" value="<%- I18n.t('javascripts.notes.show.resolve') %>" class="hide_unless_logged_in" data-method="POST" data-url="<%- note.close_url %>">

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index bab4c95606e7695b7f051166102e054ec7164f02..2aacad0e6dcb689df3a4c546050991dbf7f81ea0 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1724,6 +1724,10 @@ a.button.submit {
 
 /* Rules for the notes interface */
 
+.note {
+  padding-top: 10px;
+}
+
 .note {
   h2 {
     margin-bottom: 10px;
@@ -1734,7 +1738,21 @@ a.button.submit {
   }
 
   .permalink {
-    margin: -10px 0 10px -12px;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    min-width: 15px;
+    min-height: 15px;
+    background: image-url("sprite.png") 0 -45px no-repeat;
+  }
+
+  .permalink span {
+    display: none;
+    padding-left: 20px;
+  }
+
+  .permalink:hover span {
+    display: block;
   }
 
   .warning {