Skip to content

Commit 723e159

Browse files
siddiisiddii
committed
Merge branch 'master' of https://github.com/siddii/angular-timer 
2 parents 1c9115b + fc4d87b commit 723e159

File tree

2 files changed

+94
-70
lines changed

2 files changed

+94
-70
lines changed

‎docs/css/docs.css

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
/* Body and structure
1111
-------------------------------------------------- */
1212

13-
body {
14-
position: relative;
15-
padding-top: 40px;
16-
}
13+
/*body {*/
14+
/*position: relative;*/
15+
/*padding-top: 40px;*/
16+
/*}*/
1717

1818
/* Code in headings */
1919
h3 code {
@@ -26,27 +26,28 @@ h3 code {
2626
/* Tweak navbar brand link to be super sleek
2727
-------------------------------------------------- */
2828

29-
body > .navbar {
30-
font-size: 13px;
31-
}
29+
/*body > .navbar {*/
30+
/*font-size: 13px;*/
31+
/*}*/
3232

3333
/* Change the docs' brand */
34-
body > .navbar .brand {
35-
padding-right: 0;
36-
padding-left: 0;
37-
margin-left: 20px;
38-
float: right;
39-
font-weight: bold;
40-
color: #000;
41-
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
42-
-webkit-transition: all .2s linear;
43-
-moz-transition: all .2s linear;
44-
transition: all .2s linear;
45-
}
46-
body > .navbar .brand:hover {
47-
text-decoration: none;
48-
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
49-
}
34+
/*body > .navbar .brand {*/
35+
/*padding-right: 0;*/
36+
/*padding-left: 0;*/
37+
/*margin-left: 20px;*/
38+
/*float: right;*/
39+
/*font-weight: bold;*/
40+
/*color: #000;*/
41+
/*text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);*/
42+
/*-webkit-transition: all .2s linear;*/
43+
/*-moz-transition: all .2s linear;*/
44+
/*transition: all .2s linear;*/
45+
/*}*/
46+
47+
/*body > .navbar .brand:hover {*/
48+
/*text-decoration: none;*/
49+
/*text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);*/
50+
/*}*/
5051

5152

5253
/* Sections

‎index.html

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,22 @@
4747
<span class="icon-bar"></span>
4848
<span class="icon-bar"></span>
4949
</button>
50-
<a class="brand" href="#">Angular Timer Directive</a>
50+
<a class="brand" href="#">Angular Timer</a>
5151
<div class="nav-collapse collapse">
5252
<ul class="nav">
53-
<li class="active"><a href="#">Home</a></li>
53+
<li class="active"><a href="#introduction">Home</a></li>
54+
<li class="dropdown">
55+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
56+
<ul class="dropdown-menu">
57+
<li><a href="#basic-example">Basic Example</a></li>
58+
<li><a href="#timer-with-interval">Timer with interval</a></li>
59+
<li><a href="#formatted-timer">Formatted Timer</a></li>
60+
</ul>
61+
</li>
5462
<li class="dropdown">
5563
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage <b class="caret"></b></a>
5664
<ul class="dropdown-menu">
57-
<li><a href="#">From AngularJS</a></li>
65+
<li><a href="#angularjs-example">From AngularJS</a></li>
5866
<li><a href="#">From native JavaScript</a></li>
5967
<li><a href="#">From jQuery</a></li>
6068
</ul>
@@ -66,52 +74,66 @@
6674
</div>
6775

6876
<div class="container">
69-
<div class="row">
70-
<div class="span12">
71-
<h2>Introduction</h2>
72-
<p>AngularJS directive is a powerful way of building reusable components.
73-
This simple project will serve as a sample/reference implementation demonstrating the power & flexibilities of
74-
AngularJS directives by making it truly usable across runtime libraries (AngularJS, plain old JavaScript, jQuery etc.)</p>
75-
<p>
76-
<h3>Basic Example</h3>
77-
<div class="bs-docs-example">
78-
<p>This simple directive <code>&lt;timer id="timer1"/&gt;</code> markup code will start the timer with the default configuration option</p>
79-
<div><timer id="timer1"/></div>
80-
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
81-
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
82-
</div>
83-
</div>
84-
</p>
85-
</div>
86-
<div class="row">
87-
<div class="span12">
88-
<p>
89-
<h3>Timer with interval example</h3>
90-
<div class="bs-docs-example">
91-
<p>This directive <code>&lt;timer interval="1000" id="timer2"/&gt;</code> markup code will run the timer tick every second</p>
92-
<div><timer interval="1000" id="timer2"/></div>
93-
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
94-
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
95-
</div>
96-
</div>
97-
</p>
98-
</div>
99-
100-
<div class="row">
101-
<div class="span12">
102-
<p>
103-
<h3>Formatted timer</h3>
104-
<div class="bs-docs-example">
105-
<p>This directive <code>&lt;timer interval="1000" id="timer3"/&gt;</code> markup code will run the timer tick every second</p>
106-
<div><timer id="timer3"/>{{minutes}} minutes, {{seconds}} seconds.</div>
107-
<button type="button" class="btn" onclick="startTimer('timer3', this)">Start</button>
108-
<button type="button" class="btn" onclick="stopTimer('timer3', this)">Stop</button>
109-
</div>
110-
</div>
111-
</p>
112-
</div>
77+
<section id="introduction">
78+
<h1>Introduction</h1>
79+
<p>Directives in <a target="_new" href="http://angularjs.org">AngularJS</a> is a powerful way of building reusable <em>UI components</em>.
80+
This simple project will serve as a sample/reference implementation demonstrating its
81+
flexibilities by making it usable across runtime (AngularJS, plain simple JavaScript & jQuery)</p>
82+
83+
</section>
84+
<section id="basic-example">
85+
<h3>Basic Example</h3>
86+
<div class="bs-docs-example">
87+
<p>This simple directive <code>&lt;timer /&gt;</code> markup code will start the timer with the default option of ticking every 1 millisecond</p>
88+
<div><timer id="timer1"/></div>
89+
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
90+
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
91+
</div>
92+
</section>
93+
94+
<section id="timer-with-interval">
95+
<h3>Timer with interval example</h3>
96+
<div class="bs-docs-example">
97+
<p>This directive <code>&lt;timer interval="1000" id="timer2"/&gt;</code> markup code will run the timer tick every second</p>
98+
<div><timer interval="1000" id="timer2"/></div>
99+
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
100+
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
101+
</div>
102+
</section>
103+
104+
<section id="formatted-timer">
105+
<h3>Formatted timer</h3>
106+
<div class="bs-docs-example">
107+
<p>This directive <code>&lt;timer interval="1000" id="timer3"/&gt;</code> markup code will run the timer tick every second</p>
108+
<div><timer id="timer3"/>{{minutes}} minutes, {{seconds}} seconds.</div>
109+
<button type="button" class="btn" onclick="startTimer('timer3', this)">Start</button>
110+
<button type="button" class="btn" onclick="stopTimer('timer3', this)">Stop</button>
111+
</div>
112+
</section>
113113

114114
<hr>
115+
<h2>Examples</h2>
116+
<section id="angularjs-example">
117+
<h3>Using timer directive from Angular</h3>
118+
<ul class="nav nav-tabs" id="myTab">
119+
<li class="active"><a data-toggle="tab" href="#angularjs-example-source">index.html</a></li>
120+
<li><a data-toggle="tab" href="#angularjs-example-demo">Demo</a></li>
121+
</ul>
122+
123+
<div class="tab-content">
124+
<div class="tab-pane active" id="angularjs-example-source">
125+
<pre class="prettyprint linenums">
126+
<code>
127+
&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;
128+
</code>
129+
</pre>
130+
</div>
131+
<div class="tab-pane" id="angularjs-example-demo">
132+
<h1>Demo</h1>
133+
</div>
134+
</div>
135+
</section>
136+
115137

116138
<footer>
117139
<p>&copy; Siddique Hameed 2013</p>
@@ -122,5 +144,6 @@ <h3>Formatted timer</h3>
122144
<script src="docs/prettify.js"></script>
123145
<script src="docs/application.js"></script>
124146

147+
125148
</body>
126149
</html>

0 commit comments

Comments
 (0)