Skip to content

Commit ba35d84

Browse files
sbstjnsbstjn
committed
Updated README.mde, fixed styles
1 parent 0090914 commit ba35d84

File tree

7 files changed

+90
-21
lines changed

7 files changed

+90
-21
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# Timesheet.js - Work in progress
1+
# Timesheet.js
22

33
Simple JavaScript library to create HTML time sheets. Wrapped in an example project using Middleman …
44

5-
![](https://raw.githubusercontent.com/semu/timesheet.js/master/screen.png)
5+
![https://semu.github.io/timesheet.js](https://raw.githubusercontent.com/semu/timesheet.js/master/screen.png)
66

77
```javascript
88
new Timesheet('timesheet', 2002, 2013, [

‎source/index.haml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
Timesheet<span>.js</span>
55
%p Visualize your data and events with sexy <span>HTML5</span> and <span>CSS3</span>. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well …
66

7-
#timesheet
7+
#timesheet-default
88

99
%p Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by mighty you.
1010

@@ -34,4 +34,4 @@
3434
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
3535
]);
3636

37-
%p It's that simple to use <span>Timesheet.js</span>. So, have a nice day and thank you for smoking …
37+
%p It's that simple to use <span>Timesheet.js</span>. So, have a nice day, thank you for smoking and maybe try using Timesheet.js with custom styles …

‎source/javascripts/main.js

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

88
Lib.ready(function() {
99
/* jshint -W031 */
10-
new Timesheet('timesheet', 2002, 2013, [
10+
new Timesheet('timesheet-default', 2002, 2013, [
1111
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
1212
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
1313
['2003', 'Had very bad luck'],
@@ -16,9 +16,24 @@
1616
['07/2005', '09/2005', 'Bad luck again', 'default'],
1717
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
1818
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
19-
['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
19+
['01/2009', '05/2009', 'LOST Season #4', 'sit'],
2020
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
2121
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
2222
]);
23+
24+
new Timesheet('timesheet-alternative', 2002, 2013, [
25+
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
26+
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
27+
['2003', 'Had very bad luck'],
28+
['10/2003', '2006', 'At least had fun', 'dolor'],
29+
['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
30+
['07/2005', '09/2005', 'Bad luck again', 'default'],
31+
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
32+
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
33+
['01/2009', '05/2009', 'LOST Season #4', 'sit'],
34+
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
35+
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
36+
]);
37+
2338
});
2439
})();

‎source/javascripts/timesheet.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
html.push('<section>' + c + '</section>');
5858
}
5959

60-
document.querySelector(this.container).className = 'timesheet';
60+
document.querySelector(this.container).className = 'timesheet color-scheme-default';
6161
document.querySelector(this.container).innerHTML = '<div class="scale">' + html.join('') + '</div>';
6262
};
6363

‎source/layouts/layout.haml

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@
33
%head
44
%meta{:charset => 'utf-8'}
55
%meta{:content => 'IE=edge,chrome=1', 'http-equiv' => 'X-UA-Compatible'}
6-
%title Timesheet.js
6+
%meta{:property => 'og:title', :content => 'Timesheet.js'}
7+
%meta{:property => 'og:description', :content => 'With Timesheet.js you can create simple time and data sheets using HTML5, JavaScript and CSS3.'}
8+
%meta{:property => 'og:url', :content => 'https://semu.github.io/timesheet.js/'}
9+
%meta{:property => 'og:image', :content => 'https://raw.githubusercontent.com/semu/timesheet.js/master/screen.png'}
10+
%meta{:property => 'fb:admins', :content => '669118929'}
11+
12+
%title Timesheet.js - Open time tables with HTML, JavaScript and CSS …
713

814
= javascript_include_tag 'timesheet.js', 'main.js'
915
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Oxygen+Mono:400,600,800'
@@ -12,6 +18,7 @@
1218
= stylesheet_link_tag 'all.css'
1319
= yield_content :head
1420
%body{ :class => page_classes }
15-
%span <a hrefhttps://github.com/semu/timesheet.js"><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>
21+
%span <a hrefhttps://github.com/semu/timesheet.js'><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>
1622
#container
1723
= yield
24+
%script{:type => 'text/javascript'} var _gauges = _gauges || []; (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '538272a38bfdf705f50037c3'); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })();

‎source/stylesheets/all.css.sass

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,19 @@ footer
4848
color: rgba(255, 145, 18, 1)
4949
text-decoration: none
5050

51+
.center
52+
text-align: center
53+
54+
.version
55+
font-size: 12px
56+
line-height: 17px
57+
margin: 80px auto
58+
59+
a, a:visited, a:hover, a:active
60+
font-family: 'Open Sans'
61+
color: rgba(255, 145, 18, 1)
62+
text-decoration: none
63+
5164
h1
5265
font-family: 'Open Sans'
5366
font-size: 60pt

‎source/stylesheets/timesheet.css.sass

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#timesheet
1+
.timesheet
22
width: 720px
33
height: 292px
44
margin: 0 auto
@@ -8,6 +8,31 @@
88
background-color: rgba(51, 51, 51, 1)
99
position: relative
1010

11+
&.color-scheme-default
12+
.bubble-default
13+
background-color: RGBA(252, 70, 74, 1) // red
14+
.bubble-lorem
15+
background-color: RGBA(154, 202, 39, 1) // green
16+
.bubble-ipsum
17+
background-color: RGBA(60, 182, 227, 1) // blue
18+
.bubble-dolor
19+
background-color: RGBA(244, 207, 48, 1) // yellow
20+
.bubble-sit
21+
background-color: RGBA(169, 105, 202, 1) // cyan
22+
23+
&.color-scheme-alternative
24+
.bubble-default
25+
background-color: rgba(243, 85, 46, 1)
26+
.bubble-lorem
27+
background-color: rgba(136, 195, 58, 1)
28+
.bubble-ipsum
29+
background-color: rgba(67, 106, 224, 1)
30+
.bubble-dolor
31+
background-color: rgba(244, 210, 52, 1)
32+
.bubble-set
33+
background-color: rgba(112, 125, 134, 1)
34+
35+
1136
.scale
1237
height: 100%
1338
position: absolute
@@ -66,7 +91,6 @@
6691
.bubble
6792
width: 24px
6893
height: 7px
69-
background-color: red
7094
display: block
7195
float: left
7296
position: relative
@@ -75,13 +99,23 @@
7599
margin: 0 10px 0 0
76100
opacity: 0.7
77101

78-
.bubble-default
79-
background-color: rgba(243, 85, 46, 1)
80-
.bubble-lorem
81-
background-color: rgba(136, 195, 58, 1)
82-
.bubble-ipsum
83-
background-color: rgba(67, 106, 224, 1)
84-
.bubble-dolor
85-
background-color: rgba(244, 210, 52, 1)
86-
.bubble-set
87-
background-color: rgba(112, 125, 134, 1)
102+
#timesheet-alternative
103+
background-color: RGBA(247, 247, 247, 1)
104+
border-radius: 5px
105+
106+
section
107+
color: RGBA(63, 68, 72, 1)
108+
border-left: 1px dashed RGBA(63, 68, 72, 0.2)
109+
110+
&:first-child
111+
border-left: 1px dashed transparent
112+
113+
.date
114+
display: none
115+
116+
.bubble
117+
margin-right: 7px
118+
119+
.label
120+
padding-left: 0px
121+
color: RGBA(48, 48, 48, 1)

0 commit comments

Comments
 (0)