GitLab wurde erfolgreich aktualisiert. Dank regelmäßiger Updates bleibt das THM GitLab sicher und Sie profitieren von den neuesten Funktionen. Danke für Ihre Geduld.

Commit 615257b9 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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
......@@ -3,6 +3,8 @@
*
*/
header {
transition-duration: .3s;
&.navbar-empty {
background: #FFF;
border-bottom: 1px solid #EEE;
......@@ -67,28 +69,34 @@ header {
float: left;
height: $header-height;
width: $sidebar_width;
transition-duration: .3s;
a {
float: left;
height: $header-height;
width: 100%;
padding: ($header-height - 36 ) / 2 8px;
h3 {
width: 158px;
float: left;
margin: 0;
margin-left: 14px;
font-size: 18px;
line-height: $header-height - 14;
font-weight: normal;
}
overflow: hidden;
img {
width: 36px;
height: 36px;
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 {
......
......@@ -4,12 +4,14 @@
top: 0;
left: 0;
height: 100%;
transition-duration: .3s;
}
}
.sidebar-wrapper {
z-index: 99;
background: $background-color;
transition-duration: .3s;
}
.content-wrapper {
......@@ -19,8 +21,10 @@
}
.nav-sidebar {
transition-duration: .3s;
margin: 0;
list-style: none;
overflow: hidden;
&.navbar-collapse {
padding: 0px !important;
......@@ -34,9 +38,6 @@
@include border-radius(6px);
}
.nav-sidebar li {
}
.nav-sidebar li {
&.separate-item {
padding-top: 10px;
......@@ -48,7 +49,7 @@
display: block;
text-decoration: none;
padding: 8px 15px;
font-size: 13px;
font-size: 14px;
line-height: 20px;
padding-left: 16px;
......@@ -79,6 +80,7 @@
@mixin expanded-sidebar {
padding-left: $sidebar_width;
transition-duration: .3s;
.sidebar-wrapper {
width: $sidebar_width;
......@@ -89,6 +91,10 @@
top: $header-height;
width: $sidebar_width;
}
.nav-sidebar li a{
width: 230px;
}
}
.content-wrapper {
......@@ -98,6 +104,7 @@
@mixin folded-sidebar {
padding-left: 50px;
transition-duration: .3s;
.sidebar-wrapper {
width: $sidebar_collapsed_width;
......@@ -109,10 +116,10 @@
width: $sidebar_collapsed_width;
li a {
padding-left: 18px;
font-size: 14px;
padding: 8px 15px;
text-align: center;
text-align: left;
padding-left: 16px;
& > span {
......@@ -144,6 +151,7 @@
height: 28px;
text-align: center;
line-height: 28px;
transition-duration: .3s;
}
.collapse-nav a:hover {
......@@ -180,8 +188,10 @@
bottom: 0;
width: 100%;
padding: 10px;
overflow: hidden;
.username {
margin-top: 5px;
width: 230px;
}
}
......@@ -3,7 +3,8 @@
.header-logo
= link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
= brand_header_logo
%h3 GitLab
.gitlab-text-container
%h3 GitLab
.header-content
%button.navbar-toggle{type: 'button'}
%span.sr-only Toggle navigation
......
......@@ -3,7 +3,8 @@
.header-logo
= link_to explore_root_path, class: "home" do
= brand_header_logo
%h3 GitLab
.gitlab-text-container
%h3 GitLab
.header-content
- unless current_controller?('sessions')
.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