random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added "Apps" tab bar link & icon, updated tab bar responsiveness

Browse Source
This commit is contained in:
mgabdev 2019-07-29 19:08:27 -04:00
parent 2e4f187272
commit e7b7146374
3 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/gabsocial/features/ui/components/tabs_bar.js
View File

@ -27,6 +27,9 @@ export const privateLinks = [
<NavLink className='tabs-bar__link groups' to='/groups' data-preview-title-id='column.groups' > <NavLink className='tabs-bar__link groups' to='/groups' data-preview-title-id='column.groups' >
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' /> <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
</NavLink>, </NavLink>,
<a className='tabs-bar__link apps' target='_blank' href='https://apps.gab.com' data-preview-title-id='tabs_bar.apps' >
<FormattedMessage id='tabs_bar.apps' defaultMessage='Apps' />
</a>,
<NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' > <NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' >
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' /> <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</NavLink>, </NavLink>,

BIN
app/javascript/images/sprite-main-navigation-links.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

42
app/javascript/styles/gabsocial/components/tabs-bar.scss
View File

@ -18,7 +18,7 @@
padding: 0 15px; padding: 0 15px;
// NOTE - might need to adjust this based on column sizing // NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) {padding: 0 20px;} @media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;}
} }
@ -44,6 +44,14 @@
.search { .search {
margin: 0; margin: 0;
} }
@media (min-width:852px) and (max-width: 960px) {
width: 160px;
}
@media (min-width:$nav-breakpoint-2) and (max-width: 852px) {
width: 200px;
}
} }
&__profile { &__profile {
@ -128,12 +136,11 @@
background-size: auto 84px; background-size: auto 84px;
@media screen and (max-width: $nav-breakpoint-1) { @media screen and (max-width: $nav-breakpoint-1) {
background-size: auto 120px; background-size: auto 120px;
width: 46px; width: 36px;
height: 42px; height: 42px;
margin: 4px 0 0 0; margin: 4px 4px 0 0;
padding: 0 !important; padding: 0 !important;
&.active { &.active {
height: 38px;
border-bottom: 4px solid $gab-default-text-light; border-bottom: 4px solid $gab-default-text-light;
} }
& > span {display: none;} & > span {display: none;}
@ -145,8 +152,8 @@
background-position: 0 18px; background-position: 0 18px;
&.active {background-position: 0 -52px;} &.active {background-position: 0 -52px;}
@media screen and (max-width: $nav-breakpoint-1) { @media screen and (max-width: $nav-breakpoint-1) {
background-position: 11px 11px; background-position: 6px 11px;
&.active {background-position: 11px -89px;} &.active {background-position: 6px -89px;}
} }
} }
&.notifications { &.notifications {
@ -154,8 +161,8 @@
background-position: -140px 18px; background-position: -140px 18px;
&.active {background-position: -140px -52px;} &.active {background-position: -140px -52px;}
@media screen and (max-width: $nav-breakpoint-1) { @media screen and (max-width: $nav-breakpoint-1) {
background-position: -186px 11px; background-position: -190px 11px;
&.active {background-position: -186px -89px;} &.active {background-position: -190px -89px;}
} }
} }
&.groups { &.groups {
@ -163,16 +170,23 @@
background-position: -280px 18px; background-position: -280px 18px;
&.active {background-position: -280px -52px;} &.active {background-position: -280px -52px;}
@media screen and (max-width: $nav-breakpoint-1) { @media screen and (max-width: $nav-breakpoint-1) {
background-position: -391px 11px; background-position: -395px 11px;
&.active {background-position: -391px -89px;} &.active {background-position: -395px -89px;}
}
}
&.apps {
padding: 16px 0 0 29px;
background-position: -825px 18px;
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -1170px 11px;
} }
} }
&.optional { &.optional {
display: none; display: none;
@media screen and (max-width: $nav-breakpoint-2) { @media screen and (max-width: $nav-breakpoint-2) {
display: flex; display: flex;
background-position: -987px 11px; background-position: -992px 11px;
&.active {background-position: -987px -89px;} &.active {background-position: -992px -89px;}
} }
} }
@ -186,7 +200,7 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 35px; margin-right: 28px;
border: none; border: none;
background-image: url('../images/gab_logo.svg'); background-image: url('../images/gab_logo.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -197,6 +211,8 @@
background-color: #000 !important; background-color: #000 !important;
border: none !important; border: none !important;
} }
} }
&--no-highlight, &--no-highlight,
&--no-highlight:hover, &--no-highlight:hover,