Make sidebar layout mobile-friendly (#1660)

lib/gollum/templates/wiki_content.mustache

@@ -1,4 +1,4 @@
-<div id="wiki-content">
+<div id="wiki-content" class="px-4 px-md-0">
 	<h1 class="pt-4">{{page_header}}</h1>
 	<div class="breadcrumb">{{{breadcrumb}}}</div>
 
@@ -9,14 +9,7 @@
 	    {{{toc_content}}}
 	  </div>
 	  {{/has_toc}}
-	  {{#has_sidebar}}
-	  <div id="wiki-sidebar" class="gollum-{{sidebar_format}}-content">
-	    <div id="sidebar-content" class="Box Box--condensed col-3 markdown-body px-4 float-{{bar_side}}">
-	      {{{sidebar_content}}}
-	    </div>
-	  </div>
-	  {{/has_sidebar}}
-	  <div id="wiki-body" class="gollum-{{format}}-content overflow-hidden {{#left_bar}}pl-4{{/left_bar}}">
+	  <div id="wiki-body" class="gollum-{{format}}-content overflow-hidden">
 	    {{#has_header}}
 	    <div id="wiki-header" class="gollum-{{header_format}}-content">
 	      <div id="header-content" class="markdown-body">
@@ -24,13 +17,22 @@
 	      </div>
 	    </div>
 	    {{/has_header}}
-	    <div class="markdown-body {{#header_enum?}}header-enum{{/header_enum?}}" {{#header_enum?}}style="--header-enum-style:{{header_enum_style}};"{{/header_enum?}}>
-	      {{{rendered_metadata}}}
-	      {{{content}}}
+	    <div class="main-content clearfix container-lg">
+	      <div class="markdown-body {{#header_enum?}}header-enum{{/header_enum?}} {{#has_sidebar}}float-md-{{body_side}} col-md-9{{/has_sidebar}}" {{#header_enum?}}style="--header-enum-style:{{header_enum_style}};"{{/header_enum?}}>
+	        {{{rendered_metadata}}}
+	        {{{content}}}
+	      </div>
+	      {{#has_sidebar}}
+          <div id="wiki-sidebar" class="Box Box--condensed float-md-{{body_side}} col-md-3 px-4">
+	        <div id="sidebar-content" class="gollum-{{sidebar_format}}-content markdown-body">
+	          {{{sidebar_content}}}
+	        </div>
+	      </div>
+	      {{/has_sidebar}}
 	    </div>
 	  </div>
 	  {{#has_footer}}
-	  <div id="wiki-footer" class="gollum-{{footer_format}}-content">
+	  <div id="wiki-footer" class="gollum-{{footer_format}}-content my-2 my-md-0">
 	    <div id="footer-content" class="Box Box-condensed markdown-body pl-2">
 	      {{{footer_content}}}
 	    </div>

lib/gollum/views/page.rb

@@ -124,6 +124,10 @@ module Precious
         @bar_side.to_s
       end
 
+      def body_side
+        @bar_side == :right ? "left" : "right"
+      end
+
       def left_bar
         @bar_side == :left
       end

test/test_page_view.rb

@@ -139,6 +139,17 @@ EOS
     assert_equal @view.breadcrumb, ''
   end
 
+  test "body_side is 'right' by default" do
+    @view = Precious::Views::Page.new
+    assert_equal @view.body_side, "right"
+  end
+
+  test "body_side is 'left' if bar_side side is 'right'" do
+    @view = Precious::Views::Page.new
+    @view.instance_variable_set :@bar_side, :right
+    assert_equal @view.body_side, "left"
+  end
+
   test "links to pages containing ?" do
     @view = Precious::Views::Page.new
     assert_equal @view.page_route("Page?"), '/Page%3F'