Commit e7b71463 authored by mgabdev's avatar mgabdev

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

parent 2e4f1872
......@@ -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>,
......
......@@ -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,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment