Move add grubs button to unexpanded rows

public/css/styles.css

@@ -18,6 +18,16 @@ h3 {
     margin-top: 10px;
 }
 
+#recipe-grubs {
+    width: 100%;
+}
+
+.recipe-add-grubs-btn {
+    float: right;
+    clear: both;
+    margin: 2px;
+}
+
 .hidden {
     display: none;
 }
@@ -93,15 +103,22 @@ tr:hover .grub-close {
     padding-top: 0px;
 }
 
+.panel-heading {
+    background-color: #ffffff;
+}
+
 .recipe-panel {
     padding: 0px;
     margin-bottom: -1px;
 }
 
+.recipe-panel > .recipe-header {
+    background-color: #ffffff;
+}
+
 .recipe-header {
     margin: 0px;
     padding: 0px;
-    background-color: #ffffff;
     border-bottom: none;
 }
 
@@ -110,6 +127,8 @@ tr:hover .grub-close {
     box-shadow: none;
     transition: none;
     border-bottom: none;
+    width: inherit;
+    display: inline;
 }
 
 .recipe-header-input:focus {

src/cljs/grub/view/dom.cljs

@@ -71,16 +71,15 @@
              {:id "recipe-name"
               :type "text" 
               :placeholder "Grub pie"
-              :value name}]]
+              :value name}]
+            (when-not new-recipe 
+              [:button.btn.btn-primary.btn-sm.recipe-add-grubs-btn {:type "button"} "Add Grubs"])]
            [:div.panel-body.recipe-grubs.hidden
             [:textarea.form-control.recipe-grubs-input
              {:id "recipe-grubs"
               :rows 3 
               :placeholder "2 grubs"}
              grubs]
-            (when-not new-recipe 
-              [:button.btn.btn-primary.pull-left.recipe-btn.recipe-add-grubs-btn
-             {:type "button"} "Add Grubs"])
             [:button.btn.btn-primary.hidden.pull-right.recipe-btn.recipe-done-btn
              {:type "button"} "Done"]]])))
 

src/cljs/grub/view/recipe.cljs

@@ -59,6 +59,7 @@
 
 (defn wait-for-edit-recipe-input-click []
   (->> (:chan (dom/listen-once (dom/recipes-selector) :click))
+       (a/filter< #(not (dommy/has-class? (.-selectedTarget %) :btn)))
        (a/map< #(.-selectedTarget %))))
 
 (defn parse-update-recipe-event [elem]