better styling around the home page

DarthFubuMVC · Jun 30, 2014 · d1d4fbc · d1d4fbc
1 parent c6cd5cb
commit d1d4fbc
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 61 deletions.
diff --git a/src/FubuMVC.Diagnostics/Dashboard.spark b/src/FubuMVC.Diagnostics/Dashboard.spark
@@ -12,6 +12,7 @@
     <title>FubuMVC Diagnostics</title>
 
     <Stylesheet href="diagnostics/bootstrap.min.css"/>
+    <Stylesheet href="diagnostics/master.css"/>
     !{Model.StyleTags}
   </head>
 
@@ -47,20 +48,63 @@
 
     <div class="container-fluid">
       <div class="row">
-
-
         <div class="col-xs-12 col-md-12 main">
-          <h1 class="page-header">
+          <h1>
             <span id="main-heading"></span>
             <small id="main-description"></small>
           </h1>
-
-
+
           <div id="main-pane">
 
           </div>
 
+
+          <div class="row" id="home-view">
+
+            <div class="col-xs-6 col-md-6 main">
+              <h3>Getting Started</h3>
+              <p>You are viewing the Advanced Diagnostics package that provides detailed insight into the configuration and runtime of your application.</p>
+
+              <ol>
+                <li>
+                  <strong>
+                    <a href="#fubumvc/endpoints"> Explore your application</a>
+                  </strong>
+                  <p>The endpoint explorer allows you to sort and filter through the routes, endpoints, and chains within your application. You can also drill into the details and visualize the behavior chain.</p>
+                </li>
+                <li>
+                  <strong>
+                    <a href="#fubumvc/requests">Explore the request history</a>
+                  </strong>
+                  <p>The requests explorer allows you to see the most recent requests that have been recorded within your application. You can drill into the details of each request to visualize the various steps that were taken to issue the response.</p>
+                </li>
+                <li>
+                  <strong>
+                    <a href="http://fubuworld.com/fubumvc/">Browse the documentation</a>
+                  </strong>
+                  <p>Browse through our topics and read more about the our APIs.</p>
+                </li>
+                <li>
+                  <strong>
+                    <a href="https://groups.google.com/forum/#!forum/fubumvc-devel">If you're really stuck</a>
+                  </strong>
+                  <p>Visit our user group to learn how to get plugged into our vibrant community. You'll get your questions answered in no time.</p>
+                </li>
+              </ol>
+
+
+            </div>
+
+            <div class="col-xs-6 col-md-6 main" >
+              <h3>All Diagnostic Views</h3>
+              <div id="all-links"></div>
+            </div>
+          </div>
+
         </div>
+
+
+
 
       </div>
 
@@ -88,51 +132,3 @@
 
 
 
-
-<!--
-<div class="container-fluid">
-  <div class="row-fluid">
-    <div class="span3 well">
-      The FubuMVC diagnostics are organized into separate groups or subsystems.  You can select a different category of diagnostics from the links below or the dropdown menu at the top right of each page.
-      <br></br>
-
-    </div>
-    <div class="span9">
-
-      <h2>Welcome to FubuMVC!</h2>
-      <h3 class="subheader">The MVC framework that gets out of your way</h3>
-      <p>You are viewing the Advanced Diagnostics package that provides detailed insight into the configuration of your application.</p>
-      <hr />
-      <h3>Getting started</h3>
-      <h4 class="subheader">Some tips on where to go from here</h4>
-      <ol>
-        <li>
-          <strong>
-            <a href="${this.Urls.UrlFor(new FubuMVC.Diagnostics.Endpoints.RoutesRequest())}"> Explore your application</a>
-          </strong>
-          <p>The endpoint explorer allows you to sort and filter through the routes, endpoints, and chains within your application. You can also drill into the details and visualize the behavior chain.</p>
-        </li>
-        <li>
-          <strong>
-            <a href="${this.Urls.UrlFor<FubuMVC.Diagnostics.Requests.RequestsFubuDiagnostics>(x => x.get_requests())}">Explore the request history</a>
-          </strong>
-          <p>The requests explorer allows you to see the most recent requests that have been recorded within your application. You can drill into the details of each request to visualize the various steps that were taken to issue the response.</p>
-        </li>
-        <li>
-          <strong>
-            <a href="http://fubuworld.com/fubumvc/">Browse the documentation</a>
-          </strong>
-          <p>Browse through our topics and read more about the our APIs.</p>
-        </li>
-        <li>
-          <strong>
-            <a href="https://groups.google.com/forum/#!forum/fubumvc-devel">If you're really stuck</a>
-          </strong>
-          <p>Visit our user group to learn how to get plugged into our vibrant community. You'll get your questions answered in no time.</p>
-        </li>
-      </ol>
-
-    </div>
-  </div>
-</div>
-      -->
diff --git a/src/FubuMVC.Diagnostics/diagnostics/fubu-diagnostics.js b/src/FubuMVC.Diagnostics/diagnostics/fubu-diagnostics.js
@@ -31,13 +31,23 @@ var FubuDiagnostics = {
 	},
 
 
-    start: function(navBar, defaultScreen) {
+    start: function(navBar) {
 		this.navBar = navBar;
-		this.defaultScreen = defaultScreen;
+		this.defaultScreen = {
+			activate: function(){
+				$('#home-view').show();
+				$('main-pane').hide();
+			},
+
+			deactivate: function(){
+				$('#home-view').hide();
+				$('main-pane').show();
+			}
+		};
 
 		var router = new Backbone.Router();
 		router.route('*actions', 'defaultRoute', function(){
-			FubuDiagnostics.showScreen(defaultScreen, {title: 'FubuMVC Diagnostics', description: 'Visualization and insight into a running FubuMVC application'}, {});
+			FubuDiagnostics.showScreen(FubuDiagnostics.defaultScreen, {title: 'Welcome to FubuMVC!', description: 'The .Net web framework that gets out of your way'}, {});
 		});
 
 

diff --git a/...ics/Content/Styles/diagnostics/master.css → ...ubuMVC.Diagnostics/diagnostics/master.css b/...ics/Content/Styles/diagnostics/master.css → ...ubuMVC.Diagnostics/diagnostics/master.css
@@ -211,3 +211,7 @@ footer p span {
     float: left;
     margin-right: 10px;
 }
+
+.section-subtitle {
+	margin-left: 10px !important;
+}
diff --git a/src/FubuMVC.Diagnostics/diagnostics/navigation-react.js b/src/FubuMVC.Diagnostics/diagnostics/navigation-react.js
@@ -91,23 +91,23 @@ var SectionLinks = React.createClass({
 
 FubuDiagnostics.components.SectionLinks = SectionLinks;
 
-FubuDiagnostics.components.AllLinks = React.createClass({
+AllLinks = React.createClass({
 	render: function(){
 		var items = FubuDiagnostics.sections.map(function(s, i){
 			var header = null;
 			if (s.activeViews().length == 0){
 				header = (
 					<h4>
 						<a href={s.anchor}>{s.title}</a>
-						<small className="small">{s.description}</small>
+						<small className="section-subtitle">{s.description}</small>
 					</h4>
 				);
 			}
 			else{
 				header = (
 					<h4>
 						<span>{s.title}</span>
-						<small className="small">{s.description}</small>
+						<small className="section-subtitle">{s.description}</small>
 					</h4>
 				);
 			}
@@ -130,8 +130,12 @@ FubuDiagnostics.components.AllLinks = React.createClass({
 	}
 });
 
-var screen = new ReactScreen(FubuDiagnostics.components.AllLinks);
-FubuDiagnostics.start(navBar, screen);
+React.renderComponent(
+  <AllLinks data={FubuDiagnostics} />,
+  document.getElementById('all-links')
+);
+
+FubuDiagnostics.start(navBar);