Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: general cleanup of inputs, buttons and select elements - part 1

This commit is contained in:
Joe 2018-09-19 20:37:04 +08:00 committed by GitHub
parent 667e68ec58
commit e844fa5370
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 91 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/templates/preferences/account.hbs
View File

@ -113,7 +113,7 @@
<td>
{{#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}}
</td>

8
app/assets/javascripts/discourse/templates/preferences/tags.hbs
View File

@ -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}}

12
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -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;
}

12
app/assets/stylesheets/common/admin/customize.scss
View File

@ -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 {

8
app/assets/stylesheets/common/admin/emails.scss
View File

@ -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 {

2
app/assets/stylesheets/common/admin/settings.scss
View File

@ -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%;

2
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -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 {

13
app/assets/stylesheets/common/admin/users.scss
View File

@ -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);
}
}
}

6
app/assets/stylesheets/common/base/compose.scss
View File

@ -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;

11
app/assets/stylesheets/common/base/discourse.scss
View File

@ -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");

5
app/assets/stylesheets/common/base/modal.scss
View File

@ -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 {

5
app/assets/stylesheets/common/components/buttons.scss
View File

@ -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 {

2
app/assets/stylesheets/common/components/date-picker.scss
View File

@ -14,7 +14,7 @@
.date-picker {
text-align: center;
width: 80px;
width: 8em;
margin: 0;
}

6
app/assets/stylesheets/common/components/navs.scss
View File

@ -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 {

2
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -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;

1
app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
View File

@ -18,7 +18,6 @@
.select-kit-body {
max-width: 32em;
width: 32em;
}
.select-kit-header {

35
app/assets/stylesheets/common/select-kit/multi-select.scss
View File

@ -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;

3
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -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;

14
app/assets/stylesheets/desktop/groups.scss
View File

@ -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;
}
}

34
app/assets/stylesheets/desktop/user.scss
View File

@ -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;
}
}
}

1
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -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
}