Merge pull request #41 from silverstripe/feature/mobile-sidebar-nav

Feature/mobile sidebar nav
silverstripe · Oct 21, 2016 · ce288c6 · ce288c6
2 parents 21f0c8b + 15986d4
commit ce288c6
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 25 deletions.
diff --git a/composer.json b/composer.json
@@ -9,7 +9,7 @@
     ],
     "require": {
         "php": ">=5.3.2",
-        "silverstripe/docsviewer": "^2.0",
+        "silverstripe/docsviewer": "dev-master",
         "silverstripe/framework": "^3.2",
         "silverstripe/toolbar": "^4.2",
         "silverstripe/dynamodb": "^1.1",

diff --git a/composer.lock b/composer.lock
diff --git a/themes/userhelp/css/styles.css b/themes/userhelp/css/styles.css
@@ -43,7 +43,7 @@ body img {
 .quickfeedback .btn,
 .quickfeedback input {
 	text-transform: uppercase;
-	padding: 10px 30px; 
+	padding: 10px 30px;
 	margin-right: 7px;
 	border-width: 1px;
 }
@@ -87,4 +87,32 @@ form .message.good {
 form .message.error {
 	background: #FF8480;
 	color:#fff;
-}
+}
+
+/* Remove global navigation in mobile view */
+.nav-mobile {
+    display: block;
+    min-height: 0;
+    margin: 0;
+}
+
+@media (max-width: 992px) {
+    .site-header {
+        display: none;
+    }
+    /* SilverStripe logo on top of page */
+	#masthead .menu-bar {
+		margin-bottom: 24px;
+		height: 40px;
+	}
+
+    #masthead .logo {
+        display: inline-block;
+        float: left;
+        height: 40px;
+        width: 140px;
+        margin-left: 4px;
+		margin-top: 4px;
+        background: url(https://www.silverstripe.org/themes/ssv3/img/global-logo-open-source.svg) no-repeat;
+    }
+}
diff --git a/themes/userhelp/templates/DocumentationViewer.ss b/themes/userhelp/templates/DocumentationViewer.ss
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<html>
+	<% include DocumentationHead %>
+
+	<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
+		<div class="wrapper">
+			<div class="menu-bar">
+				<a class="logo" href="https://userhelp.silverstripe.org/"></a>
+				<a class="menu-toggle">
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+				</a>
+			</div>
+			<% if Breadcrumbs.count > 1 %>
+				<% include DocumentationBreadcrumbs %>
+			<% else_if Page.Title %>
+				<h1>$Page.Title</h1>
+			<% end_if %>
+			<% if Page.Introduction %>
+				<div class="introduction">
+					<p>$Page.Introduction</p>
+				</div>
+			<% end_if %>
+
+			<% include DocumentationVersions %>
+		</div>
+	</div>
+
+	<div class="wrapper">
+		<div id="layout" class="clearfix">
+
+			<% include DocumentationSidebar %>
+
+			<div id="content">
+				$Layout
+
+				<% include DocumentationFooter %>
+			</div>
+		</div>
+	</div>
+
+
+	<% include DocumentationGA %>
+	<% include DocumentationEnd %>
+</html>
diff --git a/themes/userhelp/templates/DocumentationViewer_all.ss b/themes/userhelp/templates/DocumentationViewer_all.ss
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html>
+	<% include DocumentationHead %>
+
+	<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
+		<div class="wrapper">
+
+			<div class="doc-breadcrumbs">
+				<p>
+					<div class="menu-bar">
+						<a class="logo" href="https://userhelp.silverstripe.org/"></a>
+						<a class="menu-toggle">
+							<span></span>
+							<span></span>
+							<span></span>
+							<span></span>
+						</a>
+					</div>
+					<a class="breadcrumb" href="$BaseHref">Documentation</a>
+					<span>/</span>
+					<a class="breadcrumb current">Index</a>
+				</p>
+			</div>
+
+
+
+		</div>
+	</div>
+
+	<div class="wrapper">
+		<div id="layout" class="clearfix">
+
+				$Layout
+
+				<% include DocumentationFooter %>
+
+		</div>
+	</div>
+
+
+	<% include DocumentationGA %>
+	<% include DocumentationEnd %>
+</html>
diff --git a/themes/userhelp/templates/DocumentationViewer_results.ss b/themes/userhelp/templates/DocumentationViewer_results.ss
@@ -1,35 +1,43 @@
 <!DOCTYPE html>
 
 <html>
-	<% include DocumentationHead %>	
-	
+	<% include DocumentationHead %>
+
 	<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
 		<div class="wrapper">
 
 			<div class="doc-breadcrumbs">
 				<p>
-					<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
-						<a class="breadcrumb" href="$BaseHref">Userhelp</a>
-						<span>/</span>		
-						<a class="breadcrumb current">Search</a> 		
+					<div class="menu-bar">
+						<a class="logo" href="https://userhelp.silverstripe.org/"></a>
+						<a class="menu-toggle">
+							<span></span>
+							<span></span>
+							<span></span>
+							<span></span>
+						</a>
+					</div>
+					<a class="breadcrumb" href="$BaseHref">Userhelp</a>
+					<span>/</span>
+					<a class="breadcrumb current">Search</a>
 				</p>
 			</div>
-			
-				
-			
+
+
+
 		</div>
-	</div>	
-	
+	</div>
+
 	<div class="wrapper">
 		<div id="layout" class="clearfix">
 
 				$Layout
-				
+
 				<% include DocumentationFooter %>
-			
+
 		</div>
 	</div>
-	
+
 
 	<% include DocumentationGA %>
 	<% include DocumentationEnd %>

diff --git a/themes/userhelp/templates/Includes/DocumentationHead.ss b/themes/userhelp/templates/Includes/DocumentationHead.ss
@@ -1,6 +1,7 @@
 <head>
 	<% base_tag %>
 	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title><% if Title %>$Title &#8211; <% end_if %>SilverStripe Documentation</title>
 
 	<% include DocumentationFavicons %>