Closes #5, widget title now always shows

campai-bv · Aug 21, 2013 · 0dcab1e · 0dcab1e
1 parent 7a25631
commit 0dcab1e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 30 deletions.
diff --git a/View/Elements/Widgets/kill_rate.ctp b/View/Elements/Widgets/kill_rate.ctp
@@ -9,21 +9,21 @@
 		<tbody>
 			<tr>
 				<td style="width: 100%;">
-					<div class="progress" style="height: 50px; width: <?php echo $aData['new_progress_width_%']; ?>%;">
-						<div class="bar bar-danger" style="width: 100%;">
-							<h3><?php
-								echo $aData['created'] . ' <span class="jeditable_setting" id="title_new">';
-								$aSetting = Hash::extract( $aSettings, '{n}[name=title_new].value' );
-								
-								if( isset( $aSetting[0] ) ) {
-									echo $aSetting[0];
-								} else {
-									echo 'New';
-								}
-
-								echo '</span>';
-							?></h3>
-						</div>
+					<div class="progress" style="height: 50px;">
+						<div class="bar bar-danger" style="width: <?php echo $aData['new_progress_width_%']; ?>%;"></div>
+						<div class="bar bar-danger bar-faded" style="width: <?php echo 100 - $aData['new_progress_width_%']; ?>%;"></div>
+						<h3><?php
+							echo $aData['created'] . ' <span class="jeditable_setting" id="title_new">';
+							$aSetting = Hash::extract( $aSettings, '{n}[name=title_new].value' );
+
+							if( isset( $aSetting[0] ) ) {
+								echo $aSetting[0];
+							} else {
+								echo 'New';
+							}
+
+							echo '</span>';
+						?></h3>
 					</div>
 				</td>
 
@@ -36,21 +36,21 @@
 			</tr>
 			<tr>
 				<td>
-					<div class="progress" style="height: 50px; width: <?php echo $aData['killed_progress_width_%']; ?>%">
-						<div class="bar bar-success" style="width: 100%;">
-							<h3><?php
-								echo $aData['completed'] . ' <span class="jeditable_setting" id="title_completed">';
-								$aSetting = Hash::extract( $aSettings, '{n}[name=title_completed].value' );
-								
-								if( isset( $aSetting[0] ) ) {
-									echo $aSetting[0];
-								} else {
-									echo 'Completed';
-								}
-
-								echo '</span>';
-							?></h3>
-						</div>
+					<div class="progress" style="height: 50px;">
+						<div class="bar bar-success" style="width: <?php echo $aData['killed_progress_width_%']; ?>%;"></div>
+						<div class="bar bar-success bar-faded" style="width: <?php echo 100 - $aData['killed_progress_width_%']; ?>%;"></div>
+						<h3><?php
+							echo $aData['completed'] . ' <span class="jeditable_setting" id="title_completed">';
+							$aSetting = Hash::extract( $aSettings, '{n}[name=title_completed].value' );
+
+							if( isset( $aSetting[0] ) ) {
+								echo $aSetting[0];
+							} else {
+								echo 'Completed';
+							}
+
+							echo '</span>';
+						?></h3>
 					</div>
 				</td>
 			</tr>

diff --git a/webroot/css/customisations.css b/webroot/css/customisations.css
@@ -184,8 +184,35 @@ h2 {
 
 		.table.kill-rate td .progress {
 			margin: 0;
+			background-image: -moz-linear-gradient(top,#242527,#242527);
+			background-image:-webkit-gradient(linear,0 0,0 100%,from(#242527),to(#242527));
+			background-image:-webkit-linear-gradient(top,#242527,#242527);
+			background-image:-o-linear-gradient(top,#242527,#242527);
+			background-image:linear-gradient(to bottom,#242527,#242527);
+			background-repeat:repeat-x;
+			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#242527',endColorstr='#242527',GradientType=0)
 		}
 
+			.table.kill-rate td .progress .bar-faded.bar-success {
+				background-image: -moz-linear-gradient(top,#2e4130,#2e4130);
+				background-image:-webkit-gradient(linear,0 0,0 100%,from(#2e4130),to(#2e4130));
+				background-image:-webkit-linear-gradient(top,#2e4130,#2e4130);
+				background-image:-o-linear-gradient(top,#2e4130,#2e4130);
+				background-image:linear-gradient(to bottom,#2e4130,#2e4130);
+				background-repeat:repeat-x;
+				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e4130',endColorstr='#2e4130',GradientType=0)
+			}
+
+			.table.kill-rate td .progress .bar-faded.bar-danger {
+				background-image: -moz-linear-gradient(top,#482c2d,#482c2d);
+				background-image:-webkit-gradient(linear,0 0,0 100%,from(#482c2d),to(#482c2d));
+				background-image:-webkit-linear-gradient(top,#482c2d,#482c2d);
+				background-image:-o-linear-gradient(top,#482c2d,#482c2d);
+				background-image:linear-gradient(to bottom,#482c2d,#482c2d);
+				background-repeat:repeat-x;
+				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#482c2d',endColorstr='#482c2d',GradientType=0)
+			}
+
 		.table.kill-rate h1 {
 			font-size: 3em;
 			margin-top: 0.8em;
@@ -196,6 +223,7 @@ h2 {
 			margin-top: 0.25em;
 			text-align: left;
 			padding-left: 1em;
+			position: absolute;
 		}
 
 form {