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

UX: Mobile editor style fixes (#7878)

This commit is contained in:
Joe 2019-07-11 21:57:53 +08:00 committed by Kris
parent 25830c73be
commit fd4557a9ef
13 changed files with 135 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -221,7 +221,7 @@ $mobile-breakpoint: 700px;
h3 {
font-weight: normal;
font-size: $font-0;
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
word-wrap: break-word;
}
}
@ -233,7 +233,7 @@ $mobile-breakpoint: 700px;
@include breakpoint(medium, min-width) {
max-height: 100px;
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
word-wrap: break-word;
}
color: $primary-medium;
@ -248,7 +248,7 @@ $mobile-breakpoint: 700px;
.title {
margin-bottom: 1em;
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
.title {
word-wrap: break-word;
}
@ -535,7 +535,7 @@ $mobile-breakpoint: 700px;
padding: 10px;
display: flex;
align-items: center;
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
margin: 0 -10px;
}
label {

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

@ -31,7 +31,7 @@
margin-bottom: 5px;
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
width: 100%;
margin: 2em 0;
.content-wrapper {

4
app/assets/stylesheets/common/admin/api.scss
View File

@ -31,7 +31,7 @@ table.web-hooks.grid {
}
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
tbody {
tr {
grid-template-columns: 0.5fr 1fr;
@ -159,7 +159,7 @@ table.api-keys {
.hook-event {
margin-bottom: 0.5em;
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
width: 100%;
}
}

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

@ -45,7 +45,7 @@ $rollback-darker: darken($rollback, 20%) !default;
}
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
td.backup-filename {
grid-column-start: 1;
grid-column-end: 3;

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

@ -12,7 +12,7 @@
grid-template-columns: 0.25fr repeat(4, 1fr);
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
tr {
grid-template-columns: 0.25fr repeat(3, 1fr);
}

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

@ -116,7 +116,7 @@
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
table.staff-logs tr {
grid-template-columns: 1fr 1fr 0.5fr;
td.staff-users {
@ -433,7 +433,7 @@ table.search-logs-list {
}
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
tr {
td.term {
grid-column-start: 1;

4
app/assets/stylesheets/common/base/cat_reorder.scss
View File

@ -6,7 +6,7 @@
}
input {
width: 4em;
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
width: 2em;
}
}
@ -22,7 +22,7 @@
}
.badge-wrapper span.badge-category {
max-width: 20em;
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
max-width: 30vw;
}
}

2
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -218,7 +218,7 @@
margin-right: 0;
}
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
flex: 0 0 100%;
}
&:hover {

2
app/assets/stylesheets/common/base/user.scss
View File

@ -552,7 +552,7 @@
}
}
.select-kit.multi-select {
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
width: 100%;
}
}

114
app/assets/stylesheets/common/d-editor.scss
View File

@ -76,22 +76,31 @@
display: flex;
align-items: center;
min-height: 30px;
padding-left: 3px;
border-bottom: 1px solid $primary-low;
.btn,
.btn-default {
background-color: transparent;
padding: 4px 8px;
display: inline-block;
.d-icon {
color: $primary-medium;
}
@media all and (max-width: 800px) {
padding: 5px;
svg {
-webkit-transform: translate3d(
0,
0,
0
); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
}
}
.d-editor-spacer {
height: 1em;
display: inline-block;
border-left: 1px solid $primary-low-mid;
}
.btn:not(.no-text) {
font-size: $font-up-1;
}
@ -105,13 +114,6 @@
}
}
.d-editor-spacer {
height: 16px;
margin: 0 5px;
display: inline-block;
border-left: 1px solid $primary-low-mid;
}
.d-editor-preview-wrapper {
overflow: auto;
cursor: default;
@ -181,9 +183,6 @@
.d-editor-textarea-wrapper {
border: 1px solid $primary-low;
}
.d-editor-button-bar .btn {
padding: 6px 8px;
}
.d-editor-preview-wrapper {
max-width: 100%;
margin: 10px 0 0 0;
@ -261,3 +260,90 @@
.mobile-view .d-editor-preview .image-wrapper .button-wrapper {
opacity: 1;
}
// d-editor bar button sizing for all editors - this is kept seprate to keep
// everything in one place
.d-editor-button-bar {
margin: 0.25em;
// shared styles for all font sizes
.btn,
.btn-default {
padding: 0 0.5em;
}
.d-editor-spacer {
margin: 0 0.25em;
}
// small text size
.text-size-smaller & {
@include breakpoint(mobile-large) {
.btn,
.btn-default {
padding: 0 0.4em;
}
}
@include breakpoint(mobile-medium) {
.btn,
.btn-default {
padding: 0 0.3em;
}
.d-editor-spacer {
margin: 0 0.25em;
}
}
}
// normal text size
.text-size-normal & {
@include breakpoint(mobile-large) {
.btn,
.btn-default {
padding: 0 0.35em;
}
}
@include breakpoint(mobile-medium) {
.btn,
.btn-default {
padding: 0 0.25em;
}
}
}
// larger text size
.text-size-larger & {
@include breakpoint(mobile-large) {
.btn,
.btn-default {
padding: 0 0.3em;
}
}
@include breakpoint(mobile-medium) {
.btn,
.btn-default {
padding: 0 0.2em;
}
}
}
// largest text size
.text-size-largest & {
.btn,
.btn-default {
font-size: $font-down-1;
}
@include breakpoint(mobile-large) {
.btn,
.btn-default {
padding: 0 0.3em;
}
}
@include breakpoint(mobile-medium) {
.btn,
.btn-default {
padding: 0 0.2em;
}
}
}
}

3
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -8,7 +8,8 @@
$breakpoints: (
mobile-small: 320px,
mobile-medium: 350px,
mobile: 550px,
mobile-large: 450px,
mobile-extra-large: 550px,
tablet: 768px,
medium: 850px,
large: 1000px,

2
app/assets/stylesheets/desktop/modal.scss
View File

@ -89,7 +89,7 @@
max-width: 48%;
}
@include breakpoint(mobile) {
@include breakpoint(mobile-extra-large) {
flex: 1 1 auto;
min-width: 49%;
max-width: unset;

28
app/assets/stylesheets/mobile/compose.scss
View File

@ -29,6 +29,23 @@
.reply-details {
max-width: calc(100% - 75px);
}
// Protection for languages with long strings on very small screens. This
// has no effect on most users but we need it for some cases. If this is
// not added, "add edit reason" will overlap with the composer controls
@include breakpoint(mobile-small) {
.reply-details {
flex-wrap: wrap;
}
.display-edit-reason {
margin-top: 0.5em;
}
.composer-controls {
align-self: flex-start;
}
}
}
.toggler {
@ -141,17 +158,6 @@
}
.d-editor-button-bar .btn {
svg {
-webkit-transform: translate3d(
0,
0,
0
); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
}
@include breakpoint(mobile-medium) {
padding: 4px;
font-size: 0.96em;
}
&.preview {
margin: 0;
}