zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 10 Releases Wiki Activity

Fix column design broken with very long title (#5493) 

* Fix #5314

* fix not beautiful code

* fix broken design with mobile view

* remove no longer needed code
This commit is contained in:
りんすき 2017-10-26 22:52:48 +09:00 committed by unarist
parent 4f337c020a
commit d556be2968
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/column_header.js
View File

@ -137,7 +137,9 @@ export default class ColumnHeader extends React.PureComponent {
<div className={wrapperClassName}> <div className={wrapperClassName}>
<h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}> <h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} /> <i className={`fa fa-fw fa-${icon} column-header__icon`} />
{title} <span className='column-header__title'>
{title}
</span>
<div className='column-header__buttons'> <div className='column-header__buttons'>
{backButton} {backButton}

17
app/javascript/styles/mastodon/components.scss
View File

@ -2280,6 +2280,7 @@ button.icon-button.active i.fa-retweet {
} }
.column-header { .column-header {
display: flex;
padding: 15px; padding: 15px;
font-size: 16px; font-size: 16px;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
@ -2305,12 +2306,10 @@ button.icon-button.active i.fa-retweet {
} }
.column-header__buttons { .column-header__buttons {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
height: 48px; height: 48px;
display: flex;
margin: -15px;
margin-left: 0;
} }
.column-header__button { .column-header__button {
@ -2378,6 +2377,14 @@ button.icon-button.active i.fa-retweet {
} }
} }
.column-header__title {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex: 1;
}
.text-btn { .text-btn {
display: inline-block; display: inline-block;
padding: 0; padding: 0;