diff --git a/public/css/styles.css b/public/css/styles.css index 4765689..afc17c0 100644 --- a/public/css/styles.css +++ b/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; diff --git a/src/cljs/grub/view/grub.cljs b/src/cljs/grub/view/grub.cljs index ee6e0a0..1bdf7c4 100644 --- a/src/cljs/grub/view/grub.cljs +++ b/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))}]])) diff --git a/src/cljs/grub/view/recipe.cljs b/src/cljs/grub/view/recipe.cljs index 5c6174c..71e5dd7 100644 --- a/src/cljs/grub/view/recipe.cljs +++ b/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