diff --git a/app/assets/stylesheets/label_templates/show.scss b/app/assets/stylesheets/label_templates/show.scss index 2a1c3cd70..1d085b8d6 100644 --- a/app/assets/stylesheets/label_templates/show.scss +++ b/app/assets/stylesheets/label_templates/show.scss @@ -8,7 +8,7 @@ .title-row { @include font-h1; - align-items: end; + align-items: flex-start; background: $color-white; border-bottom: $border-tertiary; display: flex; @@ -18,9 +18,8 @@ .label-template-icon { flex-shrink: 0; - margin-bottom: auto; margin-right: 5px; - margin-top: 13px; + margin-top: 2px; width: 32px; } diff --git a/app/assets/stylesheets/protocols/tinymce_editor.scss b/app/assets/stylesheets/protocols/tinymce_editor.scss index c91fc309b..34539866f 100644 --- a/app/assets/stylesheets/protocols/tinymce_editor.scss +++ b/app/assets/stylesheets/protocols/tinymce_editor.scss @@ -46,6 +46,12 @@ .tinymce-view { border-color: transparent; + padding: .1em 0; + + &:hover { + border: 1px solid $color-silver; + border-radius: 3px; + } } } diff --git a/app/assets/stylesheets/repository/repository_print_label_modal.scss b/app/assets/stylesheets/repository/repository_print_label_modal.scss index 0d264f4b9..64bab7356 100644 --- a/app/assets/stylesheets/repository/repository_print_label_modal.scss +++ b/app/assets/stylesheets/repository/repository_print_label_modal.scss @@ -83,6 +83,8 @@ display: flex; img { + background: var(--sn-white); + border-radius: 3px; margin-right: .25em; } } diff --git a/app/assets/stylesheets/shared/inline_edit.scss b/app/assets/stylesheets/shared/inline_edit.scss index 94c127b93..257672a37 100644 --- a/app/assets/stylesheets/shared/inline_edit.scss +++ b/app/assets/stylesheets/shared/inline_edit.scss @@ -1,9 +1,8 @@ // scss-lint:disable SelectorDepth // scss-lint:disable NestingDepth .sci-inline-edit { - column-gap: .25em; - display: grid; - grid-template-columns: auto repeat(2, max-content); + align-items: flex-start; + display: flex; transition: .4s $timing-function-sharp border; &.editing .sci-inline-edit__content { @@ -16,15 +15,17 @@ display: flex; flex-direction: column; margin-left: -.25em; - min-height: 36px; + margin-right: .5rem; + min-height: 30px; padding-left: .25em; position: relative; width: 100%; textarea, .sci-inline-edit__view { - min-height: 36px; - padding: .3em .2em .2em; + line-height: 26px; + min-height: 30px; + padding: .1em .2em; } .sci-inline-edit__view { @@ -36,6 +37,11 @@ &.blank { color: $color-silver-chalice; } + + &.hover-border:hover { + border: 1px solid $color-silver; + border-radius: 3px; + } } textarea { @@ -76,6 +82,10 @@ } .sci-inline-edit__control { + margin: 0 .25em; + max-height: 30px; + max-width: 30px; + &.btn-disabled { background: $color-silver-chalice; color: $color-concrete; diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss index bf34d8819..4de357e72 100644 --- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -38,10 +38,8 @@ } .sn-icon { - line-height: 36px; position: absolute; text-align: center; - bottom: 0; width: 25px; } @@ -70,7 +68,6 @@ &::after { @include font-awesome; top: 0; - line-height: 36px; position: absolute; right: 5px; text-align: center; diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss index ca6a609f8..15b4f19a0 100644 --- a/app/assets/stylesheets/steps/components/checklist.scss +++ b/app/assets/stylesheets/steps/components/checklist.scss @@ -3,11 +3,12 @@ .step-checklist-items { .sci-inline-edit { - margin-top: 2px; + margin-top: 5px; .sci-inline-edit__content { margin-bottom: 7px; margin-left: 0; + margin-right: .5em; } } @@ -40,7 +41,7 @@ border-radius: 50%; height: 4px; margin-right: .5em; - margin-top: 1.3em; + margin-top: 1em; width: 4px; } diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index 8d006c632..df04c02c8 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -6,7 +6,7 @@ .step-container { --left-component-padding: 2rem; border: $border-transparent; - margin: 6px 0 6px -1.5em; + margin: 6px 0 6px -1em; padding: 8px 24px 8px 0; .step-header { @@ -15,11 +15,12 @@ margin-bottom: 1.2em; .step-element-header { - align-items: center; + align-items: baseline; border-radius: 4px; display: flex; flex-basis: 80%; position: relative; + padding-top: .4em; .step-name-edit-icon { background: linear-gradient(90deg, @@ -63,6 +64,7 @@ } .step-name-container { + align-self: baseline; flex-grow: 1; font-size: 16px; font-weight: bold; @@ -73,12 +75,14 @@ } .step-state { + align-self: center; border: 1px solid $color-alto; border-radius: 50%; cursor: pointer; height: 24px; text-align: center; width: 24px; + margin-bottom: -.5em; &:hover { border-color: $brand-success; @@ -154,7 +158,7 @@ .step-timestamp { position: relative; - margin-left: 30px; + margin-left: 40px; bottom: 17px; width: 356px; height: 15px; @@ -166,19 +170,10 @@ order: 0; flex-grow: 0; } - - .step-element-name { - .sci-inline-edit__view, - textarea { - padding-bottom: .1em; - padding-top: .5em; - } - } } .step-element-grip-placeholder { - height: 24px; - width: 28px; + width: 42px; } .comments-counter { @@ -269,7 +264,7 @@ } .step-element-header { - align-items: flex-start; + align-items: baseline; border-radius: 4px; display: flex; min-height: 40px; @@ -284,7 +279,7 @@ .step-controls { display: flex; - align-items: center; + align-items: baseline; min-height: 35px; } @@ -304,12 +299,10 @@ } .step-element-controls { - background: linear-gradient( - 90deg, - transparent, - $color-concrete 15%, - $color-concrete 100% - ); + background: linear-gradient(90deg, + transparent, + $color-concrete 15%, + $color-concrete 100%); display: flex; margin-left: auto; position: absolute; @@ -339,7 +332,6 @@ .step-element-grip { color: $color-silver-chalice; cursor: pointer; - margin: auto; padding: .5em; &.step-element-grip--draggable { diff --git a/app/javascript/vue/label_template/container.vue b/app/javascript/vue/label_template/container.vue index 2df13d7f6..91973c2b5 100644 --- a/app/javascript/vue/label_template/container.vue +++ b/app/javascript/vue/label_template/container.vue @@ -12,6 +12,7 @@ :attributeName="i18n.t('label_templates.show.name_error_prefix')" :autofocus="editingName" :editOnload="newLabel" + :customClasses="['hover-border']" @editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName" @@ -34,6 +35,7 @@ :attributeName="i18n.t('label_templates.show.description_error_prefix')" :placeholder="i18n.t('label_templates.show.description_placeholder')" :autofocus="editingDescription" + :customClasses="['hover-border']" @editingEnabled="editingDescription = true" @editingDisabled="editingDescription = false" @update="updateDescription" diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue index 76b90a137..6244d999f 100644 --- a/app/javascript/vue/protocol/container.vue +++ b/app/javascript/vue/protocol/container.vue @@ -45,6 +45,7 @@ :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.enter_name')" :allowBlank="!inRepository" :attributeName="`${i18n.t('Protocol')} ${i18n.t('name')}`" + :customClasses="['hover-border']" @update="updateName" /> diff --git a/app/javascript/vue/repository_print_modal/container.vue b/app/javascript/vue/repository_print_modal/container.vue index c1fcf4361..1bac39e12 100644 --- a/app/javascript/vue/repository_print_modal/container.vue +++ b/app/javascript/vue/repository_print_modal/container.vue @@ -254,7 +254,7 @@ templateOption(option) { return `
- + ${option.label}
` diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue index 33fe2c400..ef2a3db46 100644 --- a/app/javascript/vue/shared/inline_edit.vue +++ b/app/javascript/vue/shared/inline_edit.vue @@ -14,7 +14,7 @@ @keyup.escape="cancelEdit" >
-
{{newValue || placeholder}}
+
{{newValue || placeholder}}
{{ error }}
@@ -49,7 +49,8 @@ multilinePaste: { type: Boolean, default: false }, smartAnnotation: { type: Boolean, default: false }, editOnload: { type: Boolean, default: false }, - defaultValue: { type: String, default: '' } + defaultValue: { type: String, default: '' }, + customClasses: { type: Array, default: [] } }, data() { return {