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

UX: Input and search cleanup (#5546) 

* Cleaning up input sizes

* alignment

* more alignment adjustments
This commit is contained in:
Kris 2018-01-31 11:44:51 -05:00 committed by GitHub
parent 421713f1be
commit add641cbbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,7 +179,6 @@
}
#reply-title {
padding: 6px 10px;
margin: 0 0 5px 0;
flex-basis: 50%;
}
@ -187,15 +186,12 @@
.tag-chooser {
flex: 1 1 25%;
margin: 0 0 5px 10px;
border: 1px solid $primary-medium;
background: $secondary;
@media all and (max-width: 900px) {
margin: 0;
flex: 1 1 100%;
}
.select2-choices {
border: none;
}
&.select2-dropdown-open, &.select2-container-active {
border-color: $tertiary;
}
@ -328,10 +324,9 @@ div.ac-wrap div.item a.remove, .remove-link {
margin-left: 4px;
font-size: $font-down-1;
line-height: $line-height-small;
padding: 1.5px 1.5px 1.5px 2.5px;
padding: 1px 3.5px;
border-radius: 12px;
width: 10px;
display: inline-block;
box-sizing: border-box;
border: 1px solid $primary-low;
&:hover {
background-color: $danger-low;
@ -344,17 +339,17 @@ div.ac-wrap div.item a.remove, .remove-link {
div.ac-wrap {
overflow: auto;
max-height: 150px;
display: flex;
flex-wrap: wrap;
background-color: $secondary;
border: 1px solid $primary-medium;
padding: 5px 4px 1px 10px;
div.item {
float: left;
margin-bottom: 4px;
margin-right: 10px;
span {
height: 24px;
display: inline-block;
padding: 4px 10px;
line-height: $line-height-large;
span {
display: inline-block;
line-height: $line-height-medium;
}
}
@ -368,12 +363,10 @@ div.ac-wrap {
input[type="text"] {
float: left;
margin-bottom: 4px;
height: 24px;
display: block;
border: 0;
padding: 0;
box-shadow: none;
border: 0;
margin: 0;
}
}

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

@ -186,11 +186,10 @@ input {
&[type="color"] {
@include appearance-none;
display: inline-block;
height: 18px;
padding: 4px 10px;
margin-bottom: 9px;
font-size: $font-0;
line-height: $line-height-medium;
line-height: $line-height-large;
color: $primary;
background-color: $secondary;
border: 1px solid $primary-medium;

98
app/assets/stylesheets/common/base/search.scss
View File

@ -87,10 +87,14 @@
.search.row {
margin-bottom: 15px;
.input-xxlarge {
width: 100%;
}
.search-bar {
display: flex;
margin-bottom: 10px;
max-width: 780px;
input {
height: 22px;
padding-left: 6px;
@ -103,30 +107,6 @@
}
}
.search-advanced {
margin-bottom: 15px;
.search-advanced-btn {
padding: 8px 10px;
width: 100%;
text-align: left;
font-weight: bold;
}
.search-advanced-options {
border: 1px solid $primary-low;
padding: 10px;
.control-group.pull-left {
width: 50%;
}
input[type="checkbox"] {
height: auto;
}
}
}
.no-results-suggestion {
margin-top: 30px;
}
@ -139,26 +119,28 @@
}
.search-title {
position: relative;
margin: 10px 0 15px;
max-width: 780px;
border-bottom: 3px solid $primary-low;
width: 100%;
.term {
font-weight: bold;
}
position: relative;
.result-count {
float: left;
margin-bottom: 4px;
span {
line-height: $line-height-large;
height: 28px;
display: inline-block;
}
margin-bottom: 4px;
}
margin: 10px 0 15px;
max-width: 780px;
border-bottom: 3px solid $primary-low;
width: 100%;
.sort-by {
float: right;
margin-bottom: 4px;
.desc {
margin-right: 5px;
}
@ -167,11 +149,61 @@
width: auto;
min-width: 150px;
}
float: right;
margin-bottom: 4px;
}
}
.google-search-form {
margin-top: 2em;
}
.search-advanced {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
max-width: 780px;
.search-advanced-options {
border: 1px solid $primary-low;
padding: 0 20px;
width: 100%;
.date-picker-wrapper {
vertical-align: top;
}
@media screen and (max-width: 715px) {
padding: 0 10px;
#postTime {
margin: 0 0 5px 0;
}
}
}
.search-advanced-btn {
flex: 1 1 100%;
width: 100%;
text-align: left;
font-weight: bold;
}
.container {
display: flex;
flex: 1 1 100%;
padding: 15px 0 10px 0;
.all-tags {
margin-bottom: 0;
}
@media screen and (max-width: 600px) {
flex-wrap: wrap;
}
&:not(:first-of-type) {
border-top: 1px solid $primary-low;
}
.control-group {
flex: 1 1 100%;
@media screen and (max-width: 600px) {
margin: 0;
&:nth-of-type(2) {
margin-top: 5px;
}
}
}
}
}

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

@ -7,8 +7,8 @@
}
.date-picker-wrapper {
display: inline-block;
position: relative;
display: inline-block;
}
.date-picker {

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

@ -25,10 +25,10 @@
.select-box-kit-header, .select-kit-header {
background: $secondary;
border: 1px solid $primary-medium;
padding: 6px 10px;
padding: 4px 10px;
font-weight: 500;
font-size: $font-0;
line-height: $line-height-medium;
line-height: $line-height-large;
&.is-focused {
border: 1px solid $tertiary;

27
app/assets/stylesheets/mobile/search.scss
View File

@ -5,19 +5,8 @@
.search-advanced {
.search-advanced-options {
.control-group {
padding-bottom: 10px;
&.pull-left {
float: none;
width: auto;
}
margin-bottom: 10px;
.controls {
label {
display: block;
margin-bottom: 5px;
}
input:not([type="checkbox"]),select {
width: 75%;
}
@ -26,13 +15,23 @@
}
}
.search-title {
.sort-by {
display: flex;
width: 100%;
align-items: center;
.select-kit {
flex: 1 1 auto;
}
}
}
.search.row {
margin-top: 5px;
margin-top: 10px;
}
.search.row input.search {
height: 25px;
width: 69%;
}
.fps-search-context {

2
app/assets/stylesheets/vendor/select2.scss vendored
View File

@ -439,13 +439,13 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
}
.select2-container-multi .select2-choices .select2-search-field input {
margin: 1px 0;
padding-left: 0;
font-family: sans-serif;
font-size: 1em;
color: #666;
outline: 0;
border: 0;
margin-bottom: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent !important;