github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 13:43:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Cleaning up user profiles on mobile

Browse Source
This commit is contained in:
Kris 2017-12-11 15:40:04 -05:00 committed by GitHub
parent 19ee2c3fac
commit 60cd28d5b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@
}
.details {
background: rgba($secondary, .85);
background: rgba($secondary, .8);
blockquote {
background-color: $secondary-low;
@ -145,7 +145,7 @@
.details {
margin-top: 0;
background: rgba($secondary, .85);
background: rgba($secondary, .8);
.bio {
display: none;
@ -198,7 +198,7 @@
}
a {
color: dark-light-choose($primary-medium, $secondary-high);
color: $secondary;
}
.active {
@ -388,7 +388,7 @@
&.linked-stat { // This makes the entire "box" (the li) clickable instead of a narrow area.
padding: 0;
a {
padding: 10px 14px;
padding: 10px 14px;
width: 100%;
height: 100%;
display: block;

3
app/assets/stylesheets/common/components/user-info.scss
View File

@ -39,6 +39,9 @@
&.small {
width: 333px;
@media screen and (max-width: 600px) {
width: 100%;
}
}
&.medium {

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

@ -165,12 +165,16 @@
.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;
}
.d-editor-preview {
background-color: $primary-very-low;
padding: 5px;
}
}

102
app/assets/stylesheets/mobile/user.scss
View File

@ -48,10 +48,6 @@
float: right
}
h2 {
margin-bottom: 10px;
}
table {
width: 100%;
margin-top: 10px;
@ -74,11 +70,21 @@
margin-bottom: 10px;
color: $secondary;
&.no-background {
.profile-image {
display: none;
}
}
.secondary {
background: $primary-low;
dl {
padding: 10px 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px;
}
dd {
@ -87,18 +93,30 @@
}
.details {
padding: 15px 0 4px 0;
padding: 15px 5px 5px 5px;
h1 {
margin: 10px 0 0 0;
margin: 0;
line-height: 1;
}
h2 {
line-height: normal;
}
.primary {
display: flex;
flex-wrap: wrap;
color: $primary;
.avatar {
margin: 0 5px 10px 5px;
}
.primary-textual {
float: left;
padding-left: 15px;
flex: 1 1 40%;
padding-left: 5px;
word-break: break-word;
a[href] {
color: $primary;
}
@ -112,21 +130,47 @@
}
.controls {
float: left;
padding-left: 15px;
order: 3;
flex: 1 1 25%;
margin-left: auto;
ul {
margin: 0;
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
}
li, span {
display: flex;
flex: 1 1 auto;
margin: 0 5px;
}
.user-profile-controls-outlet {
margin: 0;
li {
margin: 0;
}
}
a {
width: 120px;
flex: 1 1 auto;
min-width: 120px;
}
}
&.collapsed-info {
.details {
padding: 12px 15px 2px 15px;
.primary {
.primary-textual {
margin: 0 10px 5px 0;
}
.avatar {
margin: 0 5px 10px 5px;
}
}
}
}
}
@ -162,9 +206,21 @@
margin-top: 20px;
}
.stats-section {
li {
margin: 0 15px 10px 0;
padding: 0;
&.linked-stat {
a {
padding: 0;
}
}
}
}
// mobile fixups for badges
.badge-card.medium {
width: 300px;
width: 100%;
}
.user-badges {
@ -180,14 +236,6 @@
}
.user-preferences {
.control-group {
padding: 8px 36px 8px 8px;
}
.static {
margin-top: 5px;
margin-left: 5px;
}
.instructions {
margin-top: 5px;
@ -200,7 +248,6 @@
.controls-dropdown {
margin-top: 10px;
margin-bottom: 15px;
padding-left: 5px;
select {
width: 280px;
@ -222,10 +269,13 @@
}
.checkbox-label {
overflow: auto;
display: block;
display: flex;
overflow: auto;
width: 100%;
padding: 5px 8px;
padding: 5px 0;
input {
margin-right: 5px;
}
}
.desktop-notifications button {