BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 615257b9 by Dmitriy Zaporozhets
Options

Merge branch 'animation-sidebar' into 'master'

Animation of Sidebar (video in here) Edited the CSS of header and sidebar; added a new div of gitlab-logo-container to the html to make things easier. The transition-duration is set to 0.3s and when the nav bar expands, it opens up over the text, essentially revealing hidden text. [animation-sidebar-2.mov](https://gitlab.com/gitlab-org/gitlab-ce/uploads/b15996a256d6bed03a19c68549d116e4/animation-sidebar-2.mov) /cc @JobV @nicolas2 See merge request !849
parents f189c36d 95e2ca76
Showing with 38 additions and 18 deletions
app/assets/stylesheets/generic/header.scss
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
* *
*/ */
header { header {
transition-duration: .3s;
&.navbar-empty { &.navbar-empty {
background: #FFF; background: #FFF;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
...@@ -67,28 +69,34 @@ header { ...@@ -67,28 +69,34 @@ header {
float: left; float: left;
height: $header-height; height: $header-height;
width: $sidebar_width; width: $sidebar_width;
transition-duration: .3s;
a { a {
float: left; float: left;
height: $header-height; height: $header-height;
width: 100%; width: 100%;
padding: ($header-height - 36 ) / 2 8px; padding: ($header-height - 36 ) / 2 8px;
overflow: hidden;
h3 {
width: 158px;
float: left;
margin: 0;
margin-left: 14px;
font-size: 18px;
line-height: $header-height - 14;
font-weight: normal;
}
img { img {
width: 36px; width: 36px;
height: 36px; height: 36px;
float: left; float: left;
} }
.gitlab-text-container {
width: 230px;
h3 {
width: 158px;
float: left;
margin: 0;
margin-left: 14px;
font-size: 18px;
line-height: $header-height - 14;
font-weight: normal;
}
}
} }
&:hover { &:hover {
......
app/assets/stylesheets/generic/sidebar.scss
...@@ -4,12 +4,14 @@ ...@@ -4,12 +4,14 @@
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
transition-duration: .3s;
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
z-index: 99; z-index: 99;
background: $background-color; background: $background-color;
transition-duration: .3s;
} }
.content-wrapper { .content-wrapper {
...@@ -19,8 +21,10 @@ ...@@ -19,8 +21,10 @@
} }
.nav-sidebar { .nav-sidebar {
transition-duration: .3s;
margin: 0; margin: 0;
list-style: none; list-style: none;
overflow: hidden;
&.navbar-collapse { &.navbar-collapse {
padding: 0px !important; padding: 0px !important;
...@@ -35,9 +39,6 @@ ...@@ -35,9 +39,6 @@
} }
.nav-sidebar li { .nav-sidebar li {
}
.nav-sidebar li {
&.separate-item { &.separate-item {
padding-top: 10px; padding-top: 10px;
margin-top: 10px; margin-top: 10px;
...@@ -48,7 +49,7 @@ ...@@ -48,7 +49,7 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 8px 15px; padding: 8px 15px;
font-size: 13px; font-size: 14px;
line-height: 20px; line-height: 20px;
padding-left: 16px; padding-left: 16px;
...@@ -79,6 +80,7 @@ ...@@ -79,6 +80,7 @@
@mixin expanded-sidebar { @mixin expanded-sidebar {
padding-left: $sidebar_width; padding-left: $sidebar_width;
transition-duration: .3s;
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_width; width: $sidebar_width;
...@@ -89,6 +91,10 @@ ...@@ -89,6 +91,10 @@
top: $header-height; top: $header-height;
width: $sidebar_width; width: $sidebar_width;
} }
.nav-sidebar li a{
width: 230px;
}
} }
.content-wrapper { .content-wrapper {
...@@ -98,6 +104,7 @@ ...@@ -98,6 +104,7 @@
@mixin folded-sidebar { @mixin folded-sidebar {
padding-left: 50px; padding-left: 50px;
transition-duration: .3s;
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_collapsed_width; width: $sidebar_collapsed_width;
...@@ -109,10 +116,10 @@ ...@@ -109,10 +116,10 @@
width: $sidebar_collapsed_width; width: $sidebar_collapsed_width;
li a { li a {
padding-left: 18px;
font-size: 14px; font-size: 14px;
padding: 8px 15px; padding: 8px 15px;
text-align: center; text-align: left;
padding-left: 16px;
& > span { & > span {
...@@ -144,6 +151,7 @@ ...@@ -144,6 +151,7 @@
height: 28px; height: 28px;
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
transition-duration: .3s;
} }
.collapse-nav a:hover { .collapse-nav a:hover {
...@@ -180,8 +188,10 @@ ...@@ -180,8 +188,10 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
overflow: hidden;
.username { .username {
margin-top: 5px; margin-top: 5px;
width: 230px;
} }
} }
app/views/layouts/header/_default.html.haml
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
.header-logo .header-logo
= link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
= brand_header_logo = brand_header_logo
%h3 GitLab .gitlab-text-container
%h3 GitLab
.header-content .header-content
%button.navbar-toggle{type: 'button'} %button.navbar-toggle{type: 'button'}
%span.sr-only Toggle navigation %span.sr-only Toggle navigation
......
app/views/layouts/header/_public.html.haml
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
.header-logo .header-logo
= link_to explore_root_path, class: "home" do = link_to explore_root_path, class: "home" do
= brand_header_logo = brand_header_logo
%h3 GitLab .gitlab-text-container
%h3 GitLab
.header-content .header-content
- unless current_controller?('sessions') - unless current_controller?('sessions')
.pull-right .pull-right
......
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