Merge pull request #38 from mozilla/MainInterface

improve(UI): cleaned up main interface
mozilla · Dec 19, 2014 · a039a9e · a039a9e
2 parents 3d2065e + b38ba79
commit a039a9e
Show file tree

Hide file tree

Showing 8 changed files with 344 additions and 65 deletions.
diff --git a/app/index.html b/app/index.html
@@ -26,7 +26,7 @@
     <![endif]-->
 
   <!-- Add your site or application content here -->
-  <div ng-view=""></div>
+  <div ng-view="" class="height"></div>
 
   <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
   <script>

diff --git a/app/styles/layout.scss b/app/styles/layout.scss
@@ -12,6 +12,7 @@ $sidebar-left-height: 300px;
   width: $sidebar-left-width;
   overflow-y: scroll;
   overflow-x: hidden;
+  border-right: 1px solid lightgrey;
   // margin-left: 15px;
 
 

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -12,13 +12,6 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/boots
   padding: 0.2em 0;
 }
 
-/* Space out content a bit */
-body {
-/*   padding-top: 20px;
-padding-bottom: 20px;
- */
- }
-
 /* Everything but the jumbotron gets side spacing for mobile first views */
 .header,
 .marketing,
@@ -93,3 +86,186 @@ padding-bottom: 20px;
     border-bottom: 0;
   }
 }
+
+.height {
+  height: 100%;
+}
+
+.create-form {
+  width: 50%;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
+
+  input {
+    text-align: center;
+  }
+}
+
+.load-form {
+  margin-left: 25%;
+}
+
+/*
+ * Globals
+ */
+
+/* Links */
+a,
+a:focus,
+a:hover {
+  color: #000;
+}
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritence from `body` */
+  background-color: #fff;
+  border: 1px solid #fff;
+}
+
+// BOOTSTRAP COVERPAGE TEMPLATE
+/*
+ * Base structure
+ */
+
+html,
+body {
+  height: 100%;
+  background-color: #fff; /*#A7BCD9;*/
+}
+
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%; /* For at least Firefox */
+  min-height: 100%;
+  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+  background-color: #D0E2F2; /*#A7BCD9;*/
+  text-align: center;
+
+}
+.site-wrapper-inner {
+  display: table-cell;
+  vertical-align: top;
+}
+.cover-container {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Padding for spacing */
+.inner {
+  padding: 30px;
+}
+
+
+/*
+ * Header
+ */
+.masthead-brand {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.masthead-nav > li {
+  display: inline-block;
+}
+.masthead-nav > li + li {
+  margin-left: 20px;
+}
+.masthead-nav > li > a {
+  padding-right: 0;
+  padding-left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #000; /* IE8 proofing */
+  /*color: rgba(255,255,255,.75);*/
+  /*border-bottom: 2px solid transparent;*/
+}
+.masthead-nav > li > a:hover,
+.masthead-nav > li > a:focus {
+  color: #666;
+  background-color: transparent;
+  border-bottom-color: #a9a9a9;
+  border-bottom-color: rgba(255,255,255,.25);
+}
+.masthead-nav > .active > a,
+.masthead-nav > .active > a:hover,
+.masthead-nav > .active > a:focus {
+  color: #000;
+  border-bottom-color: #000;
+}
+
+@media (min-width: 768px) {
+  .masthead-brand {
+    float: left;
+  }
+  .masthead-nav {
+    float: right;
+  }
+}
+
+
+/*
+ * Cover
+ */
+
+.cover {
+  padding: 0 20px;
+}
+.cover .btn-lg {
+  padding: 10px 20px;
+  font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+  color: #000; /* IE8 proofing */
+  /*color: rgba(255,255,255,.5);*/
+}
+
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+  /* Pull out the header and footer */
+  .masthead {
+    position: fixed;
+    top: 0;
+  }
+  .mastfoot {
+    position: fixed;
+    bottom: 0;
+  }
+  /* Start the vertical centering */
+  .site-wrapper-inner {
+    vertical-align: middle;
+  }
+  /* Handle the widths */
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 100%; /* Must be percentage or pixels for horizontal alignment */
+  }
+}
+
+@media (min-width: 992px) {
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 700px;
+  }
+}
diff --git a/app/views/about.html b/app/views/about.html
@@ -1 +1,42 @@
-<p>This is the about view.</p>
+<div class="site-wrapper">
+	<div class="site-wrapper-inner">
+
+		<div class="cover-container">
+
+			<div class="masthead clearfix">
+				<div class="inner">
+				  <h3 class="masthead-brand">SeaSponge</h3>
+				  <nav>
+				    <ul class="nav masthead-nav">
+				      <li><a href="#/">App</a></li>
+				      <li><a href="https://github.com/mozilla/seasponge/wiki">Documentation</a></li>
+				      <li><a href="https://www.github.com/mozilla/seasponge">Github</a></li>
+				    </ul>
+				  </nav>
+				</div>
+			</div>
+
+			<div class="inner cover">
+				<!-- <h1 class="cover-heading">An Open Sourced HTML5 Threat Modelling Tool</h1> -->
+				<p class="lead">An open sourced and client-side HTML5 Threat Modelling Tool. 
+				<br><br>
+				Threat modelling is something that is often missed in software development lifecycles. This changed now, use SeaSponge to plan out your application and squash threats before they are ever implemented.</p>
+			</div>
+
+			<div class="mastfoot">
+				<div class="inner">
+
+					<a href="https://wiki.mozilla.org/Security/Automation/WinterOfSecurity2014">
+						<p>Created for the Mozilla Winter of Security 2014</p>
+						<!-- <img src="images/WinterOfSecurityLogoWhite.png" height="50" alt=""> -->
+					</a>
+					<!-- <a href="http://www.smu.ca/">
+					 	<img src="images/SMU-Logo.png" height="50" alt="Saint Mary's University Logo">
+				 	</a> -->
+				</div>
+			</div>
+
+		</div>
+
+	</div>
+</div>
diff --git a/app/views/create.html b/app/views/create.html
@@ -1,14 +1,24 @@
-<div class="container">
-
-  <div class="jumbotron">
-    <h1>Create SeaSponge Model</h1>
-    <p class="lead">
-        Please fill in the form below.
-    </p>
-
-    <div class="">
-
-        <form role="form">
+<div class="site-wrapper">
+  <div class="site-wrapper-inner">
+
+    <div class="cover-container">
+
+      <div class="masthead clearfix">
+        <div class="inner">
+          <h3 class="masthead-brand">SeaSponge</h3>
+          <nav>
+            <ul class="nav masthead-nav">
+              <li><a href="#/about">About</a></li>
+              <li><a href="https://github.com/mozilla/seasponge/wiki">Documentation</a></li>
+              <li><a href="https://www.github.com/mozilla/seasponge">Github</a></li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+
+      <div class="inner cover">
+        <p class="lead">Create a Model</p>
+        <form role="form" class="create-form">
 
           <div class="form-group">
             <label for="project-name">Project Title</label>
@@ -28,12 +38,12 @@ <h1>Create SeaSponge Model</h1>
             placeholder="Version" ng-model="version">
           </div>
 
-          <button type="submit" class="btn btn-default" ng-click="createModel()">Create!</button>
+          <button type="submit" class="btn btn-default" ng-click="createModel()">Start Modeling!</button>
 
         </form>
+      </div>
 
     </div>
 
   </div>
-
 </div>
diff --git a/app/views/draw.html b/app/views/draw.html
@@ -1,21 +1,41 @@
-<div class="">
+<div>
 
   <!-- Top Nav Bar -->
   <div class="nav-top">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <a href="#/create" class="btn btn-default">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+          <span class="glyphicon glyphicon-floppy-disk"></span> File <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="#/create">
             <i class="glyphicon glyphicon-plus"></i>
-            New
-        </a>
-        <a href="#/load" class="btn btn-default">
+            New Model
+          </a></li>
+          <li class="divider"></li>
+          <li><a ng-click="saveModel()">
+            <i class="glyphicon glyphicon-floppy-save"></i>
+            Save Model
+          </a></li>
+          <li><a href="#/load">
             <i class="glyphicon glyphicon-floppy-open"></i>
-            Load
-        </a>
-        <button type="button" class="btn btn-default" ng-click="saveModel()">
-            <i class="glyphicon glyphicon-floppy-save"></i> 
-            Save
-        </button>
+            Load Model
+          </a></li>
+          <li class="divider"></li>
+          <li><a ng-click="exportDiagram()">
+            <i class="glyphicon glyphicon-export"></i>
+            Export Diagram as Image
+          </a></li>
+          <li class="divider"></li>
+          <li><a ng-click="">
+            <i class="glyphicon glyphicon-export"></i>
+            Export Report as PDF
+          </a></li>
+          <li><a ng-click="">
+            <i class="glyphicon glyphicon-export"></i>
+            Export Diagram as HTML
+          </a></li>
+        </ul>
       </div>
       <div class="btn-group">
         <button type="button" class="btn btn-default">
@@ -32,12 +52,21 @@
               {{model.title}}
           </button>
       </div>
+
       <div class="btn-group pull-right">
-        <button type="button" class="btn btn-default" 
-        ng-click="exportDiagram()">
-            <i class="glyphicon glyphicon-export"></i>
-            Export Diagram as Image
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+          <i class="glyphicon glyphicon-question-sign"></i> Help <span class="caret"></span>
         </button>
+        <ul class="dropdown-menu" role="menu">
+          <li>
+            <a href="#/about">
+              About SeaSponge
+            </a>
+          </li>
+          <li><a href="https://github.com/mozilla/seasponge/wiki">
+            Documentation
+          </a></li>
+        </ul>
       </div>
     </div>
     <br/>