diff --git a/app/assets/stylesheets/steps/components/text.scss b/app/assets/stylesheets/steps/components/text.scss index de7e61575..8196f6b1b 100644 --- a/app/assets/stylesheets/steps/components/text.scss +++ b/app/assets/stylesheets/steps/components/text.scss @@ -1,5 +1,6 @@ .step-text-container { display: flex; + border-radius: 4px; margin-bottom: 16px; padding-left: var(--left-component-padding); position: relative; @@ -23,7 +24,7 @@ } - .element-grip { + .step-element-grip { align-items: center; color: $color-silver-chalice; display: none; @@ -41,14 +42,14 @@ display: flex; } - .element-grip { + .step-element-grip { display: flex; } } &.edit { .buttons-container, - .element-grip { + .step-element-grip { display: none; } } diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index d222b9396..a2eb64b49 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -145,6 +145,18 @@ .step-elements { padding-left: calc(var(--left-component-padding) * 2); + + .step-element-name { + .sci-inline-edit__view { + margin-bottom: .25em; + padding-top: .25em; + } + + .sci-inline-edit__content textarea { + margin-bottom: .25em; + margin-top: .25em; + } + } } .step-element-grip-placeholder { @@ -232,6 +244,7 @@ .step-element-header { align-items: flex-start; + border-radius: 4px; display: flex; min-height: 40px; position: relative; @@ -281,13 +294,6 @@ } } - .step-element-grip { - color: $color-silver-chalice; - cursor: grab; - margin: auto; - padding: .5em; - } - .step-element-controls, .step-element-grip { opacity: 0; @@ -303,6 +309,17 @@ } } +.step-element-grip { + color: $color-silver-chalice; + cursor: pointer; + margin: auto; + padding: .5em; + + &.step-element-grip--draggable { + cursor: grab; + } +} + .sci-reorderable-items { .modal-body { padding-top: 0; diff --git a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue index 1103cce81..b48f322ee 100644 --- a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue +++ b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue @@ -17,7 +17,7 @@ :handle="'.step-element-grip'" >
-
+
diff --git a/app/javascript/vue/protocol/step_elements/checklistItem.vue b/app/javascript/vue/protocol/step_elements/checklistItem.vue index 8e8bf7e4a..cac9df333 100644 --- a/app/javascript/vue/protocol/step_elements/checklistItem.vue +++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue @@ -1,7 +1,7 @@