Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Tatuya Kamada
gitlab-ce
Commits
254a63dc
Commit
254a63dc
authored
Feb 03, 2015
by
Dmitriy Zaporozhets
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve collapsing sidebar
parent
ded30e3e
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
41 additions
and
48 deletions
+41
-48
app/assets/javascripts/sidebar.js.coffee
app/assets/javascripts/sidebar.js.coffee
+8
-3
app/assets/stylesheets/sections/nav_sidebar.scss
app/assets/stylesheets/sections/nav_sidebar.scss
+21
-41
app/helpers/application_helper.rb
app/helpers/application_helper.rb
+8
-0
app/views/layouts/_collapse_button.html.haml
app/views/layouts/_collapse_button.html.haml
+2
-2
app/views/layouts/_page.html.haml
app/views/layouts/_page.html.haml
+2
-2
No files found.
app/assets/javascripts/sidebar.js.coffee
View file @
254a63dc
...
@@ -27,10 +27,15 @@ $(window).resize ->
...
@@ -27,10 +27,15 @@ $(window).resize ->
$
(
document
).
on
(
"click"
,
'.toggle-nav-collapse'
,
(
e
)
->
$
(
document
).
on
(
"click"
,
'.toggle-nav-collapse'
,
(
e
)
->
e
.
preventDefault
()
e
.
preventDefault
()
if
$
(
'.page-with-sidebar'
).
hasClass
(
'collapsed'
)
collapsed
=
'page-sidebar-collapsed'
$
(
'.page-with-sidebar'
).
removeClass
(
'collapsed'
)
expanded
=
'page-sidebar-expanded'
if
$
(
'.page-with-sidebar'
).
hasClass
(
collapsed
)
$
(
'.page-with-sidebar'
).
removeClass
(
collapsed
).
addClass
(
expanded
)
$
(
'.toggle-nav-collapse i'
).
removeClass
(
'fa-angle-right'
).
addClass
(
'fa-angle-left'
)
$
.
cookie
(
"collapsed_nav"
,
"false"
,
{
path
:
'/'
})
$
.
cookie
(
"collapsed_nav"
,
"false"
,
{
path
:
'/'
})
else
else
$
(
'.page-with-sidebar'
).
addClass
(
'collapsed'
)
$
(
'.page-with-sidebar'
).
removeClass
(
expanded
).
addClass
(
collapsed
)
$
(
'.toggle-nav-collapse i'
).
removeClass
(
'fa-angle-left'
).
addClass
(
'fa-angle-right'
)
$
.
cookie
(
"collapsed_nav"
,
"true"
,
{
path
:
'/'
})
$
.
cookie
(
"collapsed_nav"
,
"true"
,
{
path
:
'/'
})
)
)
app/assets/stylesheets/sections/nav_sidebar.scss
View file @
254a63dc
.page-with-sidebar
{
.page-with-sidebar
{
background
:
#F5F5F5
;
background
:
#F5F5F5
;
...
@@ -101,16 +99,14 @@
...
@@ -101,16 +99,14 @@
}
}
@mixin
expanded-sidebar
{
@mixin
expanded-sidebar
{
.page-with-sidebar
{
padding-left
:
$sidebar_width
;
padding-left
:
$sidebar_width
;
}
.sidebar-wrapper
{
.sidebar-wrapper
{
width
:
$sidebar_width
;
width
:
$sidebar_width
;
.nav-sidebar
{
.nav-sidebar
{
margin-top
:
20px
;
margin-top
:
20px
;
position
:
relative
;
position
:
fixed
;
top
:
45px
;
top
:
45px
;
width
:
$sidebar_width
;
width
:
$sidebar_width
;
}
}
...
@@ -122,9 +118,7 @@
...
@@ -122,9 +118,7 @@
}
}
@mixin
folded-sidebar
{
@mixin
folded-sidebar
{
.page-with-sidebar
{
padding-left
:
50px
;
padding-left
:
50px
;
}
.sidebar-wrapper
{
.sidebar-wrapper
{
width
:
52px
;
width
:
52px
;
...
@@ -150,47 +144,33 @@
...
@@ -150,47 +144,33 @@
}
}
}
}
.collapse-nav
{
.collapse-nav
a
{
position
:
relative
;
position
:
fixed
;
top
:
50px
;
bottom
:
15px
;
width
:
230px
;
padding
:
10px
;
text-align
:
right
;
background
:
#DDD
;
padding-right
:
21px
;
}
}
.page-with-sidebar.collapsed
{
@media
(
max-width
:
$screen-md-max
)
{
.page-sidebar-collapsed
{
.collapse-nav
{
@include
folded-sidebar
;
width
:
53px
;
}
}
padding-left
:
50px
;
.page-sidebar-expanded
{
@include
folded-sidebar
;
.sidebar-wrapper
{
width
:
52px
;
overflow-x
:
hidden
;
.nav-sidebar
{
width
:
52px
;
}
.nav-sidebar
li
a
>
span
{
display
:
none
;
}
}
}
}
.collapse-nav
{
@media
(
max-width
:
$screen-md-max
)
{
display
:
none
;
@include
folded-sidebar
;
}
}
}
@media
(
min-width
:
$screen-md-max
)
{
@media
(
min-width
:
$screen-md-max
)
{
@include
expanded-sidebar
;
.page-sidebar-collapsed
{
}
@include
folded-sidebar
;
}
@media
(
max-width
:
$screen-md-max
)
{
.page-sidebar-expanded
{
.collapse-nav
{
@include
expanded-sidebar
;
display
:
none
;
}
}
}
}
app/helpers/application_helper.rb
View file @
254a63dc
...
@@ -315,4 +315,12 @@ module ApplicationHelper
...
@@ -315,4 +315,12 @@ module ApplicationHelper
profile_key_path
(
key
)
profile_key_path
(
key
)
end
end
end
end
def
nav_sidebar_class
if
nav_menu_collapsed?
"page-sidebar-collapsed"
else
"page-sidebar-expanded"
end
end
end
end
app/views/layouts/_collapse_button.html.haml
View file @
254a63dc
-
if
nav_menu_collapsed?
-
if
nav_menu_collapsed?
=
link_to
icon
(
'
plus-square
'
),
'#'
,
class:
'toggle-nav-collapse'
=
link_to
icon
(
'
angle-right
'
),
'#'
,
class:
'toggle-nav-collapse'
-
else
-
else
=
link_to
icon
(
'
minus-square
'
),
'#'
,
class:
'toggle-nav-collapse'
=
link_to
icon
(
'
angle-left
'
),
'#'
,
class:
'toggle-nav-collapse'
app/views/layouts/_page.html.haml
View file @
254a63dc
-
if
defined?
(
sidebar
)
-
if
defined?
(
sidebar
)
.page-with-sidebar
{
:class
=>
(
"collapsed"
if
nav_menu_collapsed?
)
}
.page-with-sidebar
{
class:
nav_sidebar_class
}
=
render
"layouts/broadcast"
=
render
"layouts/broadcast"
.sidebar-wrapper
.sidebar-wrapper
=
render
(
sidebar
)
=
render
(
sidebar
)
.collapse-nav
.collapse-nav
=
render
:partial
=>
'layouts/collapse_button'
=
render
partial:
'layouts/collapse_button'
.content-wrapper
.content-wrapper
.container-fluid
.container-fluid
.content
.content
...
...
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