Code duplication for sidebar in guides and command references

[tnir]

Code for sidebar in left (for PC) and in bottom (for mobile) is duplicated.

HAML (HTML)

• Unity guides and man layouts to two_column_layout #752

bundler-site/source/layouts/commands_layout.haml

Lines 17 to 31 in 5fa3ce7

	.row
	.container
	#wrapper
	#sidebar-wrapper.col.d-none.d-sm-block
	.sidebar-nav
	= partial 'partials/commands_sidebar'
	#page-content-wrapper.commands.contents
	~ yield
	.clearfix
	.row
	.container
	#bottom-sidebar-wrapper.d-block.d-sm-none
	.bottom-sidebar-nav
	= partial 'partials/commands_sidebar'

and

bundler-site/source/layouts/md_guides_layout.haml

Lines 19 to 33 in 5fa3ce7

	.row
	#guide-container.container
	#wrapper
	#sidebar-wrapper.d-none.d-sm-block
	.sidebar-nav
	%h4 Guides
	= partial 'partials/guides_sidebar'
	#page-content-wrapper.guide.contents
	~ yield
	.row
	.container
	#bottom-sidebar-wrapper.d-sm-none
	.bottom-sidebar-nav
	= partial 'partials/guides_sidebar'

CSS (SCSS)

• Remove duplicated code for sidebar #679

bundler-site/assets/stylesheets/_sidebar.scss

Lines 19 to 148 in 5fa3ce7

	#sidebar-wrapper {
	z-index: 1000;
	float: left;
	left: 250px;
	width: 0;
	height: 100%;
	margin-top: 15px;
	margin-left: -290px;
	padding-bottom: 20px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
	#wrapper.toggled #sidebar-wrapper {
	width: 250px;
	}
	#page-content-wrapper {
	position: relative;
	padding: 15px;
	}
	#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: -250px;
	}
	/* Sidebar Styles */
	.sidebar-nav {
	position: relative;
	top: 20px;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
	padding-left: 30px;
	h4 {
	font-weight: bold;
	color: #06456A;
	}
	ul {
	padding-left: 0;
	}
	.active {
	background-color: #DBEAF3;
	}
	}
	.sidebar-nav li {
	list-style-type: none;
	}
	.sidebar-nav ul li:last-child hr {
	border-top-color: #ffffff;
	}
	.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #000;
	padding: 10px 15px;
	}
	.sidebar-nav li a:hover {
	text-decoration: none;
	color: #000;
	background: rgba(255,255,255,0.2);
	}
	.sidebar-nav li a:active,
	.sidebar-nav li a:focus {
	text-decoration: none;
	}
	.sidebar-nav .separator {
	hr {
	margin-top: 0;
	margin-bottom: 0;
	}
	}
	.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: $larger-font-size;
	line-height: 60px;
	}
	.sidebar-nav > .sidebar-brand a {
	color: #999999;
	}
	.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
	}
	@media(min-width:768px) {
	.sidebar-nav {
	padding-left: 10px;
	}
	#wrapper.toggled {
	padding-left: 0;
	}
	#sidebar-wrapper {
	width: 250px;
	padding-left: 10px;
	}
	#wrapper.toggled #sidebar-wrapper {
	width: 0;
	}
	#page-content-wrapper {
	padding: 20px 20px 20px 250px;
	position: relative;
	}
	#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
	}
	}

and

bundler-site/assets/stylesheets/_sidebar.scss

Lines 156 to 225 in 5fa3ce7

	/* Bottom Sidebar Styles */
	.bottom-sidebar-nav {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	h4 {
	font-weight: bold;
	color: #06456A;
	}
	ul {
	padding-left: 0;
	}
	.active {
	background-color: #DBEAF3;
	}
	}
	.bottom-sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
	list-style-type: none;
	}
	.bottom-sidebar-nav ul li:last-child hr {
	border-top-color: #ffffff;
	}
	.bottom-sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #000;
	}
	.bottom-sidebar-nav li a:hover {
	text-decoration: none;
	color: #000;
	background: rgba(255,255,255,0.2);
	}
	.bottom-sidebar-nav li a:active,
	.bottom-sidebar-nav li a:focus {
	text-decoration: none;
	}
	.bottom-sidebar-nav .separator {
	hr {
	margin-top: 0;
	margin-bottom: 0;
	}
	}
	.bottom-sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: $larger-font-size;
	line-height: 60px;
	}
	.bottom-sidebar-nav > .sidebar-brand a {
	color: #999999;
	}
	.bottom-sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
	}

Resources

• Escape from bootstrap-sass 3 #643 blocks this

[tnir]

Unifying commands_layout.haml and md_guides_layout.haml looks easy:

$ diff -u source/layouts/commands_layout.haml source/layouts/md_guides_layout.haml
--- source/layouts/commands_layout.haml 2022-07-15 04:49:57.000000000 +0000
+++ source/layouts/md_guides_layout.haml        2022-07-15 04:49:57.000000000 +0000
@@ -1,3 +1,5 @@
+- v = current_page.url.scan(/v\d\.\d+/).first || current_version
+
 - if /v\d\.\d+\//.match(current_page.destination_path)
   - content_for(:canonical, commands_toplevel_path(current_page.destination_path))
 
@@ -16,10 +18,11 @@
       style: 'max-width: 400px;'
   .container
     .row.flex-column.flex-md-row-reverse
-      #page-content-wrapper.col-12.col-md-9.commands.contents
+      #page-content-wrapper.col-12.col-md-9.guide.contents
         ~ yield
       #sidebar-wrapper.col-12.col-md-3.mt-4
         .sidebar-nav
-          = partial 'partials/commands_sidebar'
+          %h4 Guides
+          = partial 'partials/guides_sidebar'
 
-  = javascript_include_tag 'commands_layout.min'
+  = javascript_include_tag 'anchors.min'

[tnir]

All done in #659 and #752 🎉