kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
SubNavigation: constrain width on desktop
rodzic
ce97520b11
commit
4ac76573fe
|
@ -61,16 +61,18 @@ class SubNavigation extends React.PureComponent {
|
|||
|
||||
return (
|
||||
<div className='sub-navigation'>
|
||||
<button
|
||||
className='sub-navigation__back'
|
||||
onClick={this.handleBackClick}
|
||||
onKeyUp={this.handleBackKeyUp}
|
||||
>
|
||||
<Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
|
||||
<FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
|
||||
</button>
|
||||
<div className='sub-navigation__message'>
|
||||
{intl.formatMessage(message)}
|
||||
<div className='sub-navigation__content'>
|
||||
<button
|
||||
className='sub-navigation__back'
|
||||
onClick={this.handleBackClick}
|
||||
onKeyUp={this.handleBackKeyUp}
|
||||
>
|
||||
<Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
|
||||
<FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
|
||||
</button>
|
||||
<div className='sub-navigation__message'>
|
||||
{intl.formatMessage(message)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -96,18 +96,30 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
color: var(--primary-text-color--faint);
|
||||
background: var(--foreground-color);
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 5px 15px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__back {
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
display: flex;
|
||||
|
|
Ładowanie…
Reference in New Issue