commit: 13dfd8d109442ffdd90dbd533a426b04b68e5119
parent: d93d6f5124d7e120ad1542a65b72792e31f86b22
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 1 Apr 2017 15:17:35 +0200
Improve mobile tabs a little
Diffstat:
2 files changed, 48 insertions(+), 11 deletions(-)
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
@@ -1,15 +1,23 @@
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl';
-const TabsBar = () => {
- return (
- <div className='tabs-bar'>
- <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>
- <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>
- <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' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link>
- </div>
- );
-};
+const TabsBar = React.createClass({
+
+ render () {
+ return (
+ <div className='tabs-bar'>
+ <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 primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
+ <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;
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -858,11 +858,25 @@ a.status__content__spoiler-link {
font-size:12px;
font-weight: 500;
border-bottom: 2px solid lighten($color1, 8%);
+ transition: all 200ms linear;
+
+ .fa {
+ font-weight: 400;
+ }
&.active {
border-bottom: 2px solid $color4;
color: $color4;
}
+
+ &:hover, &:focus, &:active {
+ background: lighten($color1, 14%);
+ transition: all 100ms linear;
+ }
+
+ span {
+ display: none;
+ }
}
@media screen and (min-width: 360px) {
@@ -870,6 +884,22 @@ a.status__content__spoiler-link {
margin: 10px;
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) {
@@ -1721,7 +1751,6 @@ button.active i.fa-retweet {
.search {
position: relative;
- margin-bottom: 10px;
}
.search__input {