diff --git a/public/css/styles.css b/public/css/styles.css index 3a452c5..fec267f 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -23,9 +23,9 @@ h3 { } .recipe-add-grubs-btn { - float: right; - clear: both; + position: absolute; margin: 2px; + right: 16px; } .hidden { @@ -133,16 +133,25 @@ tr:hover .grub-close { .recipe-header { margin: 0px; padding: 0px; + padding-right: 72px; border-bottom: none; } +.recipe-header.edit { + padding-right: 0px; +} + +.recipe-header.new { + padding-right: 0px; +} + .recipe-header-input { border: none; box-shadow: none; transition: none; border-bottom: none; display: inline; - width: inherit; + width: 100%; } .recipe-header-input[readonly] { diff --git a/src/cljs/grub/view/recipe.cljs b/src/cljs/grub/view/recipe.cljs index 1f1ed57..5d7d0be 100644 --- a/src/cljs/grub/view/recipe.cljs +++ b/src/cljs/grub/view/recipe.cljs @@ -74,12 +74,13 @@ (dom/click-on-elem? % (om/get-node owner :save-btn)))) (transition-state owner :click))} [:div.panel-heading.recipe-header + {:class (when (= edit-state :editing) "edit")} [:input.form-control.recipe-header-input {:type "text" :readOnly (if (= edit-state :editing) "" "readonly") :value name :on-change #(om/set-state! owner :name (dom/event-val %))}] - [:button.btn.btn-primary.btn-sm.recipe-add-grubs-btn + [:button.btn.btn-primary.btn-sm.recipe-add-grubs-btn {:type "button" :class (when (= edit-state :editing) "hidden") :ref :add-grubs-btn diff --git a/src/cljs/grub/view/recipe_list.cljs b/src/cljs/grub/view/recipe_list.cljs index 205493e..bc2c390 100644 --- a/src/cljs/grub/view/recipe_list.cljs +++ b/src/cljs/grub/view/recipe_list.cljs @@ -49,7 +49,7 @@ [:div.panel.panel-default.recipe-panel {:on-click #(when (not (dom/click-on-elem? % (om/get-node owner :save-btn))) (transition-state owner :click))} - [:div.panel-heading.recipe-header + [:div.panel-heading.recipe-header.new [:input.form-control.recipe-header-input {:id "new-recipe-name" :type "text"