Fix logo at all screen widths, update sidebar text
This commit is contained in:
parent
a1fbdbb6b1
commit
ade0a4af8b
|
@ -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;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
padding-left: ($sidebar_collapsed_width - 36) / 2;
|
||||
|
||||
.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;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* Layout
|
||||
*/
|
||||
$sidebar_collapsed_width: 62px;
|
||||
$sidebar_collapsed_width: 0;
|
||||
$sidebar_width: 90px;
|
||||
$gutter_collapsed_width: 62px;
|
||||
$gutter_width: 290px;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.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
|
||||
|
|
Loading…
Reference in New Issue