Fine tune button styling for note popups

diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs
index cc81bb9d324f840fd14d815ebf46de1fb61794a0..63177012c87c1616d9de5b3419519b91909d0ebb 100644 (file)
--- a/app/assets/javascripts/templates/notes/show.jst.ejs
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -24,8 +24,8 @@
   <form action="#">
     <textarea class="comment" name="text" cols="40" rows="5"></textarea>
     <div class="buttons clearfix">
+      <input type="submit" name="hide" value="<%- I18n.t('javascripts.notes.show.hide') %>" class="hide_unless_moderator deemphasize" 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 %>">
-      <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="comment" value="<%- I18n.t('javascripts.notes.show.comment') %>" data-method="POST" data-url="<%- note.comment_url %>" disabled="1">
     </div>
   </form>
@@ -33,7 +33,7 @@
   <form action="#">
     <input type="hidden" name="text" value="">
     <div class="buttons clearfix">
-      <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="hide" value="<%- I18n.t('javascripts.notes.show.hide') %>" class="hide_unless_moderator deemphasize" data-method="DELETE" data-url="<%- note.url %>">
       <input type="submit" name="reopen" value="<%- I18n.t('javascripts.notes.show.reactivate') %>" class="hide_unless_logged_in" data-method="POST" data-url="<%- note.reopen_url %>">
     </div>
   </form>

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 7331e201a40d3406d4ac07590198be5341f29b24..362071988b7314d0ccb6b6af127e963d38829b3a 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1640,27 +1640,40 @@ a.button {
   .button {
     box-sizing: border-box;
     float: left;
-    margin-bottom:0;
+    border-radius: 0;
+    margin:0;
     min-width: 100px;
     max-width: 150px;
+    border-right:1px solid white;
   }
   input:first-child,
   .button:first-child {
     border-radius:2px 0 0 2px;
-    border-right:1px solid white;
-    margin-left: 0px;
   }
   input:last-child,
   .button:last-child {
     border-radius:0 2px 2px 0;
-    margin-right: 0px;
+    border-right-width: 0;
   }
   input:only-child,
-  .button:only-child {
+  .button:only-child,
+  *[value="Hide"] + input:last-child,
+  *[value="Hide"] + .button:last-child {
     border-radius:2px;
-    margin-right: 0px;
+    border-right-width: 0;
+  }
+    /* if a 3-button set has a hidden middle button */
+  *[value="Hide"] + input:nth-child(3),
+  *[value="Hide"] + .button:nth-child(3) {
+    border-radius:0 2px 2px 0;
+    border-right-width: 0;
+  }
+  /* if a 3-button set starts with a hidden button */
+  *[value="Hide"] + input:nth-child(2):not(:last-child),
+  *[value="Hide"] + .button:nth-child(2):not(:last-child) {
+    border-radius:2px 0 0 2px;
+    border-right-width: 1px solid white;
   }
-
 }
 
 /* Rules for doing distinct colour of alternate table rows */