some easier examples

martintajur · Dec 27, 2010 · 8b0b600 · 8b0b600
1 parent ad5de16
commit 8b0b600
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 113 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -1,115 +1,3 @@
-/* 
-html5doctor.com Reset Stylesheet
-v1.6.1
-Last Updated: 2010-09-17
-Author: Richard Clark - http://richclarkdesign.com 
-Twitter: @rich_clark
-*/
-
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
-b, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
-    margin:0;
-    padding:0;
-    border:0;
-    outline:0;
-    font-size:100%;
-    vertical-align:baseline;
-    background:transparent;
-}
-
-body {
-    line-height:1;
-}
-
-article,aside,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section { 
-    display:block;
-}
-
-nav ul {
-    list-style:none;
-}
-
-blockquote, q {
-    quotes:none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content:'';
-    content:none;
-}
-
-a {
-    margin:0;
-    padding:0;
-    font-size:100%;
-    vertical-align:baseline;
-    background:transparent;
-}
-
-/* change colours to suit your needs */
-ins {
-    background-color:#ff9;
-    color:#000;
-    text-decoration:none;
-}
-
-/* change colours to suit your needs */
-mark {
-    background-color:#ff9;
-    color:#000; 
-    font-style:italic;
-    font-weight:bold;
-}
-
-del {
-    text-decoration: line-through;
-}
-
-abbr[title], dfn[title] {
-    border-bottom:1px dotted;
-    cursor:help;
-}
-
-table {
-    border-collapse:collapse;
-    border-spacing:0;
-}
-
-/* change border colour to suit your needs */
-hr {
-    display:block;
-    height:1px;
-    border:0;   
-    border-top:1px solid #cccccc;
-    margin:1em 0;
-    padding:0;
-}
-
-input, select {
-    vertical-align:middle;
-}
-
-
-
-
-
-
-
-
-/* ---------- */
-
 body {
 	padding: 50px;
 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
@@ -124,6 +12,7 @@ body {
 	-webkit-border-radius: 4px;
 	display: inline-block;
 	padding: 4px 10px;
+	margin: 20px 0;
 }
 	.launcher:hover {
 		background: #666;
@@ -141,4 +30,16 @@ article small.author {
 	color: #090;
 	display: block;
 	margin: 8px 0;
+}
+
+h1.intro {
+	font-size: 1.6em;
+}
+
+div.intro p {
+	margin-bottom: 10px;
+}
+
+div.intro .firstLine {
+	font-weight: bold;
 }
diff --git a/demo/reset.css b/demo/reset.css
@@ -0,0 +1,102 @@
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
diff --git a/js/controllers/articleController.js b/js/controllers/articleController.js
@@ -25,6 +25,8 @@
 
 			var that = this;
 
+			document.title = 'Articles';
+
 			var launchArticleOne = function(data) {
 				that.articleOne = views.start('article', data);
 			};

diff --git a/js/controllers/buttonController.js b/js/controllers/buttonController.js
@@ -14,6 +14,8 @@
 
 			var that = this;
 
+			document.title = 'Welcome to Maverick';
+
 			// Start the button view
 			this.demoView = views.start('button');
 

diff --git a/js/views/buttonView.js b/js/views/buttonView.js
@@ -16,7 +16,18 @@
 			// a good idea to take care of removing any DOM elements generated by the view).
 
 			var that = this;
-
+
+			this.intro = $('<div><h1></h1><div class="intro"></div></div>')
+				.find('.intro')
+					.html('<p class="firstLine">You have successfully launched this demo application running on Maverick MVC framework.</p><p>This demo is pretty simple and helps you understand how to build a controller and a view. This demo consists of 2 controllers and 2 views - buttonController and articleController.</p><p>When you press the "Launch articles" button below, the application state (or URI) is switched to <code>/articles</code>, and the articleController is launched. The articleController will then display some news articles and stop itself soon after, changing the URI back to <code>/</code> which is routed to the buttonController, the current controller.</p>')
+					.end()
+				.find('h1')
+					.addClass('intro')
+					.html('★ Welcome to Maverick!')
+					.end()
+				.appendTo('body');
+
+
 			this.link = $('<div>')
 				.addClass('launcher')
 				.appendTo('body')
@@ -29,6 +40,7 @@
 
 		onStop: function() {
 			this.link.remove();
+			this.intro.remove();
 		}
 
 	});