Skip to content

Commit 2a1391f

Browse files
dansupdansup
committed
Add kanban board template
1 parent 29acc68 commit 2a1391f

File tree

6 files changed

+315
-0
lines changed

6 files changed

+315
-0
lines changed

‎css/boards.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
body {
2+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
3+
}
4+
.boards {
5+
padding:40px 0;
6+
}
7+
8+
.boards .board .box.is-gray {
9+
background-color: #F5F5F5;
10+
}
11+
.boards .board .box .items {
12+
padding: 20px 0;
13+
}
14+
.box .head .name {
15+
display: inline-block;
16+
font-size: 20px;
17+
font-weight: bold;
18+
color: #2C2C30;
19+
}
20+
.box .head .count {
21+
display: inline-block;
22+
padding-left: 5px;
23+
font-size: 20px;
24+
font-weight: bold;
25+
color: #AAAAAA;
26+
}
27+
.box .head .options {
28+
display: inline-block;
29+
float: right;
30+
padding-top:7px;
31+
color: #CCCCCC;
32+
}
33+
.items .box .title {
34+
font-size: 19px;
35+
}
36+
.items .box .meta img {
37+
border-radius: 30px;
38+
margin-right: 10px;
39+
}
40+
.items .box .meta .fa {
41+
margin: 3px 7px;
42+
color: #CCCCCC;
43+
}
44+
.items .add-card div {
45+
color: #AAAAAA;
46+
font-weight: bold;
47+
font-size: 16px;
48+
}

‎demo/admin.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
$(document).ready(function() {
2+
3+
new Morris.Line({
4+
// ID of the element in which to draw the chart.
5+
element: 'chart1',
6+
// Chart data records -- each entry in this array corresponds to a point on
7+
// the chart.
8+
data: [
9+
{ year: '2006', value: 10394 },
10+
{ year: '2007', value: 50391 },
11+
{ year: '2008', value: 102025 },
12+
{ year: '2009', value: 198563 },
13+
{ year: '2010', value: 985641 },
14+
{ year: '2011', value: 1253256 },
15+
{ year: '2012', value: 4563215 },
16+
{ year: '2013', value: 10563215 },
17+
{ year: '2014', value: 50125009 },
18+
{ year: '2015', value: 129300581 },
19+
{ year: '2016', value: 256251253 }
20+
],
21+
// The name of the data record attribute that contains x-values.
22+
xkey: 'year',
23+
// A list of names of data record attributes that contain y-values.
24+
ykeys: ['value'],
25+
// Labels for the ykeys -- will be displayed when you hover over the
26+
// chart.
27+
labels: ['Total Users']
28+
});
29+
30+
Morris.Donut({
31+
element: 'chart2',
32+
data: [
33+
{label: "Download Sales", value: 12},
34+
{label: "In-Store Sales", value: 30},
35+
{label: "Mail-Order Sales", value: 20}
36+
]
37+
});
38+
39+
Morris.Area({
40+
element: 'chart3',
41+
data: [
42+
{ y: '1', a: 80, b: 79 },
43+
{ y: '2', a: 75, b: 65 },
44+
{ y: '3', a: 50, b: 40 },
45+
{ y: '4', a: 75, b: 59 },
46+
{ y: '5', a: 50, b: 20 },
47+
{ y: '6', a: 75, b: 42 },
48+
{ y: '7', a: 75, b: 50 },
49+
{ y: '8', a: 50, b: 140 },
50+
{ y: '9', a: 75, b: null },
51+
{ y: '10', a: 50, b: null },
52+
{ y: '11', a: 75, b: null },
53+
{ y: '12', a: 100, b: null }
54+
],
55+
xkey: 'y',
56+
ykeys: ['a', 'b'],
57+
labels: ['2015', '2016']
58+
});
59+
60+
Morris.Bar({
61+
element: 'chart5',
62+
data: [
63+
{ y: '2006', a: 100, b: 90 },
64+
{ y: '2007', a: 75, b: 65 },
65+
{ y: '2008', a: 50, b: 40 },
66+
{ y: '2009', a: 75, b: 65 },
67+
{ y: '2010', a: 50, b: 40 },
68+
{ y: '2011', a: 75, b: 65 },
69+
{ y: '2012', a: 100, b: 90 }
70+
],
71+
xkey: 'y',
72+
ykeys: ['a', 'b'],
73+
labels: ['Series A', 'Series B']
74+
});
75+
});

‎demo/boards.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function addCard(e) {
2+
var el = e;
3+
var category = el.parentElement.parentElement.parentElement.parentElement.id;
4+
var items = el.parentElement.parentElement;
5+
var count = el.parentElement.parentElement.parentElement.querySelector('.head').querySelector('.count');
6+
var lastId = items.firstChild.id;
7+
var id = items.children.length;
8+
$(count).text(id);
9+
var hasComment = (Math.random() >= 0.5) ? '<a href="#"><i class="fa fa-comment-o"></i></a>' : '';
10+
var hasCalendar = (Math.random() >= 0.5) ? '<a href="#"><i class="fa fa-calendar"></i></a>' : '';
11+
var tmpl = '<div class="box" id="'+category+'c'+id+'">' +
12+
'<p class="title">'+ faker.lorem.sentence() +'</p>' +
13+
'<p class="meta">' +
14+
'<img src="https://placehold.it/28x28">' +
15+
'<a href="#"><i class="fa fa-bars"></i></a>' +
16+
hasComment +
17+
hasCalendar +
18+
'</p>' +
19+
'</div>';
20+
$(items).prepend(tmpl);
21+
}

‎images/boards.png‎

80.5 KB
Loading

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,18 @@ <h4 class="subtitle is-5">A layout with a dark aside</h4>
7676
<figure class="image"><img src="images/aside.png"></figure>
7777
</a>
7878
</div>
79+
<div class="column is-one-third-desktop is-full-mobile">
80+
<a class="box" href="templates/boards.html">
81+
<h3 class="title is-4">
82+
Boards
83+
<span class="tag is-primary">
84+
v 0.1.2
85+
</span>
86+
</h3>
87+
<h4 class="subtitle is-5">A kanban boards layout</h4>
88+
<figure class="image"><img src="images/boards.png"></figure>
89+
</a>
90+
</div>
7991
<div class="column is-one-third-desktop is-full-mobile">
8092
<a class="box" href="templates/blog.html">
8193
<h3 class="title is-4">

‎templates/boards.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Boards - Free Bulma template</title>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.0/css/bulma.min.css">
10+
<link rel="stylesheet" type="text/css" href="../css/boards.css">
11+
</head>
12+
<body>
13+
<nav class="nav has-shadow" id="top">
14+
<div class="container">
15+
<div class="nav-left">
16+
<a class="nav-item" href="../index.html">
17+
<img src="../images/bulma.png" alt="Description">
18+
</a>
19+
</div>
20+
<span class="nav-toggle">
21+
<span></span>
22+
<span></span>
23+
<span></span>
24+
</span>
25+
<div class="nav-right nav-menu">
26+
<a class="nav-item is-tab is-active">
27+
Home
28+
</a>
29+
<a class="nav-item is-tab">
30+
Features
31+
</a>
32+
<a class="nav-item is-tab">
33+
Team
34+
</a>
35+
<a class="nav-item is-tab">
36+
Help
37+
</a>
38+
<span class="nav-item">
39+
<a class="button">
40+
Log in
41+
</a>
42+
<a class="button is-info">
43+
Sign up
44+
</a>
45+
</span>
46+
</div>
47+
</div>
48+
</nav>
49+
<div class="section">
50+
<div class="">
51+
<div class="boards">
52+
<div class="columns">
53+
<div class="column is-3 board" id="b1">
54+
<div class="box is-gray">
55+
<div class="head">
56+
<div class="name">Backlog</div>
57+
<div class="count">1</div>
58+
<div class="options"><i class="fa fa-ellipsis-h"></i></div>
59+
</div>
60+
<div class="items">
61+
<div class="box" id="b1c1">
62+
<p class="title">test item</p>
63+
<p class="meta">
64+
<img src="https://placehold.it/28x28">
65+
<a href="#"><i class="fa fa-bars"></i></a>
66+
</p>
67+
</div>
68+
<div class="add-card">
69+
<div onclick="addCard(this)">
70+
<i class="fa fa-plus-circle"></i>
71+
Add new card
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
<div class="column is-3 board" id="b2">
78+
<div class="box is-gray">
79+
<div class="head">
80+
<div class="name">Upcoming</div>
81+
<div class="count">1</div>
82+
<div class="options"><i class="fa fa-ellipsis-h"></i></div>
83+
</div>
84+
<div class="items">
85+
<div class="box" id="b2c1">
86+
<p class="title">Update middle-out compression algorithm</p>
87+
<p class="meta">
88+
<img src="https://placehold.it/28x28">
89+
<a href="#"><i class="fa fa-bars"></i></a>
90+
</p>
91+
</div>
92+
<div class="add-card">
93+
<div onclick="addCard(this)">
94+
<i class="fa fa-plus-circle"></i>
95+
Add new card
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
<div class="column is-3 board" id="b3">
102+
<div class="box is-gray">
103+
<div class="head">
104+
<div class="name">In Progress</div>
105+
<div class="count">1</div>
106+
<div class="options"><i class="fa fa-ellipsis-h"></i></div>
107+
</div>
108+
<div class="items">
109+
<div class="box" id="b3c1">
110+
<p class="title">Send project notification to users</p>
111+
<p class="meta">
112+
<img src="https://placehold.it/28x28">
113+
<a href="#"><i class="fa fa-bars"></i></a>
114+
</p>
115+
</div>
116+
<div class="add-card">
117+
<div onclick="addCard(this)">
118+
<i class="fa fa-plus-circle"></i>
119+
Add new card
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<div class="column is-3 board" id="b4">
126+
<div class="box is-gray">
127+
<div class="head">
128+
<div class="name">Complete</div>
129+
<div class="count">1</div>
130+
<div class="options"><i class="fa fa-ellipsis-h"></i></div>
131+
</div>
132+
<div class="items">
133+
<div class="box" id="b4c1">
134+
<p class="title">Create first test</p>
135+
<p class="meta">
136+
<img src="https://placehold.it/28x28">
137+
<a href="#"><i class="fa fa-bars"></i></a>
138+
<a href="#"><i class="fa fa-comment-o"></i></a>
139+
</p>
140+
</div>
141+
<div class="add-card">
142+
<div onclick="addCard(this)">
143+
<i class="fa fa-plus-circle"></i>
144+
Add new card
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
<script type="text/javascript" src="../demo/jquery.js"></script>
155+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
156+
<script type="text/javascript" src="../js/bulma.js"></script>
157+
<script type="text/javascript" src="../demo/boards.js"></script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)