From 348e817d534720d2adb222d264c3ead3cc14c4bc Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 1 Apr 2017 15:17:35 +0200 Subject: [PATCH] Improve mobile tabs a little --- .../features/ui/components/tabs_bar.jsx | 28 +++++++++++------ app/assets/stylesheets/components.scss | 31 ++++++++++++++++++- 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 index 225a6a5fc8..6cdb29dbff 100644 --- 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 ( -
- - - - -
- ); -}; +const TabsBar = React.createClass({ + + render () { + return ( +
+ + + + + + + + +
+ ); + } + +}); export default TabsBar; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index d7589d9b01..a4dce7f181 100644 --- 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 {