From 070de825987ce103ac89059e8c743daaf857dc58 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann <winnie@gitlab.com> Date: Tue, 9 Jan 2018 10:08:28 +0100 Subject: [PATCH] Adjust modal style to new design --- .../vue_shared/components/modal.vue | 4 +-- app/assets/stylesheets/framework/modal.scss | 32 +++++++++++++++---- .../framework/tw_bootstrap_variables.scss | 4 +-- .../stylesheets/framework/variables.scss | 5 +++ app/views/projects/blob/_new_dir.html.haml | 2 +- app/views/projects/blob/_upload.html.haml | 2 +- changelogs/unreleased/winh-style-modals.yml | 5 +++ 7 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 changelogs/unreleased/winh-style-modals.yml diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue index c103c45c7d..8227428d8b 100644 --- a/app/assets/javascripts/vue_shared/components/modal.vue +++ b/app/assets/javascripts/vue_shared/components/modal.vue @@ -122,7 +122,7 @@ > <button type="button" - class="btn pull-left" + class="btn" :class="btnCancelKindClass" @click="emitCancel($event)" data-dismiss="modal" @@ -132,7 +132,7 @@ <button v-if="primaryButtonLabel" type="button" - class="btn pull-right js-primary-button" + class="btn js-primary-button" :disabled="submitDisabled" :class="btnKindClass" @click="emitSubmit($event)" diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 1be66d0ab2..924472f2d7 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -1,4 +1,5 @@ .modal-header { + background-color: $modal-body-bg; padding: #{3 * $grid-size} #{2 * $grid-size}; .page-title { @@ -8,6 +9,7 @@ .modal-body { background-color: $modal-body-bg; + min-height: $modal-body-height; position: relative; padding: #{3 * $grid-size} #{2 * $grid-size}; @@ -20,6 +22,30 @@ } } +.modal-footer { + display: flex; + flex-direction: row; + + .btn + .btn { + margin-left: $grid-size; + } + + @media (max-width: $screen-xs-max) { + flex-direction: column; + + .btn + .btn { + margin-left: 0; + margin-top: $grid-size; + } + } + + @media (min-width: $screen-sm-min) { + .btn:first-of-type { + margin-left: auto; + } + } +} + body.modal-open { overflow: hidden; } @@ -32,12 +58,6 @@ body.modal-open { } } -@media (min-width: $screen-md-min) { - .modal-dialog { - width: 860px; - } -} - @media (min-width: $screen-lg-min) { .modal-full { width: 98%; diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss index a23131e081..d04e555769 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -194,6 +194,6 @@ $modal-body-bg: $white-light; //** Modal footer border color // $modal-footer-border-color: $modal-header-border-color -// $modal-lg: 900px -// $modal-md: 600px +$modal-lg: 860px; +$modal-md: 540px; // $modal-sm: 300px diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ef1520f1f6..da18ddf78d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -733,3 +733,8 @@ $popup-box-shadow-color: rgba(90, 90, 90, 0.05); Multi file editor */ $border-color-settings: #e1e1e1; + +/* +Modals +*/ +$modal-body-height: 134px; diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml index 03ab1bb59e..5d48a35dc4 100644 --- a/app/views/projects/blob/_new_dir.html.haml +++ b/app/views/projects/blob/_new_dir.html.haml @@ -1,5 +1,5 @@ #modal-create-new-dir.modal - .modal-dialog + .modal-dialog.modal-lg .modal-content .modal-header %a.close{ href: "#", "data-dismiss" => "modal" } 脳 diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml index 05b7dfe287..21b6aa4bad 100644 --- a/app/views/projects/blob/_upload.html.haml +++ b/app/views/projects/blob/_upload.html.haml @@ -1,5 +1,5 @@ #modal-upload-blob.modal - .modal-dialog + .modal-dialog.modal-lg .modal-content .modal-header %a.close{ href: "#", "data-dismiss" => "modal" } 脳 diff --git a/changelogs/unreleased/winh-style-modals.yml b/changelogs/unreleased/winh-style-modals.yml new file mode 100644 index 0000000000..b7d0293960 --- /dev/null +++ b/changelogs/unreleased/winh-style-modals.yml @@ -0,0 +1,5 @@ +--- +title: Adjust modal style to new design +merge_request: 16310 +author: +type: other -- 2.30.9