Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 13

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
Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/common/base/user.scss
View file

@ -53,7 +53,7 @@
} }
.details { .details {
background: rgba($secondary, .85); background: rgba($secondary, .8);
blockquote { blockquote {
background-color: $secondary-low; background-color: $secondary-low;
@ -145,7 +145,7 @@
.details { .details {
margin-top: 0; margin-top: 0;
background: rgba($secondary, .85); background: rgba($secondary, .8);
.bio { .bio {
display: none; display: none;
@ -198,7 +198,7 @@
} }
a { a {
color: dark-light-choose($primary-medium, $secondary-high); color: $secondary;
} }
.active { .active {

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

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

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

@ -165,12 +165,16 @@
.d-editor-textarea-wrapper { .d-editor-textarea-wrapper {
border: 1px solid $primary-low; border: 1px solid $primary-low;
} }
.d-editor-button-bar .btn {
padding: 6px 8px;
}
.d-editor-preview-wrapper { .d-editor-preview-wrapper {
max-width: 100%; max-width: 100%;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
.d-editor-preview { .d-editor-preview {
background-color: $primary-very-low; background-color: $primary-very-low;
padding: 5px;
} }
} }

100
app/assets/stylesheets/mobile/user.scss
View file

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