Skip to content

Commit d0379a9

Browse files
sbstjnsbstjn
committed
Info site
1 parent bbef782 commit d0379a9

File tree

5 files changed

+92
-25
lines changed

5 files changed

+92
-25
lines changed

‎source/index.haml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
11
#box
22
#box-inner
3+
%h1
4+
Timesheet<span>.js</span>
5+
%p Visualize events with pure <span>HTML5 and CSS3</span>. Create responsive time sheets with sneaky JavaScript. Generated based on HTML structure or just plain text.
6+
37
#timesheet
8+
9+
%p Just include Timesheet.js and configure your data. No external dependencies, <span>no jQuery</span> needed and <span>no Angular.JS</span> as well! Just pure JavaScript generation, beautiful HTML5 layout and some realy delicious CSS3.
10+
11+
%code
12+
%pre
13+
:escaped
14+
<script src="/javascripts/timesheet.js" type="text/javascript">
15+
16+
%p Create your HTML structure. Or prepare your data in plain text or easily create Timesheets with pure JavaScripts
17+
18+
%code
19+
%pre
20+
:escaped
21+
<ul><li></li></ul>
22+
23+
%p Lorem ipsum dolor sit amet.

‎source/javascripts/main.js

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,18 @@
77

88
Lib.ready(function() {
99
/* jshint -W031 */
10-
new Timesheet('timesheet', [
11-
['2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
12-
['05/2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
13-
['05/2002', '2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
14-
['2002', '04/2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
15-
['2002', '2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
16-
['2002', '01/2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
17-
['2002', '02/2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
18-
['2002', '2004', 'Lorem ipsum dolor sit amet #1', 'lorem'],
19-
['2002', '05/2007', 'Lorem ipsum dolor sit amet #1', 'lorem'],
20-
['2002', '06/2006', 'Lorem ipsum dolor sit amet #2', 'lorem'],
21-
['01/2005', '07/2006', 'Lorem ipsum dolor sit amet #3', 'ipsum'],
22-
['06/2007', 'Lorem ipsum dolor sit amet #4'],
23-
['11/2007', '03/2009', 'Lorem ipsum dolor sit amet #5', 'dolor'],
24-
['07/2008', '07/2009', 'Lorem ipsum dolor sit amet #6', 'lorem'],
25-
['02/2009', '012/2009', 'Lorem ipsum dolor sit amet #7', 'sit'],
26-
['2010', '10/2011', 'Lorem ipsum dolor sit amet #8', 'ipsum']
10+
new Timesheet('timesheet', 2002, 2013, [
11+
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
12+
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
13+
['09/2003', 'Had very bad luck'],
14+
['10/2003', '2006', 'At least had fun', 'dolor'],
15+
['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
16+
['07/2005', '09/2005', 'Bad luck again', 'default'],
17+
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
18+
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
19+
['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
20+
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
21+
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
2722
]);
2823

2924
});

‎source/javascripts/timesheet.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
(function() {
66
'use strict';
77

8-
var Timesheet = function(container, data) {
8+
var Timesheet = function(container, min, max, data) {
99
this.container = '#' + container;
1010
this.data = [];
1111
this.year = {
12-
min: (new Date()).getFullYear(),
13-
max: (new Date()).getFullYear()
12+
min: min,
13+
max: max
1414
};
1515

1616
this.parse(data);
@@ -66,7 +66,7 @@
6666
for (var n = 0, m = data.length; n<m; n++) {
6767
var beg = this.parseDate(data[n][0]);
6868
var end = data[n].length === 4 ? this.parseDate(data[n][1]) : null;
69-
var lbl = data[n][2] || data[n][1];
69+
var lbl = data[n].length === 4 ? data[n][2] : data[n][1];
7070
var cat = data[n][3] || 'default';
7171

7272
if (beg.getFullYear() < this.year.min) {

‎source/layouts/layout.haml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
%meta{:content => 'IE=edge,chrome=1', 'http-equiv' => 'X-UA-Compatible'}
66

77
= javascript_include_tag 'timesheet.js', 'main.js'
8+
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Oxygen+Mono:400,600,800'
9+
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:400,600,800'
810
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700'
911
= stylesheet_link_tag 'all.css'
1012
= yield_content :head
1113
%body{ :class => page_classes }
14+
%span <a href="https://github.com/semu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
1215
#container
1316
= yield

‎source/stylesheets/all.css.sass

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,68 @@ html, body
1111
height: 100%
1212

1313
#box
14-
display: table
14+
// display: table
1515
width: 100%
1616
height: 100%
1717

1818
#box-inner
19-
display: table-cell
19+
// display: table-cell
2020
height: 100%
2121
text-align: center
2222
vertical-align: middle
2323

24+
#example-data
25+
margin: 0 auto
26+
width: 680px
27+
height: 300px
28+
background-color: rgba(100, 100, 100, 1)
29+
30+
p
31+
text-align: right
32+
font-size: 12px
33+
a
34+
color: rgba(255, 145, 18, 1)
35+
text-decoration: none
36+
37+
h1
38+
font-family: 'Open Sans'
39+
font-size: 60pt
40+
font-weight: 800
41+
line-height: 240px
42+
color: rgba(255, 145, 18, 1)
43+
44+
span
45+
font-weight: 600
46+
color: white
47+
48+
p
49+
width: 680px
50+
text-align: left
51+
font-family: 'Open Sans'
52+
font-weight: 400
53+
color: rgba(220, 220, 220, 1)
54+
margin: 20px auto
55+
line-height: 24px
56+
57+
span
58+
color: rgba(255, 145, 18, 1)
59+
font-weight: 600
60+
61+
code
62+
pre
63+
margin: 0 auto
64+
width: 700px
65+
background-color: rgba(100, 100, 100, 1)
66+
padding: 20px 10px
67+
font-family: 'Oxygen Mono'
68+
font-size: 10pt
69+
70+
code, pre
71+
text-align: left
72+
2473
#timesheet
25-
width: 800px
26-
height: 600px
74+
width: 720px
75+
height: 292px
2776
margin: 0 auto
2877

2978
.timesheet

0 commit comments

Comments
 (0)