me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve mobile tabs a little

Browse source
This commit is contained in:
Eugen Rochko 2017-04-01 15:17:35 +02:00
parent 3c6e9ee33c
commit 348e817d53
2 changed files with 48 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
View file

@ -1,15 +1,23 @@
import { Link } from 'react-router'; import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const TabsBar = () => { const TabsBar = React.createClass({
return (
<div className='tabs-bar'> render () {
<Link className='tabs-bar__link' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link> return (
<Link className='tabs-bar__link' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link> <div className='tabs-bar'>
<Link className='tabs-bar__link' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link> <Link className='tabs-bar__link primary' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
<Link className='tabs-bar__link' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link> <Link className='tabs-bar__link primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
</div> <Link className='tabs-bar__link primary' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
);
}; <Link className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public/local'><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></Link>
<Link className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public'><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></Link>
<Link className='tabs-bar__link primary' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link>
</div>
);
}
});
export default TabsBar; export default TabsBar;

31
app/assets/stylesheets/components.scss
View file

@ -858,11 +858,25 @@ a.status__content__spoiler-link {
font-size:12px; font-size:12px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid lighten($color1, 8%); border-bottom: 2px solid lighten($color1, 8%);
transition: all 200ms linear;
.fa {
font-weight: 400;
}
&.active { &.active {
border-bottom: 2px solid $color4; border-bottom: 2px solid $color4;
color: $color4; color: $color4;
} }
&:hover, &:focus, &:active {
background: lighten($color1, 14%);
transition: all 100ms linear;
}
span {
display: none;
}
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
@ -870,6 +884,22 @@ a.status__content__spoiler-link {
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
} }
.search {
margin-bottom: 10px;
}
}
@media screen and (min-width: 600px) {
.tabs-bar__link {
.fa {
margin-right: 5px;
}
span {
display: inline;
}
}
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
@ -1721,7 +1751,6 @@ button.active i.fa-retweet {
.search { .search {
position: relative; position: relative;
margin-bottom: 10px;
} }
.search__input { .search__input {