From e844fa537090bc2e80d8470c38a215dfa7857210 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Wed, 19 Sep 2018 20:37:04 +0800 Subject: [PATCH] UX: general cleanup of inputs, buttons and select elements - part 1 --- .../templates/preferences/account.hbs | 2 +- .../discourse/templates/preferences/tags.hbs | 8 ++--- .../stylesheets/common/admin/admin_base.scss | 12 +++---- .../stylesheets/common/admin/customize.scss | 12 +++++-- .../stylesheets/common/admin/emails.scss | 8 ----- .../stylesheets/common/admin/settings.scss | 2 -- .../stylesheets/common/admin/staff_logs.scss | 2 +- .../stylesheets/common/admin/users.scss | 13 ++++--- .../stylesheets/common/base/compose.scss | 6 +++- .../stylesheets/common/base/discourse.scss | 11 +++--- app/assets/stylesheets/common/base/modal.scss | 5 +-- .../common/components/buttons.scss | 5 ++- .../common/components/date-picker.scss | 2 +- .../stylesheets/common/components/navs.scss | 6 +++- .../common/select-kit/combo-box.scss | 2 -- .../common/select-kit/mini-tag-chooser.scss | 1 - .../common/select-kit/multi-select.scss | 35 +++++-------------- .../common/select-kit/select-kit.scss | 3 ++ app/assets/stylesheets/desktop/groups.scss | 14 -------- app/assets/stylesheets/desktop/user.scss | 34 ++++++++++++------ app/assets/stylesheets/mobile/topic-list.scss | 1 + 21 files changed, 91 insertions(+), 93 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs index e53f1831695..84b58b05c7f 100644 --- a/app/assets/javascripts/discourse/templates/preferences/account.hbs +++ b/app/assets/javascripts/discourse/templates/preferences/account.hbs @@ -113,7 +113,7 @@ {{#if authProvider.method.can_revoke}} {{#conditional-loading-spinner condition=revoking size='small'}} - {{d-button action="revokeAccount" actionParam=authProvider.account title="user.associated_accounts.revoke" icon="trash" }} + {{d-button action="revokeAccount" actionParam=authProvider.account title="user.associated_accounts.revoke" class="btn-danger no-text" icon="trash" }} {{/conditional-loading-spinner}} {{/if}} diff --git a/app/assets/javascripts/discourse/templates/preferences/tags.hbs b/app/assets/javascripts/discourse/templates/preferences/tags.hbs index ef1dcc541f6..6e7c2731471 100644 --- a/app/assets/javascripts/discourse/templates/preferences/tags.hbs +++ b/app/assets/javascripts/discourse/templates/preferences/tags.hbs @@ -8,7 +8,7 @@ {{tag-chooser tags=model.watched_tags blacklist=selectedTags - filterPlaceholder=null + filterPlaceholder="select_kit.filter_placeholder" allowCreate=false everyTag=true unlimitedTagCount=true}} @@ -20,7 +20,7 @@ {{tag-chooser tags=model.tracked_tags blacklist=selectedTags - filterPlaceholder=null + filterPlaceholder="select_kit.filter_placeholder" allowCreate=false everyTag=true unlimitedTagCount=true}} @@ -32,7 +32,7 @@ {{tag-chooser tags=model.watching_first_post_tags blacklist=selectedTags - filterPlaceholder=null + filterPlaceholder="select_kit.filter_placeholder" allowCreate=false everyTag=true unlimitedTagCount=true}} @@ -44,7 +44,7 @@ {{tag-chooser tags=model.muted_tags blacklist=selectedTags - filterPlaceholder=null + filterPlaceholder="select_kit.filter_placeholder" allowCreate=false everyTag=true unlimitedTagCount=true}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index eba24bfd939..4d46284d9c5 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -550,8 +550,11 @@ $mobile-breakpoint: 700px; @include breakpoint(mobile) { margin: 0 -10px; } + label { + margin-bottom: 0; + } input { - margin: 0; + margin-right: 5px; @include breakpoint(tablet) { max-width: 150px; } @@ -614,8 +617,6 @@ $mobile-breakpoint: 700px; } } .toggle { - margin-top: 8px; - float: right; span { font-weight: bold; } @@ -627,11 +628,6 @@ $mobile-breakpoint: 700px; #last-seen input[type="text"] { float: none; } - .ac-wrap { - display: inline-block; - vertical-align: middle; - padding: 0; - } .pull-right { padding-right: 10px; } diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index b03be8f3a34..1f1c3b41c10 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -570,8 +570,16 @@ } } -.permalink-form .select-kit { - width: 150px; +.permalink-form { + display: flex; + align-items: center; + + .select-kit { + width: 150px; + } + input { + margin: 0 5px; + } } .permalink-title { diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss index 2267abbc698..d7bb83c5def 100644 --- a/app/assets/stylesheets/common/admin/emails.scss +++ b/app/assets/stylesheets/common/admin/emails.scss @@ -1,13 +1,5 @@ // Styles for admin/emails -.email-preview { - .ac-wrap { - .item { - margin: 0.2em 0 0 0.4em; - } - } -} - // Emails .email-list { .filters input { diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss index 90df1c5e43d..2a8f4c22a36 100644 --- a/app/assets/stylesheets/common/admin/settings.scss +++ b/app/assets/stylesheets/common/admin/settings.scss @@ -39,8 +39,6 @@ } .input-setting-string, .input-setting-textarea { - box-sizing: border-box; - height: 30px; width: 100%; @media (max-width: $mobile-breakpoint) { width: 100%; diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss index 883504061b2..585b848e93d 100644 --- a/app/assets/stylesheets/common/admin/staff_logs.scss +++ b/app/assets/stylesheets/common/admin/staff_logs.scss @@ -246,7 +246,7 @@ margin: 0 -0.25em 1em; display: flex; flex-wrap: wrap; - align-items: baseline; + align-items: center; } @media screen and (min-width: 800px) { .screened-ip-address-form { diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss index 246dfc5c523..81693525894 100644 --- a/app/assets/stylesheets/common/admin/users.scss +++ b/app/assets/stylesheets/common/admin/users.scss @@ -78,14 +78,19 @@ margin-left: 0; } .btn { - margin: 2px 5px 2px 0; + margin-right: 5px; } } } -.admin-users .users-list { - .username .fa { - color: dark-light-choose($primary-medium, $secondary-medium); +.admin-users { + input { + margin-bottom: 0; + } + .users-list { + .username .fa { + color: dark-light-choose($primary-medium, $secondary-medium); + } } } diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 1d355ac9e8a..e38c3efad36 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -222,7 +222,8 @@ } .add-warning { - margin-left: 1em; + margin-left: 0.75em; + margin-bottom: 0; display: flex; input { margin-right: 5px; @@ -399,8 +400,11 @@ div.ac-wrap { max-height: 150px; display: flex; flex-wrap: wrap; + align-items: center; background-color: $secondary; border: 1px solid $primary-medium; + min-height: 30px; + box-sizing: border-box; div.item { float: left; padding: 4px 10px; diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 6e353803b08..e572319a7f9 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -111,15 +111,16 @@ span.relative-date { } label { - display: block; + display: flex; margin-bottom: 5px; } input { &[type="radio"], &[type="checkbox"] { - margin: 3px 0; - line-height: $line-height-medium; + margin-top: 3px; + margin-left: 3px; + line-height: $line-height-small; cursor: pointer; } &[type="submit"], @@ -192,11 +193,13 @@ input { padding: $input-padding; margin-bottom: 9px; font-size: $font-0; - line-height: $line-height-large; + line-height: $line-height-small; color: $primary; background-color: $secondary; border: 1px solid $primary-medium; border-radius: 0; + box-sizing: border-box; + min-height: 30px; &:focus { border-color: $tertiary; box-shadow: shadow("focus"); diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 74faa11ce60..0582f57d6ec 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -370,7 +370,8 @@ .edit-category-modal { input[type="number"] { - width: 50px; + min-width: 8em; + margin-bottom: 0; } .subcategory-list-style-field { @@ -468,7 +469,7 @@ .change-timestamp, .poll-ui-builder { .date-picker { - width: 9em; + min-width: 8em; } #date-container { diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index e3a77bb6052..ebd7ed7bab0 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -11,10 +11,12 @@ padding: 6px 12px; font-weight: 500; font-size: $font-0; - line-height: $line-height-medium; + line-height: $line-height-small; text-align: center; cursor: pointer; transition: all 0.25s; + box-sizing: border-box; + min-heigth: 30px; &:active, &.btn-active { @@ -50,6 +52,7 @@ &[href] { color: $primary; + min-height: unset; // ovverides button defaults } &:hover, &.btn-hover { diff --git a/app/assets/stylesheets/common/components/date-picker.scss b/app/assets/stylesheets/common/components/date-picker.scss index 801e7b3a066..b4fac1b2e81 100644 --- a/app/assets/stylesheets/common/components/date-picker.scss +++ b/app/assets/stylesheets/common/components/date-picker.scss @@ -14,7 +14,7 @@ .date-picker { text-align: center; - width: 80px; + width: 8em; margin: 0; } diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss index c6275459230..c1e295c9984 100644 --- a/app/assets/stylesheets/common/components/navs.scss +++ b/app/assets/stylesheets/common/components/navs.scss @@ -30,7 +30,11 @@ padding: 6px 12px; color: $primary; font-size: $font-up-1; - line-height: $line-height-medium; + line-height: $line-height-small; + box-sizing: border-box; + min-height: 30px; + display: flex; + align-items: center; transition: background 0.15s; .d-icon { diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss index 7011a93cc4d..0dea77b9d1c 100644 --- a/app/assets/stylesheets/common/select-kit/combo-box.scss +++ b/app/assets/stylesheets/common/select-kit/combo-box.scss @@ -45,8 +45,6 @@ padding: $input-padding; font-weight: 500; font-size: $font-0; - line-height: $line-height-large; - min-height: 2em; // when no content is available &.is-focused { border: 1px solid $tertiary; diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss index 9a4bb6b3b7a..339ec4bb152 100644 --- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss +++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss @@ -18,7 +18,6 @@ .select-kit-body { max-width: 32em; - width: 32em; } .select-kit-header { diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index 9b7e158aa91..0f68bf1a6cd 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -18,6 +18,7 @@ .select-kit-filter { border: 0; flex: 1; + margin: 1px; } .multi-select-header { @@ -64,7 +65,7 @@ } .choices { - margin: 1px; + margin: 0 2px; box-sizing: border-box; display: flex; justify-content: flex-start; @@ -74,12 +75,11 @@ display: inline-flex; box-sizing: border-box; padding: 0 5px; - border: 1px solid transparent; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-direction: row; - margin: 1px; + margin: 1px 0px 2px 2px; } .filter { @@ -105,7 +105,7 @@ border: 0; box-shadow: none; border-radius: 0; - height: 21px; + min-height: unset; // overrides input defaults } } @@ -118,7 +118,7 @@ .color-preview { height: 5px; - margin: 0 2px 2px 2px; + margin: 0 2px 2px 0px; display: flex; width: 100%; } @@ -148,36 +148,19 @@ } .selected-name { - color: $primary; - background-clip: padding-box; - -webkit-touch-callout: none; - user-select: none; - background-color: $primary-low; - cursor: pointer; - outline: none; - line-height: $line-height-medium; - overflow: hidden; - flex: 0 1 auto; - flex-wrap: nowrap; - padding: 0; - display: flex; - flex-direction: column; - + flex: unset; .footer { display: flex; width: 100%; } .body { - display: flex; - align-items: center; - flex: 1; + background: $primary-low; + padding: 2px 4px; + margin-right: 2px; } .name { - padding: 2px 4px; - line-height: $line-height-medium; - &:after { content: "\f00d"; color: $primary-low-mid; diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 6a9fdb1617e..ccf97fa606c 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -66,10 +66,13 @@ align-items: center; justify-content: space-between; flex-direction: row; + min-height: 30px; + line-height: $line-height-small; .selected-name { text-align: left; flex: 1 1 auto; + padding: 1px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/app/assets/stylesheets/desktop/groups.scss b/app/assets/stylesheets/desktop/groups.scss index b325241d7c1..b66a1b8366b 100644 --- a/app/assets/stylesheets/desktop/groups.scss +++ b/app/assets/stylesheets/desktop/groups.scss @@ -9,17 +9,3 @@ thead { padding-left: 2px; } } - -$filter-line-height: 1.5; - -.groups-header-filters { - .groups-header-filters-type { - .select-kit-header { - line-height: $filter-line-height; - } - } - - input { - line-height: $filter-line-height; - } -} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index bcf73c5b479..c9470628d29 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -265,28 +265,34 @@ padding-top: 10px; padding-left: 30px; + .form-vertical { + width: 400px; + max-width: 100%; + } + h3 { color: $primary; margin: 20px 0 10px 0; } - textarea { - width: 530px; - } - .category-selector, - .tag-chooser { - width: 530px; + .tag-chooser, + textarea { + width: 100%; } input { &.user-selector { - width: 530px; + width: 100%; } + } - &[type="text"] { - @include breakpoint(medium) { - width: 450px; + .tag-controls, + .category-controls { + label { + align-items: center; + .d-icon { + margin-right: 3px; } } } @@ -314,4 +320,12 @@ .user-main & .user-field.text { padding-top: 0; } + + .image-upload-controls { + display: flex; + align-items: center; + .btn { + margin-right: 5px; + } + } } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index d9c3f14e123..f7320c1fe96 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -19,6 +19,7 @@ box-sizing: border-box; display: flex; align-self: stretch; + align-items: center; margin: 0 3px 10px 3px; order: 10; // always last for consistent placement }