diff options
author | Takuya Noguchi <takninnovationresearch@gmail.com> | 2019-07-09 21:20:05 +0900 |
---|---|---|
committer | Takuya Noguchi <takninnovationresearch@gmail.com> | 2019-08-06 00:14:19 +0100 |
commit | f6ca75cf86bb2eb3224582d7d8755da6c012e7b8 (patch) | |
tree | 0b875ca20bd58cf5da2934e87f1a6e05093dc919 | |
parent | 5ebbe95ad3211e4a751c38919ed7d31a6a0d5d50 (diff) | |
download | gitlab-ce-64318-poor-ui-on-ci-cd-variables-of-project-settings.tar.gz |
Fix poor UI on CI/CD Variables of Project Settings for mobile64318-poor-ui-on-ci-cd-variables-of-project-settings
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>
-rw-r--r-- | app/assets/stylesheets/framework/ci_variable_list.scss | 41 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/responsive_tables.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/settings.scss | 2 | ||||
-rw-r--r-- | app/views/ci/variables/_variable_header.html.haml | 12 | ||||
-rw-r--r-- | app/views/ci/variables/_variable_row.html.haml | 23 | ||||
-rw-r--r-- | changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml | 5 | ||||
-rw-r--r-- | locale/gitlab.pot | 9 |
8 files changed, 36 insertions, 64 deletions
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 28d7492b99c..b739d1e3f6e 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -16,42 +16,18 @@ &:not(:last-child) { margin-bottom: $gl-btn-padding; - - @include media-breakpoint-down(xs) { - margin-bottom: 3 * $gl-btn-padding; - } } &:last-child { - .ci-variable-body-item:last-child { - margin-right: $ci-variable-remove-button-width; - - @include media-breakpoint-down(xs) { - margin-right: 0; - } - } - - .ci-variable-row-remove-button { + .ci-variable-row-remove-action { display: none; } - - @include media-breakpoint-down(xs) { - .ci-variable-row-body { - margin-right: $ci-variable-remove-button-width; - } - } } } .ci-variable-row-body { - display: flex; - align-items: flex-start; width: 100%; padding-bottom: $gl-padding; - - @include media-breakpoint-down(xs) { - display: block; - } } .ci-variable-body-item { @@ -60,33 +36,26 @@ &:not(:last-child) { margin-right: $gl-btn-padding; - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { margin-right: 0; margin-bottom: $gl-btn-padding; } } } +.ci-variable-remove-item, .ci-variable-masked-item, .ci-variable-protected-item { + height: $input-height; flex: 0 1 auto; display: flex; align-items: center; - padding-top: 5px; - padding-bottom: 5px; } .ci-variable-row-remove-button { @include transition(color); - flex-shrink: 0; - display: flex; - justify-content: center; - align-items: center; - width: $ci-variable-remove-button-width; - height: $input-height; - padding: 0; - background: transparent; border: 0; + background: transparent; color: $gl-text-color-secondary; &:hover, diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss index 6bd44ee19bd..b5043505a2e 100644 --- a/app/assets/stylesheets/framework/responsive_tables.scss +++ b/app/assets/stylesheets/framework/responsive_tables.scss @@ -51,11 +51,8 @@ } @include media-breakpoint-down(sm) { - display: flex; align-self: stretch; - padding: 10px; align-items: center; - min-height: 62px; &:not(:first-child) { border-top: 1px solid $white-normal; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c108f45622f..671f4c1d628 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -725,11 +725,6 @@ $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; /* -CI variable lists -*/ -$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); - -/* Filtered Search */ $filter-name-resting-color: #f8f8f8; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 3b62121eb0d..35a0436a3dc 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -78,7 +78,7 @@ } @media(max-width: map-get($grid-breakpoints, md)-1) { - padding-right: 20px; + padding-right: 0; } &::before { diff --git a/app/views/ci/variables/_variable_header.html.haml b/app/views/ci/variables/_variable_header.html.haml index d3b7a5ae883..4366d44870b 100644 --- a/app/views/ci/variables/_variable_header.html.haml +++ b/app/views/ci/variables/_variable_header.html.haml @@ -1,16 +1,16 @@ - only_key_value = local_assigns.fetch(:only_key_value, false) -%li.ci-variable-row.m-0.d-none.d-sm-block +%li.ci-variable-row.m-0.d-none.d-md-block .d-flex.w-100.align-items-center.pb-2 .bold.table-section.section-15.append-right-10 = s_('CiVariables|Type') - .bold.table-section.section-15.append-right-10 + .bold.table-section.section-25.append-right-10 = s_('CiVariables|Key') - .bold.table-section.section-15.append-right-10 + .bold.table-section.section-25.append-right-10 = s_('CiVariables|Value') - unless only_key_value - .bold.table-section.section-20 - = s_('CiVariables|State') - .bold.table-section.section-20 + .bold.table-section.section-10.append-right-10 + = s_('CiVariables|Protected') + .bold.table-section.section-10.append-right-10 = s_('CiVariables|Masked') = render_if_exists 'ci/variables/environment_scope_header' diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml index ed4bd5ae19e..597af7bb61b 100644 --- a/app/views/ci/variables/_variable_row.html.haml +++ b/app/views/ci/variables/_variable_row.html.haml @@ -20,16 +20,16 @@ - masked_input_name = "#{form_field}[variables_attributes][][masked]" %li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } } - .ci-variable-row-body.border-bottom + .ci-variable-row-body.d-flex.align-items-start.flex-column.flex-md-row %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id } %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name } %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name } = options_for_select(ci_variable_type_options, variable_type) - %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-15{ type: "text", + %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-25{ type: "text", name: key_input_name, value: key, placeholder: s_('CiVariables|Input variable key') } - .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0 + .ci-variable-body-item.gl-show-field-errors.table-section.section-25.border-top-0.p-0 .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) } = '*' * 17 %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id), @@ -37,12 +37,12 @@ name: value_input_name, placeholder: s_('CiVariables|Input variable value') } = value - %p.masking-validation-error.gl-field-error.hide + %p.masking-validation-error.gl-field-error.mb-0.hide = s_("CiVariables|Cannot use Masked Variable with current value") = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'masked-variables'), target: '_blank', rel: 'noopener noreferrer' - unless only_key_value - .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0 - .append-right-default + .ci-variable-body-item.ci-variable-protected-item.table-section.section-10.border-top-0 + .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0 = s_("CiVariable|Protected") %button{ type: 'button', class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if is_protected}", @@ -55,8 +55,8 @@ %span.toggle-icon = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked') = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked') - .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0 - .append-right-default + .ci-variable-body-item.ci-variable-masked-item.table-section.section-10.border-top-0 + .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0 = s_("CiVariable|Masked") %button{ type: 'button', class: "js-project-feature-toggle project-feature-toggle qa-variable-masked #{'is-checked' if is_masked}", @@ -70,5 +70,8 @@ = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked') = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked') = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable - %button.js-row-remove-button.ci-variable-row-remove-button.table-section.section-5.border-top-0{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') } - = icon('minus-circle') + .ci-variable-remove-item.ci-variable-row-remove-action.table-section.section-5.border-top-0 + .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0 + = s_("CiVariable|Delete") + %button.btn.btn-remove.js-row-remove-button.ci-variable-row-remove-button.align-items-center.justify-content-center{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') } + = icon('trash-o') diff --git a/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml b/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml new file mode 100644 index 00000000000..926fe15356a --- /dev/null +++ b/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml @@ -0,0 +1,5 @@ +--- +title: Fix poor UI on CI/CD Variables of Project Settings for mobile +merge_request: 30509 +author: Takuya Noguchi +type: fixed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 117625e717f..edbafedfe0b 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -2245,13 +2245,13 @@ msgstr "" msgid "CiVariables|Masked" msgstr "" -msgid "CiVariables|Remove variable row" +msgid "CiVariables|Protected" msgstr "" -msgid "CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default" +msgid "CiVariables|Remove variable row" msgstr "" -msgid "CiVariables|State" +msgid "CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default" msgstr "" msgid "CiVariables|Type" @@ -2269,6 +2269,9 @@ msgstr "" msgid "CiVariable|All environments" msgstr "" +msgid "CiVariable|Delete" +msgstr "" + msgid "CiVariable|Error occurred while saving variables" msgstr "" |