Skip to content
This repository was archived by the owner on Apr 17, 2018. It is now read-only.

Commit a039a9e

Browse files
Glavin001Glavin001
committed
Merge pull request #38 from mozilla/MainInterface
improve(UI): cleaned up main interface
2 parents 3d2065e + b38ba79 commit a039a9e

File tree

8 files changed

+344
-65
lines changed

8 files changed

+344
-65
lines changed

‎app/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<![endif]-->
2727

2828
<!-- Add your site or application content here -->
29-
<div ng-view=""></div>
29+
<div ng-view="" class="height"></div>
3030

3131
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
3232
<script>

‎app/styles/layout.scss

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $sidebar-left-height: 300px;
1212
width: $sidebar-left-width;
1313
overflow-y: scroll;
1414
overflow-x: hidden;
15+
border-right: 1px solid lightgrey;
1516
// margin-left: 15px;
1617

1718

‎app/styles/main.scss

+183-7
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,6 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/boots
1212
padding: 0.2em 0;
1313
}
1414

15-
/* Space out content a bit */
16-
body {
17-
/* padding-top: 20px;
18-
padding-bottom: 20px;
19-
*/
20-
}
21-
2215
/* Everything but the jumbotron gets side spacing for mobile first views */
2316
.header,
2417
.marketing,
@@ -93,3 +86,186 @@ padding-bottom: 20px;
9386
border-bottom: 0;
9487
}
9588
}
89+
90+
.height {
91+
height: 100%;
92+
}
93+
94+
.create-form {
95+
width: 50%;
96+
margin-right: auto;
97+
margin-left: auto;
98+
text-align: center;
99+
100+
input {
101+
text-align: center;
102+
}
103+
}
104+
105+
.load-form {
106+
margin-left: 25%;
107+
}
108+
109+
/*
110+
* Globals
111+
*/
112+
113+
/* Links */
114+
a,
115+
a:focus,
116+
a:hover {
117+
color: #000;
118+
}
119+
120+
/* Custom default button */
121+
.btn-default,
122+
.btn-default:hover,
123+
.btn-default:focus {
124+
color: #333;
125+
text-shadow: none; /* Prevent inheritence from `body` */
126+
background-color: #fff;
127+
border: 1px solid #fff;
128+
}
129+
130+
// BOOTSTRAP COVERPAGE TEMPLATE
131+
/*
132+
* Base structure
133+
*/
134+
135+
html,
136+
body {
137+
height: 100%;
138+
background-color: #fff; /*#A7BCD9;*/
139+
}
140+
141+
142+
/* Extra markup and styles for table-esque vertical and horizontal centering */
143+
.site-wrapper {
144+
display: table;
145+
width: 100%;
146+
height: 100%; /* For at least Firefox */
147+
min-height: 100%;
148+
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
149+
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
150+
background-color: #D0E2F2; /*#A7BCD9;*/
151+
text-align: center;
152+
153+
}
154+
.site-wrapper-inner {
155+
display: table-cell;
156+
vertical-align: top;
157+
}
158+
.cover-container {
159+
margin-right: auto;
160+
margin-left: auto;
161+
}
162+
163+
/* Padding for spacing */
164+
.inner {
165+
padding: 30px;
166+
}
167+
168+
169+
/*
170+
* Header
171+
*/
172+
.masthead-brand {
173+
margin-top: 10px;
174+
margin-bottom: 10px;
175+
}
176+
177+
.masthead-nav > li {
178+
display: inline-block;
179+
}
180+
.masthead-nav > li + li {
181+
margin-left: 20px;
182+
}
183+
.masthead-nav > li > a {
184+
padding-right: 0;
185+
padding-left: 0;
186+
font-size: 16px;
187+
font-weight: bold;
188+
color: #000; /* IE8 proofing */
189+
/*color: rgba(255,255,255,.75);*/
190+
/*border-bottom: 2px solid transparent;*/
191+
}
192+
.masthead-nav > li > a:hover,
193+
.masthead-nav > li > a:focus {
194+
color: #666;
195+
background-color: transparent;
196+
border-bottom-color: #a9a9a9;
197+
border-bottom-color: rgba(255,255,255,.25);
198+
}
199+
.masthead-nav > .active > a,
200+
.masthead-nav > .active > a:hover,
201+
.masthead-nav > .active > a:focus {
202+
color: #000;
203+
border-bottom-color: #000;
204+
}
205+
206+
@media (min-width: 768px) {
207+
.masthead-brand {
208+
float: left;
209+
}
210+
.masthead-nav {
211+
float: right;
212+
}
213+
}
214+
215+
216+
/*
217+
* Cover
218+
*/
219+
220+
.cover {
221+
padding: 0 20px;
222+
}
223+
.cover .btn-lg {
224+
padding: 10px 20px;
225+
font-weight: bold;
226+
}
227+
228+
229+
/*
230+
* Footer
231+
*/
232+
233+
.mastfoot {
234+
color: #000; /* IE8 proofing */
235+
/*color: rgba(255,255,255,.5);*/
236+
}
237+
238+
239+
/*
240+
* Affix and center
241+
*/
242+
243+
@media (min-width: 768px) {
244+
/* Pull out the header and footer */
245+
.masthead {
246+
position: fixed;
247+
top: 0;
248+
}
249+
.mastfoot {
250+
position: fixed;
251+
bottom: 0;
252+
}
253+
/* Start the vertical centering */
254+
.site-wrapper-inner {
255+
vertical-align: middle;
256+
}
257+
/* Handle the widths */
258+
.masthead,
259+
.mastfoot,
260+
.cover-container {
261+
width: 100%; /* Must be percentage or pixels for horizontal alignment */
262+
}
263+
}
264+
265+
@media (min-width: 992px) {
266+
.masthead,
267+
.mastfoot,
268+
.cover-container {
269+
width: 700px;
270+
}
271+
}

‎app/views/about.html

+42-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1-
<p>This is the about view.</p>
1+
<div class="site-wrapper">
2+
<div class="site-wrapper-inner">
3+
4+
<div class="cover-container">
5+
6+
<div class="masthead clearfix">
7+
<div class="inner">
8+
<h3 class="masthead-brand">SeaSponge</h3>
9+
<nav>
10+
<ul class="nav masthead-nav">
11+
<li><a href="#/">App</a></li>
12+
<li><a href="https://github.com/mozilla/seasponge/wiki">Documentation</a></li>
13+
<li><a href="https://www.github.com/mozilla/seasponge">Github</a></li>
14+
</ul>
15+
</nav>
16+
</div>
17+
</div>
18+
19+
<div class="inner cover">
20+
<!-- <h1 class="cover-heading">An Open Sourced HTML5 Threat Modelling Tool</h1> -->
21+
<p class="lead">An open sourced and client-side HTML5 Threat Modelling Tool.
22+
<br><br>
23+
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>
24+
</div>
25+
26+
<div class="mastfoot">
27+
<div class="inner">
28+
29+
<a href="https://wiki.mozilla.org/Security/Automation/WinterOfSecurity2014">
30+
<p>Created for the Mozilla Winter of Security 2014</p>
31+
<!-- <img src="images/WinterOfSecurityLogoWhite.png" height="50" alt=""> -->
32+
</a>
33+
<!-- <a href="http://www.smu.ca/">
34+
<img src="images/SMU-Logo.png" height="50" alt="Saint Mary's University Logo">
35+
</a> -->
36+
</div>
37+
</div>
38+
39+
</div>
40+
41+
</div>
42+
</div>

‎app/views/create.html

+23-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
<div class="container">
2-
3-
<div class="jumbotron">
4-
<h1>Create SeaSponge Model</h1>
5-
<p class="lead">
6-
Please fill in the form below.
7-
</p>
8-
9-
<div class="">
10-
11-
<form role="form">
1+
<div class="site-wrapper">
2+
<div class="site-wrapper-inner">
3+
4+
<div class="cover-container">
5+
6+
<div class="masthead clearfix">
7+
<div class="inner">
8+
<h3 class="masthead-brand">SeaSponge</h3>
9+
<nav>
10+
<ul class="nav masthead-nav">
11+
<li><a href="#/about">About</a></li>
12+
<li><a href="https://github.com/mozilla/seasponge/wiki">Documentation</a></li>
13+
<li><a href="https://www.github.com/mozilla/seasponge">Github</a></li>
14+
</ul>
15+
</nav>
16+
</div>
17+
</div>
18+
19+
<div class="inner cover">
20+
<p class="lead">Create a Model</p>
21+
<form role="form" class="create-form">
1222

1323
<div class="form-group">
1424
<label for="project-name">Project Title</label>
@@ -28,12 +38,12 @@ <h1>Create SeaSponge Model</h1>
2838
placeholder="Version" ng-model="version">
2939
</div>
3040

31-
<button type="submit" class="btn btn-default" ng-click="createModel()">Create!</button>
41+
<button type="submit" class="btn btn-default" ng-click="createModel()">Start Modeling!</button>
3242

3343
</form>
44+
</div>
3445

3546
</div>
3647

3748
</div>
38-
3949
</div>

‎app/views/draw.html

+44-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
1-
<div class="">
1+
<div>
22

33
<!-- Top Nav Bar -->
44
<div class="nav-top">
55
<div class="btn-toolbar" role="toolbar">
66
<div class="btn-group">
7-
<a href="#/create" class="btn btn-default">
7+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
8+
<span class="glyphicon glyphicon-floppy-disk"></span> File <span class="caret"></span>
9+
</button>
10+
<ul class="dropdown-menu" role="menu">
11+
<li><a href="#/create">
812
<i class="glyphicon glyphicon-plus"></i>
9-
New
10-
</a>
11-
<a href="#/load" class="btn btn-default">
13+
New Model
14+
</a></li>
15+
<li class="divider"></li>
16+
<li><a ng-click="saveModel()">
17+
<i class="glyphicon glyphicon-floppy-save"></i>
18+
Save Model
19+
</a></li>
20+
<li><a href="#/load">
1221
<i class="glyphicon glyphicon-floppy-open"></i>
13-
Load
14-
</a>
15-
<button type="button" class="btn btn-default" ng-click="saveModel()">
16-
<i class="glyphicon glyphicon-floppy-save"></i>
17-
Save
18-
</button>
22+
Load Model
23+
</a></li>
24+
<li class="divider"></li>
25+
<li><a ng-click="exportDiagram()">
26+
<i class="glyphicon glyphicon-export"></i>
27+
Export Diagram as Image
28+
</a></li>
29+
<li class="divider"></li>
30+
<li><a ng-click="">
31+
<i class="glyphicon glyphicon-export"></i>
32+
Export Report as PDF
33+
</a></li>
34+
<li><a ng-click="">
35+
<i class="glyphicon glyphicon-export"></i>
36+
Export Diagram as HTML
37+
</a></li>
38+
</ul>
1939
</div>
2040
<div class="btn-group">
2141
<button type="button" class="btn btn-default">
@@ -32,12 +52,21 @@
3252
{{model.title}}
3353
</button>
3454
</div>
55+
3556
<div class="btn-group pull-right">
36-
<button type="button" class="btn btn-default"
37-
ng-click="exportDiagram()">
38-
<i class="glyphicon glyphicon-export"></i>
39-
Export Diagram as Image
57+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
58+
<i class="glyphicon glyphicon-question-sign"></i> Help <span class="caret"></span>
4059
</button>
60+
<ul class="dropdown-menu" role="menu">
61+
<li>
62+
<a href="#/about">
63+
About SeaSponge
64+
</a>
65+
</li>
66+
<li><a href="https://github.com/mozilla/seasponge/wiki">
67+
Documentation
68+
</a></li>
69+
</ul>
4170
</div>
4271
</div>
4372
<br/>

0 commit comments

Comments
 (0)