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
master
りんすき 7 years ago committed by unarist
parent 4f337c020a
commit d556be2968
  1. 4
      app/javascript/mastodon/components/column_header.js
  2. 17
      app/javascript/styles/mastodon/components.scss

@ -137,7 +137,9 @@ export default class ColumnHeader extends React.PureComponent {
<div className={wrapperClassName}>
<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`} />
{title}
<span className='column-header__title'>
{title}
</span>
<div className='column-header__buttons'>
{backButton}

@ -2280,6 +2280,7 @@ button.icon-button.active i.fa-retweet {
}
.column-header {
display: flex;
padding: 15px;
font-size: 16px;
background: lighten($ui-base-color, 4%);
@ -2305,12 +2306,10 @@ button.icon-button.active i.fa-retweet {
}
.column-header__buttons {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
height: 48px;
display: flex;
margin: -15px;
margin-left: 0;
}
.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 {
display: inline-block;
padding: 0;

Loading…
Cancel
Save