Commit ade0a4af authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray 🤰🏼

Fix logo at all screen widths, update sidebar text

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