Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
gab-social
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Analytics
Analytics
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
gab
social
gab-social
Commits
e3e8c5c2
Commit
e3e8c5c2
authored
Oct 22, 2019
by
mgabdev
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Updated tabs bar styles to remove nav links on small devices, show other buttons
parent
4b1051e7
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
56 additions
and
14 deletions
+56
-14
app/javascript/gabsocial/features/ui/components/tabs_bar.js
app/javascript/gabsocial/features/ui/components/tabs_bar.js
+5
-0
app/javascript/styles/gabsocial/components/tabs-bar.scss
app/javascript/styles/gabsocial/components/tabs-bar.scss
+51
-14
No files found.
app/javascript/gabsocial/features/ui/components/tabs_bar.js
View file @
e3e8c5c2
...
...
@@ -155,6 +155,7 @@ class TabsBar extends React.PureComponent {
const
classes
=
classNames
(
'
tabs-bar
'
,
{
'
tabs-bar--collapsed
'
:
collapsed
,
'
logged-in
'
:
!!
account
,
})
return
(
...
...
@@ -191,6 +192,10 @@ class TabsBar extends React.PureComponent {
<
button
className
=
'
tabs-bar__button-compose button
'
onClick
=
{
onOpenCompose
}
aria
-
label
=
'
Gab
'
>
<
span
>
Gab
<
/span
>
<
/button
>
<
NavLink
className
=
'
tabs-bar__search-btn
'
to
=
'
/search
'
>
<
i
className
=
'
tabs-bar__link__icon tabs-bar__link__icon--search
'
/>
<
FormattedMessage
id
=
'
tabs_bar.search
'
defaultMessage
=
'
Search
'
/>
<
/NavLink
>
<
/div
>
}
{
...
...
app/javascript/styles/gabsocial/components/tabs-bar.scss
View file @
e3e8c5c2
...
...
@@ -9,6 +9,7 @@
top
:
0
;
z-index
:
1000
;
transition
:
transform
0
.2s
ease
;
overflow
:
hidden
;
// body.theme-gabsocial-light & {
// background: #fff;
...
...
@@ -17,8 +18,8 @@
&
--collapsed
{
@media
screen
and
(
max-width
:
895px
)
{
margin-top
:
-
46
px
;
transform
:
translateY
(
-
46
px
);
margin-top
:
-
50
px
;
transform
:
translateY
(
-
50
px
);
}
}
...
...
@@ -170,18 +171,26 @@
display
:
flex
;
}
@media
(
max-width
:
895px
)
{
height
:
92px
;
&
__search-btn
{
display
:
none
;
margin-left
:
auto
;
&
__search-container
,
&
__button-compose
{
.tabs-bar__link__icon--search
{
display
:
block
;
height
:
32px
;
width
:
32px
;
background-position
:
-995px
5px
!
important
;
}
>
span
{
display
:
none
;
}
}
&
__container
{
max-width
:
560px
;
flex-direction
:
column-reverse
;
padding
:
0
;
@media
(
max-width
:
895px
)
{
&
__search-container
,
&
__button-compose
{
display
:
none
;
}
&
__profile
{
...
...
@@ -194,13 +203,41 @@
&
--left
{
margin
:
0
;
width
:
100%
;
width
:
80px
;
}
&
--right
{
padding
:
6px
0
6px
20px
;
margin-left
:
0
;
margin-right
:
auto
;
padding
:
8px
0
6px
20px
;
}
}
&
__link
{
display
:
none
!
important
;
&
--logo
{
display
:
flex
!
important
;
}
}
&
.logged-in
&
{
&
__split
{
&
--left
{
display
:
none
!
important
;
}
&
--right
{
padding-top
:
10px
;
margin-left
:
0
!
important
;
width
:
100%
!
important
;
.flex
{
width
:
100%
;
}
}
}
&
__search-btn
{
display
:
block
;
}
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment