added trelloscrum about-page inside trello about

Q42 · Oct 13, 2011 · e1345f3 · e1345f3
1 parent 3b97019
commit e1345f3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/help.html b/help.html
@@ -1,32 +1,28 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-   "http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Trello Scrum Help</title>
-</head>
-<body>
-	<h1>Trello Scrum Chrome Extension Help</h1>
-	<p>
-		Trello Scrum is a Chrome Extension that adds a little bit of functionality
-		to Trello.com to make it perfect to use in SCRUM based projects. Trello Scrum
-		allows you to add story points to cards and accumulates the story points per list.
-	</p>
-	<h2>Adding Story points to a card</h2>
-	<p>
-		Story points are written in between parentheses in the title of a card.
-		<code>(5) upon an error I want to see an awesome 404 page.</code>
-		Upon saving the card, Trello Scrum picks up the assigned points and shows them
-		as a badge in the lower left corner of the card.
-	</p>
-	<p>
-		When you flip a card to add more information to that card, you are also presented with a story point picker upon editing the title. This allows for easier entry. The points shown are shown in the commonly used semi-fibonacci sequence: 0, 1, 2, 3, 5, 8, 13, 20.
-	</p>
-	<p>Allowed entries for story points are all numbers, decimals (like .5 or 4.2) and the question mark (?) for unknowns.
-	</p>		
-
-	<h2>Credits</h2>
+<html>
+	<head>
+		<title>Trello Scrum Help</title>
+	</head>
+	<body>
+		<h2>Trello Scrum Chrome Extension Help</h2>
+		<p>
+			Trello Scrum is a Chrome Extension that adds a little bit of functionality
+			to Trello.com to make it perfect to use in SCRUM based projects. Trello Scrum
+			allows you to add story points to cards and accumulates the story points per list.
+		</p>
+		<h3>Adding Story points to a card</h3>
+		<p>
+			Story points are written in between parentheses in the title of a card.
+			<code>(5) upon an error I want to see an awesome 404 page.</code>
+			Upon saving the card, Trello Scrum picks up the assigned points and shows them
+			as a badge in the lower left corner of the card.
+		</p>
+		<p>
+			When you flip a card to add more information to that card, you are also presented with a story point picker upon editing the title. This allows for easier entry. The points shown are shown in the commonly used semi-fibonacci sequence: 0, 1, 2, 3, 5, 8, 13, 20.
+		</p>
+		<p>Allowed entries for story points are all numbers, decimals (like .5 or 4.2) and the question mark (?) for unknowns.
+		</p>
 
-</body>
+		<h3>Credits</h3>
+
+	</body>
 </html>
diff --git a/trelloscrum.css b/trelloscrum.css
@@ -5,12 +5,15 @@
 	float: right;
 	margin: 3px 5px 0 0;
 }
-.list-title h2 {
+.list .list-title h2 {
     float: none !important;
     display: inline !important;
     margin-right: 0 !important;
     vertical-align: -4px;
 }
+.window-main-col p, .window-main-col h2 {
+	display: block !important;
+}
 .badge-points {
     background-color: #006580 !important;
     padding: 0px 5px !important;

diff --git a/trelloscrum.js b/trelloscrum.js
@@ -44,11 +44,30 @@ $(function(){
 	//for storypoint picker
 	$(".card-detail-title .edit-controls").live('DOMNodeInserted',showPointPicker);
 
+	//about-screen
+	$('.manual').live('DOMNodeInserted',function(){
+		var $manual = $(this);
+		var $sidebar = $manual.children('.window-sidebar');
+		if($sidebar.find('.ts-about').length)return;
+		var $content = $manual.children('.window-main-col');
+		var $part = $('<div class="sidebar-nav mini window-module ts-about">').appendTo($sidebar);
+		var $h3 = $('<h3>Trello Scrum</h3>').appendTo($part);
+		var $ul = $('<ul>').appendTo($part);
+		var $abt = $('<a href="#">').text('Help').appendTo($('<li>').appendTo($ul));
+		$abt.click(function(){
+			$.get(chrome.extension.getURL("help.html"), function(d){
+				$sidebar.find('.active').removeClass('active');
+				$abt.addClass('active');
+				$manual.children('.window-header').children('.window-title').text($(d.getElementsByTagName('title')).text());
+				$manual.children('.window-main-col').empty().append($(d.getElementsByTagName('body')).children())
+			})
+		})
+	});
+
 	//want: trello events
 	(function periodical(){
 		$('.list').each(list);
 		$('.list-card').each(listCard);
-		//showPointPicker();
 		setTimeout(periodical,1000)
 	})()
 });