Use readonly attribute, input fields for grubs, too

public/css/styles.css

@@ -71,30 +71,24 @@ tr:hover .grub-close {
   overflow: hidden;
 }
 
-.grub-item .grub-static {
-  display: inline;
-}
-
 .grub-item .grub-input {
-  display: none;
-}
-
-.grub-item.edit .grub-static {
-  display: none;
+  display: inline;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: none;
 }
 
 .grub-item.edit .grub-input {
-  display: inline;
-  width: 100%;
-}
-
-.grub-item .glyphicon {
-  margin-right: 5px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: lightgray;
 }
 
 .completed {
   text-decoration: line-through;
   color: #a9a9a9;
+  background: #f7f7f7;
 }
 
 .completed.edit {
@@ -135,6 +129,11 @@ tr:hover .grub-close {
   width: inherit;
 }
 
+.recipe-header-input[readonly] {
+  background: white;
+  cursor: default;
+}
+
 .recipe-header-input:focus {
   border: none;
   box-shadow: none;
@@ -150,6 +149,11 @@ tr:hover .grub-close {
   resize: none;
 }
 
+.recipe-grubs-input[readonly] {
+  background: white;
+  cursor: default;
+}
+
 .recipe-grubs-input:focus {
   border: none;
   box-shadow: none;

src/cljs/grub/view/grub.cljs

@@ -80,13 +80,9 @@
          :on-touch-start #(transition-state owner :touch-start)
          :on-touch-cancel #(transition-state owner :touch-cancel)
          :on-touch-end #(transition-state owner :touch-end)} 
-        [:span.grub-static
-         (if completed
-           [:span.glyphicon.glyphicon-check]
-           [:span.glyphicon.glyphicon-unchecked])
-         [:span.grub-text grub]]
         [:input.grub-input 
          {:type "text" 
+          :readOnly (if (= edit-state :editing) "" "readonly")
           :value (:grub state)
           :on-change #(om/set-state! owner :grub (.. % -target -value))
           :on-key-up #(when (dom/enter-pressed? %) (transition-state owner :enter))}]]))

src/cljs/grub/view/recipe.cljs

@@ -79,6 +79,7 @@
           [:div.panel-heading.recipe-header
            [: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