specter/mastodon
1
0
Fork 1
forked from fedi/mastodon
Code Pull requests Activity

Fix button hiding when header title is too long (#6406)

Browse source
This commit is contained in:
abcang 2018-02-02 01:17:17 +09:00 committed by Eugen Rochko
parent 3ed194b67d
commit ffb2b8ef8c
2 changed files with 7 additions and 16 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

@ -133,9 +133,7 @@ export default class ColumnHeader extends React.PureComponent {
<h1 className={buttonClassName}> <h1 className={buttonClassName}>
<button onClick={this.handleTitleClick}> <button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} /> <i className={`fa fa-fw fa-${icon} column-header__icon`} />
<span className='column-header__title'> {title}
{title}
</span>
</button> </button>
<div className='column-header__buttons'> <div className='column-header__buttons'>

19
app/javascript/styles/mastodon/components.scss
View file

@ -1913,7 +1913,7 @@
font-family: inherit; font-family: inherit;
color: $ui-highlight-color; color: $ui-highlight-color;
cursor: pointer; cursor: pointer;
flex: 0 0 auto; white-space: nowrap;
font-size: 16px; font-size: 16px;
padding: 0 5px 0 0; padding: 0 5px 0 0;
z-index: 3; z-index: 3;
@ -2403,15 +2403,16 @@
overflow: hidden; overflow: hidden;
& > button { & > button {
display: flex;
flex: auto;
margin: 0; margin: 0;
border: none; border: none;
padding: 15px; padding: 15px 0 15px 15px;
color: inherit; color: inherit;
background: transparent; background: transparent;
font: inherit; font: inherit;
text-align: left; text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
&.active { &.active {
@ -2432,7 +2433,7 @@
.column-header__buttons { .column-header__buttons {
height: 48px; height: 48px;
display: flex; display: flex;
margin-left: 0; margin-left: auto;
} }
.column-header__links .text-btn { .column-header__links .text-btn {
@ -2512,14 +2513,6 @@
} }
} }
.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;