From ae72811ae92db524fb6a589c55d7cd917dd7ef45 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Sat, 27 Apr 2013 17:53:28 -0500
Subject: [PATCH 1/2] Redesign notes permalink.

This adds a small permalink icon to the sprite and updates the CSS for
the permalink.

![](http://dl.dropbox.com/u/68059/Screenshots/yk9~_c0ww~_z.png)
---
 app/assets/images/sprite.png                  | Bin 445 -> 930 bytes
 app/assets/images/sprite.svg                  |  20 +++++++++++-------
 .../javascripts/templates/notes/show.jst.ejs  |   3 +--
 app/assets/stylesheets/common.css.scss        |   5 ++++-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png
index d13dbaa8f3af70f0d8a6cd770192b6f473885bdc..7b6c6a73f564bcca2933a1274c5ac4d6f40b3f22 100644
GIT binary patch
delta 921
zcmV;K17`fa1EL3z7k@km1^@s6xj5iS00004b3#c}2nYxWd<bNS00009a7bBm000fw
z000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H110P95
zK~zYI?UhYvTvZguf9K7lShA4PQX*0r^RiH(rFFWfg>DpS6n__m2CPdVZ!!c*>!Q?^
zR9A(5gjP%@cf^1Vick<LxYBGAlrG{IZ9*ZP_bil3p+XTPOy9iYBKN)C%w#&5l9lAb
zg?sKfzjOchy!-AIRi(KZV|D`{07c+MU;(%eoGq0~_tH3NhK(^F0v`igTC&35syZ?<
zGIF&Ao}8R~Pk%(dN&|s!fDqUXylWFa@;q<<@bK^-`4pU(nAn!f<vz9M?{ORtj*gE0
zmHMmI>P1zZ0k$PcG6fX9)S1iW4g%W&k|cTG1p$H}_)S$$S@YFOrSg0Ri%8K9@0ZKv
zU)R_#BJ#bn*yEL-re(0I&fDS6N~N-ItzcDsI~_L~jemL1F@6Fb0C=7^Jw86(=YrL0
zb+3q=v*s`5a{2D6Pi2hx4tU3!{{YiG;ZtR>G3E&HZHH~P9ui}W56lD4+MpTWPdXjX
zsi~=F>h=21z+O9d8z`1arH36<kdNbd2al`1EFwce5Of4H*<)j4TYGzZKNFF;APBx#
z517GE+kZCZgl)o`@Fu)LaQ0U9_xB$Xk&jrpw?Yv)wY0P}GcYjlx~iUI<u037)lX`*
z+AP@1z=A&lJx=1fst$|D=d6BiAF1jawOVb~1F$Q)Aix$8`I6Rmy2r+6doI#lE4px_
zOSs{}3thqs8LX<)-H>T~3SR+ktdqTA<5%D?41bsN`TQVorvrE=pU)45VYm!Umwus8
zc-iy3SrOU3hSUd1k{pVnXfd5zbv&aeT8!g(kBD4z=SAdN9LIZHFwMAT_kI7E@B0hB
z?;mRy^M8G-MA#*Q5n)b*qpO_lim_4)Er3R#>hzPDzXSXh=ntTmK!-r@*#sxr!l1iA
z4S(ny=uv0>CD4CC>!8ndFBQFM=MFy!yxb)90O%Pzz6F|V2c7{v0orG!o_4?pw2<u?
zv<LLI10J^HMbI}vFIqcHK^Gpf&g+hnv8H`TF6hFq*ns<>eNKYocJ(WuFSHcb3B1rG
v^*rd;ps%$(2Tj%PD77uT9;qAlKmP}iq!PU@9rs1)00000NkvXXu0mjfm~XGK

delta 432
zcmV;h0Z;y-2fYK37k@1X1^@s6ak4RY0004mNkl<Zc-rlgu}Z^G6oxz2N!-*Lk|q#v
zQ1k&@Tm^A((7{FV5d<e6A>fcSX~2MQAdbbMn@dqCI=OU|)*xM^S+4(qn{uMT+|WfK
z!_OuE`M-M)_ny>*5I+<I!5VZ0JwapW9=e2<crFh-hbEB7(SN(|`}?^t3Wq!hdC(bj
z%{ENJFkH{Tp64x~Fp_~s*L4^9#_e`{1AZ*)y$lRvCq1>*YHc!*cXq-u4Zib*EWB}m
zi!LmMk>8yOp0Vxx3wu_*FuwCGd#bVWQ^DM0pimwXm=^Srh7h<@8qX+->M$SJ?yt~1
z6^m3u|0{HY1b;v2VhTatw&OT+)F!}VC6L2h6<om;{Qu!*v$<uOW(SI)o@H6v<kL#u
z((h0%WjL5Xf@uQ(h}Lg@Lis5yPZTB8;c#3MjyXIm2@g5kEeUt|g`JjxDL;h`!>GgT
zE5d!sXWrSi?FI^i0&qaN+zHcleHAT@@<8&b{_A*Znklx7sk-4HeUq;|+W-!r7h3<`
aU-bq52*3on#ky4h0000<MNUMnLSTYPkIIAq

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index a70a7532b8..bf65021fa6 100644
--- 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 f72f003c6b..5b66ece6af 100644
--- a/app/assets/javascripts/templates/notes/show.jst.ejs
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -1,5 +1,4 @@
 <div class="note">
-  <p class="permalink"><a href="/?note=<%- note.id %>"><%- I18n.t('javascripts.notes.show.permalink', { id: note.id }) %></a></p>
   <% if (note.comments.some(function (comment) { return !comment.user })) { %>
   <small class="warning"><%- I18n.t('javascripts.notes.show.anonymous_warning') %></small>
   <% } %>
@@ -23,7 +22,7 @@
   <% if (note.status == "open") { %>
   <form action="#">
     <textarea class="comment" name="text" cols="40" rows="5"></textarea>
-    <br/>
+    <a class="permalink deemphasize" href="/?note=<%- note.id %>"><span class='icon'></span><%- I18n.t('javascripts.notes.show.permalink', { id: note.id }) %></a>
     <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 bab4c95606..5e21bb9629 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1734,7 +1734,10 @@ a.button.submit {
   }
 
   .permalink {
-    margin: -10px 0 10px -12px;
+    float: left;
+    margin-top:5px;
+    padding:0 0 0 20px;
+    background: image-url("sprite.png") 0 -45px no-repeat;
   }
 
   .warning {

From 6d26f528543cf17d0ea022dd0dd544eb229553b4 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Sun, 28 Apr 2013 10:59:23 -0500
Subject: [PATCH 2/2] Move permalink back to the top but hide text by default.

---
 .../javascripts/templates/notes/show.jst.ejs  |  2 +-
 app/assets/stylesheets/common.css.scss        | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs
index 5b66ece6af..1393e9c894 100644
--- a/app/assets/javascripts/templates/notes/show.jst.ejs
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -1,4 +1,5 @@
 <div class="note">
+  <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>
   <% } %>
@@ -22,7 +23,6 @@
   <% if (note.status == "open") { %>
   <form action="#">
     <textarea class="comment" name="text" cols="40" rows="5"></textarea>
-    <a class="permalink deemphasize" href="/?note=<%- note.id %>"><span class='icon'></span><%- I18n.t('javascripts.notes.show.permalink', { id: note.id }) %></a>
     <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 5e21bb9629..2aacad0e6d 100644
--- 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,12 +1738,23 @@ a.button.submit {
   }
 
   .permalink {
-    float: left;
-    margin-top:5px;
-    padding:0 0 0 20px;
+    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 {
     display: block;
     background-color: #ffe0cc;