Add a bit of styling for editing the note.

aimeerivers · Jan 3, 2012 · 03278f5 · 03278f5
1 parent d6eaea3
commit 03278f5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/app/assets/images/icons/edit.png b/app/assets/images/icons/edit.png
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
@@ -1,3 +1,9 @@
+@mixin clearfix {
+  &:before, &:after { content: ""; display: table; }
+  &:after { clear: both; }
+  zoom: 1;
+}
+
 @mixin border_radius($tl, $tr, $br, $bl) {
   -moz-border-radius: $tl $tr $br $bl;
   -webkit-border-radius: $tl $tr $br $bl;

diff --git a/app/assets/stylesheets/notes.scss b/app/assets/stylesheets/notes.scss
@@ -1,3 +1,5 @@
+@import '_mixins';
+
 .freetext {
   label {
     display: none;
@@ -14,3 +16,27 @@
     height: 20em;
   }
 }
+
+.note {
+  @include clearfix;
+  border-top: 1px solid #ccc;
+
+  ul.note-actions {
+    float: right;
+    padding: 5px;
+    border: 1px solid #eee;
+
+    li {
+      text-align: right;
+      margin: 3px;
+
+      a {
+        padding: 2px 2px 2px 20px;
+      }
+
+      &.edit-note a {
+        background: url(icons/edit.png) no-repeat left center;
+      }
+    }
+  }
+}
diff --git a/app/views/notes/_note.html.haml b/app/views/notes/_note.html.haml
@@ -1,4 +1,5 @@
 .note
   %h3= note.date.year
-  = link_to 'Edit note', edit_note_path(note)
+  %ul.note-actions.unstyled
+    %li.edit-note= link_to 'Edit note', edit_note_path(note)
   = simple_format note.content