Skip to content

Commit b57e703

Browse files
author
nhtoshiaki
committed
Adding option menu and sidebar to user interface.
1 parent 3d2d718 commit b57e703

File tree

6 files changed

+644
-84
lines changed

6 files changed

+644
-84
lines changed

‎Gruntfile.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ module.exports = function (grunt) {
3333
});
3434

3535
// Loading plugins
36-
//grunt.loadNpmTasks('grunt-contrib-watch');
37-
//grunt.loadNpmTasks('grunt-contrib-sass')
36+
grunt.loadNpmTasks('grunt-contrib-watch');
37+
grunt.loadNpmTasks('grunt-contrib-sass')
3838
grunt.loadNpmTasks('grunt-run');
3939

4040
// Registering tasks
41-
//grunt.registerTask('default', ['run:test', 'sass']);
41+
grunt.registerTask('default', ['run:test', 'sass']);
4242
grunt.registerTask('test', ['run:test'])
4343
};

‎_sass/dashboard.scss

+48-42
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
@import 'colors';
22

3+
$headerHeight: 60px;
4+
$sidebarWidth: 300px;
5+
6+
body {
7+
margin: 0;
8+
}
9+
310
.background {
411
background-color: white;
512
}
@@ -10,55 +17,54 @@
1017
top: 0;
1118
left: 0;
1219
width: 100%;
13-
height: 8%;
14-
padding: 15px;
15-
background: -webkit-linear-gradient(top, #222, black);
20+
height: $headerHeight;
21+
background: #222;
1622
.title {
23+
line-height: 60px;
24+
margin-left: 15px;
1725
box-sizing: border-box;
1826
font-size: 18px;
1927
font-weight: bold;
2028
color: white;
2129
}
2230
}
2331

24-
#sidebar {
25-
box-sizing: border-box;
26-
position: absolute;
27-
border: 1px solid magenta;
28-
left: 0;
29-
top: 8%;
30-
width: 30%;
31-
height: 72%;
32-
padding-top: 10px;
33-
padding-bottom: 10px;
34-
padding-left: 15px;
35-
padding-right: 15px;
36-
}
37-
38-
#primary {
39-
box-sizing: border-box;
40-
position: absolute;
41-
border: 1px solid red;
42-
left: 30%;
43-
top: 8%;
44-
width: 70%;
45-
height: 72%;
46-
padding-top: 10px;
47-
padding-bottom: 10px;
48-
padding-left: 15px;
49-
padding-right: 15px;
50-
}
51-
52-
#timeline {
53-
position: absolute;
32+
.options {
5433
box-sizing: border-box;
55-
border: 1px solid green;
56-
left: 0;
57-
top: 80%;
58-
width: 100%;
59-
height: 20%;
60-
padding: 10px;
61-
}
62-
63-
#view {
34+
position: fixed;
35+
height: 100%;
36+
width: $sidebarWidth;
37+
top: 0;
38+
left: -$sidebarWidth + 10px;
39+
background: white;
40+
box-shadow: 1px 0 8px black;
41+
.optionHeader {
42+
height: $headerHeight;
43+
background: #333;
44+
}
45+
.optionTitle {
46+
margin-left: 15px;
47+
font-weight: bold;
48+
font-size: 18px;
49+
color: white;
50+
line-height: $headerHeight;
51+
}
52+
ul.optionList {
53+
margin: 0;
54+
padding: 5px;
55+
li {
56+
height: 30px;
57+
line-height: 30px;
58+
padding: 5px;
59+
margin-top: 5px;
60+
margin-bottom: 5px;
61+
list-style: none;
62+
background: #DFDFDF;
63+
border-radius: 3px;
64+
box-shadow: 0 0 5px #222;
65+
&:hover {
66+
67+
}
68+
}
69+
}
6470
}

‎html/dashboard.html

+17
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,23 @@
1111
</script>
1212
</head>
1313
<body>
14+
<div class="header">
15+
<span class="title">GitVision</span>
16+
</div>
17+
<div class="options">
18+
<div class="optionHeader">
19+
<span class="optionTitle">Opções</span>
20+
</div>
21+
<ul class="optionList">
22+
<li>Opção 1</li>
23+
<li>Opção 2</li>
24+
<li>Opção 3</li>
25+
</ul>
26+
</div>
27+
<div class="sidebar">
28+
<span class="sidebarTitle">Filtros</span>
29+
30+
</div>
1431
<div class="background">
1532
<div id="view">
1633
</div>

0 commit comments

Comments
 (0)