mirror of
https://github.com/discourse/discourse.git
synced 2024-11-23 12:40:40 +08:00
UX: Improve user profile header layout on mobile
This commit is contained in:
Kris
parent
56b4ee43d3
commit
88a3b89990
|
|
@ -36,10 +36,9 @@
|
|||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
<div class='profile-image'></div>
|
||||
<div class='details'>
|
||||
<div class='primary'>
|
||||
{{user-profile-avatar user=model}}
|
||||
{{user-profile-avatar user=model tagName=""}}
|
||||
<section class='controls'>
|
||||
<ul>
|
||||
{{#if model.can_send_private_message_to_user}}
|
||||
|
|
@ -66,9 +65,10 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if currentUser.staff}}
|
||||
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>
|
||||
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-profile-controls"
|
||||
tagName=""
|
||||
connectorTagName="li"
|
||||
args=(hash model=model)}}
|
||||
|
||||
|
|
@ -89,24 +89,28 @@
|
|||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.name (format-username model.username)}} {{user-status model currentUser=currentUser}}</h1>
|
||||
<h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
|
||||
{{#if model.staged}}
|
||||
<h2 class="staged">{{i18n 'user.staged'}}</h2>
|
||||
{{/if}}
|
||||
{{#if model.title}}
|
||||
<h3>{{model.title}}</h3>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-post-names" args=(hash model=model)}}
|
||||
<div class="user-profile-names">
|
||||
<h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.name (format-username model.username)}} {{user-status model currentUser=currentUser}}</h1>
|
||||
<h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
|
||||
{{#if model.staged}}
|
||||
<h2 class="staged">{{i18n 'user.staged'}}</h2>
|
||||
{{/if}}
|
||||
{{#if model.title}}
|
||||
<h3>{{model.title}}</h3>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-post-names" args=(hash model=model)}}
|
||||
</div>
|
||||
<h3 class="location-and-website">
|
||||
{{#if model.location}}{{d-icon "map-marker-alt"}} {{model.location}}{{/if}}
|
||||
{{#if model.location}}<div class="user-profile-location">{{d-icon "map-marker-alt"}} {{model.location}}</div>{{/if}}
|
||||
{{#if model.website_name}}
|
||||
<div class="user-profile-website">
|
||||
{{d-icon "globe"}}
|
||||
{{#if linkWebsite}}
|
||||
<a href={{model.website}} rel={{unless removeNoFollow 'nofollow noopener'}} target="_blank">{{model.website_name}}</a>
|
||||
{{else}}
|
||||
<span title={{model.website}}>{{model.website_name}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-location-and-website" args=(hash model=model)}}
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -199,8 +199,8 @@
|
|||
font-size: $font-up-1;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3,
|
||||
h3.location-and-website {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ $base-space: 4px;
|
|||
// Strip units if 0
|
||||
$size: $size * $base-space;
|
||||
$size: $size / ($size * 0 + 1);
|
||||
} @else if ($size == auto) {
|
||||
$size: auto;
|
||||
} @else {
|
||||
$size: $size * $base-space;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,6 @@
|
|||
|
||||
.details {
|
||||
padding: 0 0 4px 0;
|
||||
margin-top: -200px;
|
||||
transition: margin 0.15s linear;
|
||||
|
||||
img.avatar {
|
||||
|
|
@ -164,10 +163,14 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
.location-and-website {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.user-profile-location {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,6 +187,7 @@
|
|||
&.has-background {
|
||||
.details {
|
||||
padding: 15px 15px 4px 15px;
|
||||
margin-top: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -221,6 +225,7 @@
|
|||
|
||||
.details {
|
||||
padding: 0 0 2px 0;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
|
|
|
|||
7
app/assets/stylesheets/mobile/user-badges.scss
Normal file
7
app/assets/stylesheets/mobile/user-badges.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.show-badge-details {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.badge-grant-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +1,33 @@
|
|||
// Mobile styles for "/user" section
|
||||
.user-right {
|
||||
&,
|
||||
> .user-stream {
|
||||
> .alert:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-main {
|
||||
margin-top: 10px;
|
||||
table.group-members {
|
||||
width: 100%;
|
||||
p {
|
||||
max-width: 600px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
td {
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
span.text {
|
||||
float: right;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
width: 245px;
|
||||
}
|
||||
}
|
||||
margin-top: s(3);
|
||||
|
||||
.user-content {
|
||||
background-color: $secondary;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
|
||||
.btn.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
background-color: $secondary;
|
||||
margin-top: s(3);
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: s(3);
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background: dark-light-diff($primary, $secondary, 0%, -75%) center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0;
|
||||
color: $secondary;
|
||||
|
||||
&.no-background {
|
||||
.profile-image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
margin-bottom: s(3);
|
||||
dl {
|
||||
padding: 5px 0;
|
||||
padding: s(2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 15px 5px 5px 5px;
|
||||
background: $secondary;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: $line-height-small;
|
||||
}
|
||||
|
||||
|
|
@ -81,32 +35,82 @@
|
|||
line-height: $line-height-medium;
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $primary;
|
||||
|
||||
.avatar {
|
||||
margin: 0 5px 10px 5px;
|
||||
.user-profile-avatar {
|
||||
.avatar-flair {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.primary-textual {
|
||||
flex: 1 1 40%;
|
||||
padding-left: 5px;
|
||||
word-break: break-word;
|
||||
a[href] {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
color: $primary;
|
||||
max-width: 700px;
|
||||
display: block;
|
||||
float: none;
|
||||
margin: s(2 auto);
|
||||
img.avatar {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-avatar .avatar-flair {
|
||||
right: 2px;
|
||||
.user-profile-names {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.location-and-website {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
font-size: $font-0;
|
||||
.d-icon {
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-location {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.user-profile-location,
|
||||
.user-profile-website {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $primary;
|
||||
|
||||
.avatar {
|
||||
margin: 0 0 s(3);
|
||||
}
|
||||
|
||||
.primary-textual {
|
||||
flex: 1 1 100%;
|
||||
word-break: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bio {
|
||||
color: $primary;
|
||||
margin: 0 auto s(2);
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-background {
|
||||
background-size: contain;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.user-profile-avatar {
|
||||
margin-top: s(-24);
|
||||
}
|
||||
.details {
|
||||
margin-top: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,17 +124,17 @@
|
|||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 0 1 100%;
|
||||
margin: 0 5px;
|
||||
margin-left: -1em;
|
||||
li,
|
||||
> span {
|
||||
display: flex;
|
||||
flex: 1 1 45%;
|
||||
margin-left: 1em;
|
||||
button,
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-controls-outlet {
|
||||
|
|
@ -145,22 +149,6 @@
|
|||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed-info {
|
||||
.details {
|
||||
.primary {
|
||||
.primary-textual {
|
||||
margin: 0 10px 5px 0;
|
||||
}
|
||||
.avatar {
|
||||
margin: 0 5px 10px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile-avatar .avatar-flair {
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-field {
|
||||
|
|
@ -172,13 +160,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
.user-main .collapsed-info.about.has-background {
|
||||
background-image: none !important; // todo: make changes to behavior to remove this
|
||||
.details {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.has-background .details {
|
||||
margin-top: 200px;
|
||||
.user-main .collapsed-info.about .details {
|
||||
display: flex;
|
||||
.user-profile-avatar {
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.primary .primary-textual {
|
||||
flex: 1 0 80%;
|
||||
margin: 0;
|
||||
}
|
||||
.user-profile-names {
|
||||
text-align: left;
|
||||
}
|
||||
.controls {
|
||||
margin: s(2) 0 s(3);
|
||||
border-bottom: 1px solid $primary-low;
|
||||
}
|
||||
}
|
||||
|
||||
.form-horizontal .control-group.category {
|
||||
|
|
@ -201,7 +207,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// mobile fixups for badges
|
||||
.badge-card.medium {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -210,40 +215,13 @@
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.show-badge-details {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.badge-grant-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.user-preferences {
|
||||
.instructions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.category-controls {
|
||||
padding-top: 8px;
|
||||
margin-top: s(1);
|
||||
}
|
||||
|
||||
.controls-dropdown {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
select {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-button {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
max-width: 200px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
margin-bottom: s(4);
|
||||
}
|
||||
|
||||
.delete-account {
|
||||
|
|
@ -261,10 +239,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.desktop-notifications button {
|
||||
float: none;
|
||||
}
|
||||
.apps .controls button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
margin-bottom: s(4);
|
||||
}
|
||||
|
||||
.user-right {
|
||||
&,
|
||||
> .user-stream {
|
||||
> .alert:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user