discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-06 11:19:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: Preventing usercard and profile URLs from overflowing

Browse Source
This commit is contained in:
Kris 2018-02-09 16:55:43 -05:00
parent 88a992014b
commit 56352137ca
4 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
View File

@ -103,7 +103,7 @@
{{#if hasLocationOrWebsite}} {{#if hasLocationOrWebsite}}
<div class="location-and-website"> <div class="location-and-website">
{{#if user.location}} {{#if user.location}}
<span class='location'>{{d-icon "map-marker"}} {{user.location}}</span> <span class='location'>{{d-icon "map-marker"}} <span>{{user.location}}</span></span>
{{/if}} {{/if}}
{{#if user.website_name}} {{#if user.website_name}}

2
app/assets/javascripts/discourse/templates/user.hbs
View File

@ -73,7 +73,7 @@
<h3>{{model.title}}</h3> <h3>{{model.title}}</h3>
{{/if}} {{/if}}
{{plugin-outlet name="user-post-names" args=(hash model=model)}} {{plugin-outlet name="user-post-names" args=(hash model=model)}}
<h3> <h3 class="location-and-website">
{{#if model.location}}{{d-icon "map-marker"}} {{model.location}}{{/if}} {{#if model.location}}{{d-icon "map-marker"}} {{model.location}}{{/if}}
{{#if model.website_name}} {{#if model.website_name}}
{{d-icon "globe"}} {{d-icon "globe"}}

30
app/assets/stylesheets/desktop/user-card.scss
View File

@ -165,15 +165,31 @@ $user_card_background: $secondary;
} }
.location-and-website { .location-and-website {
clear: left; display: flex;
margin-top: 5px; width: 100%;
.location {margin-right: 10px;} align-items: center;
.website-name { padding-top: 5px;
a { .location, .website-name {
text-decoration: underline; display: flex;
color: $user_card_primary; flex: 1 1 50%;
max-width: 50%;
overflow: hidden;
align-items: baseline;
i {
margin-right: .25em;
} }
} }
.website-name a, .location span {
overflow: hidden;
text-overflow: ellipsis;
color: $user_card_primary;
}
.location {
margin-right: .5em;
}
.website-name a {
text-decoration: underline;
}
} }
.user-card-avatar { .user-card-avatar {

6
app/assets/stylesheets/desktop/user.scss
View File

@ -176,6 +176,12 @@
a[href] { a[href] {
text-decoration: underline; text-decoration: underline;
} }
.location-and-website {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
.bio { .bio {