fix problems with editing cards and columns that

were created in previous change

client/css/style.css

@@ -165,14 +165,22 @@ h2 {
 	
 .bottom-icon {
 	padding: 5px;
-	opacity: .3;
+	opacity: .4;
 }
 
 .bottom-icon:hover {
 	padding: 5px;
+	opacity: .6;
+}
+
+.faded-icon {
 	opacity: .4;
 }
 
+.faded-icon:hover {
+	opacity: .6;
+}
+
 #add-col {
 	position: absolute; right: 3px; top: 200px; display: none; opacity: .15;
 }
@@ -496,11 +504,17 @@ input:hover {
 	background-color: rgba(128, 128, 256,0.1)
 }
 
+.config {
+	position: fixed;
+	right: 18px;
+	top: 4px;
+}
 
-
+.trash {
-
+	position: fixed;
-
+	right: 18px;
-
+	bottom: 4px;
+}
 
 
 

client/script.js

@@ -273,18 +273,19 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		}
 	);
 
-	card.children('.content').editable( "/edit-card/" + id,
+	card.children('.content').editable(function(value, settings) { 
-		{
+		onCardChange( id, value );
+		return(value);
+	}, { 
+		type    : 'textarea',
+	    submit  : 'OK',
 		style   : 'inherit',
 		cssclass   : 'card-edit-form',
 		type      : 'textarea',
 		placeholder   : 'Double Click to Edit.',
 		onblur: 'submit',
-			xindicator: '<img src="/images/ajax-loader.gif">',
 		event: 'dblclick', //event: 'mouseover'
-			callback: onCardChange
+	});
-		}
-	);
 	
 	//add applicable sticker
 	if (sticker != null)
@@ -292,15 +293,9 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 }
 
 
-function onCardChange( text, result )
+function onCardChange( id, text )
 {	
-	var path = result.target;
-	//e.g. /edit-card/card46156244
-	var id = path.slice(11);
-	
 	sendAction('editCard', { id: id, value: text });
-	
-	
 }
 
 function moveCard(card, position) {
@@ -395,7 +390,6 @@ function initCards( cardArray )
 // cols
 //----------------------------------
 
-
 function drawNewColumn (columnName)
 {	
 	var cls = "col";
@@ -404,10 +398,14 @@ function drawNewColumn (columnName)
 		cls = "col first";
 	}
 	
-	$('#icon-col').before('<td class="' + cls + '" width="10%" style="display:none"><h2 id="col1" class="editable">' + columnName + '</h2></td>');
+	console.log(totalcolumns);
 
-	$('.editable').editable( "/edit-column",
+	$('#icon-col').before('<td class="' + cls + '" width="10%" style="display:none"><h2 id="col-' + (totalcolumns+1) + '" class="editable">' + columnName + '</h2></td>');
-		{
+
+	$('.editable').editable(function(value, settings) { 
+		onColumnChange( this.id, value );
+		return(value);
+	}, { 
 		style   : 'inherit',
 		cssclass   : 'card-edit-form',
 		type      : 'textarea',
@@ -417,20 +415,18 @@ function drawNewColumn (columnName)
 		height: '',
 		xindicator: '<img src="/images/ajax-loader.gif">',
 		event: 'dblclick', //event: 'mouseover'
-			callback: onColumnChange
+	});
-		}
-	);
 	
 	$('.col:last').fadeIn(1500);
 	
 	totalcolumns ++;
 }
 
-function onColumnChange( text, settings )
+function onColumnChange( id, text )
 {
 	var names = Array();
 
-	//Get the names of all the columns
+	//Get the names of all the columns right from the DOM (ignore what was sent in function)
 	$('.col').each(function() {
 		names.push(
 			$(this).text()
@@ -438,8 +434,6 @@ function onColumnChange( text, settings )
 	});
 	
 	updateColumns(names);
-	
-	
 }
 
 function displayRemoveColumn()
@@ -515,13 +509,9 @@ function initColumns( columnArray )
 			column
 		);
 	}
-
-
 }
 
 
-
-
 function changeThemeTo( theme )
 {
 	currentTheme = theme;

views/index.jade

@@ -4,6 +4,9 @@ block body
 	- if (locals.demo)
 		div.notice-bar this is a demo board. to make a private board, go to <a href="http://scrumblr.ca">scrumblr.ca</a>
 
+	//div.config
+	//	i.fa.fa-cog.fa-lg.faded-icon
+
 	h1 <a href="http://scrumblr.ca">scrumblr</a> by <a href="http://aliasaria.ca">aliasaria</a>
 
 	div.board-outline
@@ -21,8 +24,8 @@ block body
 
 
 	div.buttons
-		image#create-card.bottom-icon(width='24', height='24', src='/images/icons/iconic/raster/black/plus_alt_24x24.png')
+		i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
-		image#smallify.bottom-icon(width="23",height="23",src="/images/icons/cc/black/png/zoom_icon&24.png")
+		i#smallify.fa.fa-expand.fa-2x.bottom-icon
 
 
 	div.stickers
@@ -64,6 +67,8 @@ block body
 		span.you-text (you)
 		ul#names-ul
 
+	//div.trash
+	//	i.fa.fa-trash-o.fa-lg.faded-icon
 
 	//<div style="width: 980px; height: 450px; border: solid 2px; opacity:.1; margin-top: 100px"> this will be the backlog that only appears on drag or perhaps not at all</div>
 

views/layout.jade

@@ -18,6 +18,8 @@ html(lang="en")
 		<script src="/lib/jquery.blockUI.js"></script> 
 
 		<!-- STYLES -->
+		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
 		<link rel="stylesheet" type="text/css" href="/css/style.css" />
 		<link rel="stylesheet" title="cardsize" href="/css/bigcards.css" type="text/css" media="all" />