remove superfluous "collapsed" class and rename header classes for clarity

This commit is contained in:
Mike Greiling 2016-09-02 10:34:04 -05:00
parent b2f8ebbb42
commit a510fe1102
5 changed files with 8 additions and 34 deletions

View file

@ -14,11 +14,9 @@
const pinnedPageClass = 'page-sidebar-pinned'; const pinnedPageClass = 'page-sidebar-pinned';
const expandedPageClass = 'page-sidebar-expanded'; const expandedPageClass = 'page-sidebar-expanded';
const collapsedPageClass = 'page-sidebar-collapsed';
const pinnedNavbarClass = 'header-pinned-nav'; const pinnedNavbarClass = 'header-sidebar-pinned';
const expandedNavbarClass = 'header-expanded'; const expandedNavbarClass = 'header-sidebar-expanded';
const collapsedNavbarClass = 'header-collapsed';
class Sidebar { class Sidebar {
constructor() { constructor() {
@ -75,12 +73,10 @@
renderState() { renderState() {
$(pageSelector) $(pageSelector)
.toggleClass(pinnedPageClass, this.isPinned && this.isExpanded) .toggleClass(pinnedPageClass, this.isPinned && this.isExpanded)
.toggleClass(expandedPageClass, this.isExpanded) .toggleClass(expandedPageClass, this.isExpanded);
.toggleClass(collapsedPageClass, !this.isExpanded);
$(navbarSelector) $(navbarSelector)
.toggleClass(pinnedNavbarClass, this.isPinned && this.isExpanded) .toggleClass(pinnedNavbarClass, this.isPinned && this.isExpanded)
.toggleClass(expandedNavbarClass, this.isExpanded) .toggleClass(expandedNavbarClass, this.isExpanded);
.toggleClass(collapsedNavbarClass, !this.isExpanded);
const $pinnedToggle = $(pinnedToggleSelector); const $pinnedToggle = $(pinnedToggleSelector);
const tooltipText = this.isPinned ? 'Unpin navigation' : 'Pin navigation'; const tooltipText = this.isPinned ? 'Unpin navigation' : 'Pin navigation';

View file

@ -77,10 +77,6 @@ header {
} }
} }
&.header-collapsed {
padding: 0 16px;
}
.side-nav-toggle { .side-nav-toggle {
position: absolute; position: absolute;
left: -10px; left: -10px;

View file

@ -1,6 +1,5 @@
.page-with-sidebar { .page-with-sidebar {
padding-top: $header-height; padding: $header-height 0 25px;
padding-bottom: 25px;
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
&.page-sidebar-pinned { &.page-sidebar-pinned {
@ -15,6 +14,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 0;
overflow: hidden; overflow: hidden;
transition: width $sidebar-transition-duration; transition: width $sidebar-transition-duration;
@include box-shadow(2px 0 16px 0 $black-transparent); @include box-shadow(2px 0 16px 0 $black-transparent);
@ -150,14 +150,6 @@
} }
} }
.page-sidebar-collapsed {
padding-left: 0;
.sidebar-wrapper {
width: 0;
}
}
.page-sidebar-expanded { .page-sidebar-expanded {
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_width; width: $sidebar_width;
@ -173,7 +165,7 @@
} }
} }
header.header-pinned-nav { header.header-sidebar-pinned {
@media (min-width: $sidebar-breakpoint) { @media (min-width: $sidebar-breakpoint) {
padding-left: ($sidebar_width + $gl-padding); padding-left: ($sidebar_width + $gl-padding);

View file

@ -48,12 +48,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.page-sidebar-collapsed {
.scroll-controls {
left: 70px;
}
}
} }
.build-header { .build-header {

View file

@ -14,8 +14,6 @@ module NavHelper
def page_sidebar_class def page_sidebar_class
if pinned_nav? if pinned_nav?
"page-sidebar-expanded page-sidebar-pinned" "page-sidebar-expanded page-sidebar-pinned"
else
"page-sidebar-collapsed"
end end
end end
@ -43,9 +41,7 @@ module NavHelper
class_name << " with-horizontal-nav" if defined?(nav) && nav class_name << " with-horizontal-nav" if defined?(nav) && nav
if pinned_nav? if pinned_nav?
class_name << " header-expanded header-pinned-nav" class_name << " header-sidebar-expanded header-sidebar-pinned"
else
class_name << " header-collapsed"
end end
class_name class_name