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

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' >
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
</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' >
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</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;
// 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 {
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 {
@ -128,12 +136,11 @@
background-size: auto 84px;
@media screen and (max-width: $nav-breakpoint-1) {
background-size: auto 120px;
width: 46px;
width: 36px;
height: 42px;
margin: 4px 0 0 0;
margin: 4px 4px 0 0;
padding: 0 !important;
&.active {
height: 38px;
border-bottom: 4px solid $gab-default-text-light;
}
& > span {display: none;}
@ -145,8 +152,8 @@
background-position: 0 18px;
&.active {background-position: 0 -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: 11px 11px;
&.active {background-position: 11px -89px;}
background-position: 6px 11px;
&.active {background-position: 6px -89px;}
}
}
&.notifications {
@ -154,8 +161,8 @@
background-position: -140px 18px;
&.active {background-position: -140px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -186px 11px;
&.active {background-position: -186px -89px;}
background-position: -190px 11px;
&.active {background-position: -190px -89px;}
}
}
&.groups {
@ -163,16 +170,23 @@
background-position: -280px 18px;
&.active {background-position: -280px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -391px 11px;
&.active {background-position: -391px -89px;}
background-position: -395px 11px;
&.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 {
display: none;
@media screen and (max-width: $nav-breakpoint-2) {
display: flex;
background-position: -987px 11px;
&.active {background-position: -987px -89px;}
background-position: -992px 11px;
&.active {background-position: -992px -89px;}
}
}
@ -186,7 +200,7 @@
width: 50px;
height: 50px;
margin-right: 35px;
margin-right: 28px;
border: none;
background-image: url('../images/gab_logo.svg');
background-repeat: no-repeat;
@ -197,6 +211,8 @@
background-color: #000 !important;
border: none !important;
}
}
&--no-highlight,
&--no-highlight:hover,