remove superfluous "collapsed" class and rename header classes for clarity
This commit is contained in:
parent
b2f8ebbb42
commit
a510fe1102
5 changed files with 8 additions and 34 deletions
|
@ -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';
|
||||||
|
|
|
@ -77,10 +77,6 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.header-collapsed {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-nav-toggle {
|
.side-nav-toggle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -48,12 +48,6 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sidebar-collapsed {
|
|
||||||
.scroll-controls {
|
|
||||||
left: 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.build-header {
|
.build-header {
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue