Commit ade0a4af authored by Annabel Dunstone's avatar Annabel Dunstone

Fix logo at all screen widths, update sidebar text

parent a1fbdbb6
...@@ -207,6 +207,7 @@ $ -> ...@@ -207,6 +207,7 @@ $ ->
$('.navbar-toggle').on 'click', -> $('.navbar-toggle').on 'click', ->
$('.header-content .title').toggle() $('.header-content .title').toggle()
$('.header-content .header-logo').toggle()
$('.header-content .navbar-collapse').toggle() $('.header-content .navbar-collapse').toggle()
$('.navbar-toggle').toggleClass('active') $('.navbar-toggle').toggleClass('active')
$('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left") $('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
...@@ -258,7 +259,7 @@ $ -> ...@@ -258,7 +259,7 @@ $ ->
checkInitialSidebarSize = -> checkInitialSidebarSize = ->
bootstrapBreakpoint = bp.getBreakpointSize() bootstrapBreakpoint = bp.getBreakpointSize()
if bootstrapBreakpoint is "xs" if bootstrapBreakpoint is "xs" or "sm"
$(document).trigger('breakpoint:change', [bootstrapBreakpoint]) $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
$(window) $(window)
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
*/ */
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
.page-with-sidebar { .page-with-sidebar {
.header-logo { .gitlab-text-container {
background: $color-darker; background: $color-darker;
a { a {
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
background-color: $color-dark; background-color: $color-dark;
a { a {
color: $white-light; color: $white-light;
text-decoration: none;
h3 { h3 {
color: $white-light; color: $white-light;
......
...@@ -109,15 +109,17 @@ header { ...@@ -109,15 +109,17 @@ header {
position: relative; position: relative;
height: $header-height; height: $header-height;
padding-right: 40px; padding-right: 40px;
padding-left: 30px;
@media (max-width: $screen-xs-min) { transition-duration: .3s;
padding-left: 40px;
}
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding-right: 0; padding-right: 0;
} }
@media (max-width: $screen-sm-max) {
padding-right: 30px;
}
.dropdown-menu { .dropdown-menu {
margin-top: -5px; margin-top: -5px;
} }
...@@ -127,6 +129,13 @@ header { ...@@ -127,6 +129,13 @@ header {
left: 50%; left: 50%;
margin-left: -18px; margin-left: -18px;
top: 7px; top: 7px;
transition-duration: .3s;
z-index: 999;
@media (max-width: $screen-sm-min) {
right: 25px;
left: auto;
}
} }
.title { .title {
...@@ -142,6 +151,10 @@ header { ...@@ -142,6 +151,10 @@ header {
vertical-align: top; vertical-align: top;
white-space: nowrap; white-space: nowrap;
@media (max-width: $screen-sm-min) {
max-width: 220px;
}
a { a {
color: $gl-text-color; color: $gl-text-color;
&:hover { &:hover {
...@@ -169,6 +182,10 @@ header { ...@@ -169,6 +182,10 @@ header {
.navbar-collapse { .navbar-collapse {
float: right; float: right;
border-top: none; border-top: none;
@media (max-width: $screen-sm-min) {
float: none;
}
} }
} }
...@@ -185,17 +202,11 @@ header { ...@@ -185,17 +202,11 @@ header {
margin-left: 0; margin-left: 0;
.header-content { .header-content {
@media (min-width: $screen-sm-max) {
padding-left: 30px; padding-left: 30px;
transition-duration: .3s; transition-duration: .3s;
} }
}
.header-expanded {
margin-left: 0;
.header-content {
margin-left: $sidebar_width;
transition-duration: .3s;
} }
} }
......
...@@ -350,6 +350,8 @@ ...@@ -350,6 +350,8 @@
} }
.nav-control { .nav-control {
padding-left: 0;
transition-duration: .3s;
.fade-right { .fade-right {
@media (min-width: $screen-xs-max) { @media (min-width: $screen-xs-max) {
...@@ -362,6 +364,23 @@ ...@@ -362,6 +364,23 @@
} }
} }
.page-sidebar-collapsed {
.nav-control {
@media (min-width: $screen-md-min) {
padding-left: 32px;
transition-duration: .3s;
}
}
.layout-nav {
@media (max-width: $screen-sm-min) {
padding-left: 0;
}
}
}
.scrolling-tabs-container { .scrolling-tabs-container {
position: relative; position: relative;
......
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
} }
.sidebar-wrapper { .sidebar-wrapper {
.header-logo { .gitlab-text-container {
height: $header-height; height: $header-height;
padding: 8px 26px; padding: 0 19px;
width: $sidebar_width; width: $sidebar_width;
position: fixed; position: fixed;
z-index: 999; z-index: 999;
...@@ -47,6 +47,13 @@ ...@@ -47,6 +47,13 @@
&:hover { &:hover {
background-color: #eee; background-color: #eee;
} }
h3 {
font-size: 19px;
line-height: 50px;
font-weight: normal;
margin: 0;
}
} }
.sidebar-user { .sidebar-user {
...@@ -66,8 +73,19 @@ ...@@ -66,8 +73,19 @@
} }
} }
.tanuki-shape {
transition: all 0.8s;
&:hover, &.highlight {
fill: rgb(255, 255, 255);
transition: all 0.1s;
}
}
.nav-sidebar { .nav-sidebar {
margin-top: 22px; margin-top: 22 + $header-height;
margin-bottom: 116px; margin-bottom: 116px;
transition-duration: .3s; transition-duration: .3s;
list-style: none; list-style: none;
...@@ -159,22 +177,14 @@ ...@@ -159,22 +177,14 @@
.sidebar-wrapper { .sidebar-wrapper {
width: 0; width: 0;
.header-logo { .gitlab-text-container {
width: 0; width: 0;
padding: 8px 0; padding: 0;
a {
padding-left: ($sidebar_collapsed_width - 36) / 2;
.gitlab-text-container { h3 {
display: none; display: none;
} }
} }
}
#logo {
display: none;
}
.nav-sidebar { .nav-sidebar {
width: $sidebar_collapsed_width; width: $sidebar_collapsed_width;
...@@ -206,24 +216,10 @@ ...@@ -206,24 +216,10 @@
} }
} }
.gitlab-text-container {
height: 50px;
padding: 5px;
text-align: center;
h3 {
color: white;
margin: 0;
font-size: 19px;
line-height: 41px;
font-weight: normal;
}
}
.page-sidebar-expanded { .page-sidebar-expanded {
padding-left: $sidebar_width; padding-left: $sidebar_width;
@media (max-width: $screen-xs-min) { @media (max-width: $screen-sm-max) {
padding-left: 0; padding-left: 0;
} }
...@@ -246,13 +242,7 @@ ...@@ -246,13 +242,7 @@
} }
.layout-nav { .layout-nav {
@media (max-width: $screen-xs-min) {
padding-right: 0; padding-right: 0;
}
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
padding-right: 90px;
}
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
padding-right: $sidebar_width; padding-right: $sidebar_width;
......
/* /*
* Layout * Layout
*/ */
$sidebar_collapsed_width: 62px; $sidebar_collapsed_width: 0;
$sidebar_width: 90px; $sidebar_width: 90px;
$gutter_collapsed_width: 62px; $gutter_collapsed_width: 62px;
$gutter_width: 290px; $gutter_width: 290px;
......
.page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" } .page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
.sidebar-wrapper.nicescroll{ class: nav_sidebar_class } .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
= link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
.gitlab-text-container .gitlab-text-container
= link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
%h3 GitLab %h3 GitLab
- if defined?(sidebar) && sidebar - if defined?(sidebar) && sidebar
......
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