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

UX: Improve review queue layout on small screens

This commit is contained in:
Kris 2019-04-17 16:17:54 -04:00
parent cd2e93b598
commit ec4cd09210
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -28,7 +28,7 @@
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
max-width: 760px; // Match topic post width max-width: 760px; // Match topic post width
min-width: 320px; min-width: 0;
margin-right: auto; margin-right: auto;
} }
@ -289,6 +289,11 @@
> tr > th, > tr > th,
> tr > td { > tr > td {
padding: 0.5em 1em 0.5em 0; padding: 0.5em 1em 0.5em 0;
@include breakpoint("mobile") {
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0.5em;
}
} }
.reviewable-score-spacer { .reviewable-score-spacer {
padding-right: 1em; padding-right: 1em;
@ -327,6 +332,10 @@
.created-by { .created-by {
margin-right: 1em; margin-right: 1em;
padding-top: 0.35em; padding-top: 0.35em;
@include breakpoint("mobile") {
float: left;
margin-bottom: 1em;
}
} }
.names { .names {
@ -334,14 +343,17 @@
} }
.post-contents-wrapper { .post-contents-wrapper {
display: flex;
width: 100%; width: 100%;
margin-top: 1em; margin-top: 1em;
min-width: 275px; min-width: 275px;
@include breakpoint("mobile", min-width) {
display: flex;
}
} }
.post-contents { .post-contents {
width: 100%; width: 100%;
min-width: 0; // Flexbox fix
} }
.post-body { .post-body {
@ -413,8 +425,9 @@
width: 100%; width: 100%;
display: block; display: block;
tbody { tbody {
width: 100%; width: calc(100% - 5px);
display: block; display: block;
clear: both;
} }
} }
tr.reviewable-score { tr.reviewable-score {
@ -426,3 +439,9 @@
display: none; display: none;
} }
} }
@include breakpoint("mobile") {
tr.reviewable-score {
grid-template-columns: auto auto auto;
}
}