From 43c336eb6d996f3cd84decfcdb0a6fbe6218da7b Mon Sep 17 00:00:00 2001
From: denise <denise@denise-DX4860sourcefabric.org>
Date: Mon, 17 Sep 2012 15:41:22 -0400
Subject: [PATCH] CC-4155: Playlist Builder: Style static/dynamic expansion
 blocks in playlist contents

-implemented css changes
-formatted playlist_builder.css
---
 .../views/scripts/playlist/update.phtml       |  12 +-
 airtime_mvc/public/css/playlist_builder.css   | 598 ++++++++++--------
 airtime_mvc/public/js/airtime/library/spl.js  |  21 +-
 3 files changed, 347 insertions(+), 284 deletions(-)

diff --git a/airtime_mvc/application/views/scripts/playlist/update.phtml b/airtime_mvc/application/views/scripts/playlist/update.phtml
index 05f4e9e91..bbb11093d 100644
--- a/airtime_mvc/application/views/scripts/playlist/update.phtml
+++ b/airtime_mvc/application/views/scripts/playlist/update.phtml
@@ -35,9 +35,15 @@ if ($item['type'] == 2) {
                 <span class="spl_cue ui-state-default"></span>
                 <?php } else if ($item['type'] == 2) {
                         if ($staticBlock) {?>
-                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">Static Block Expand</span>
+                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">
+                    <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+                    Expand Static Block
+                </span>
                 <?php   } else { ?>
-                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">Dynamic Block</span>
+                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">
+                    <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+                    Expand Dynamic Block
+                </span>
                 <?php   }
                       } ?>
                 <span class="spl_title"><?php echo $item['track_title'] ?></span>
@@ -79,7 +85,7 @@ if ($item['type'] == 2) {
         </div>
         <?php endif; ?>
         <?php if ($item['type'] == 2) {?>
-        <div id="block_<?php echo $item["id"]?>_info"></div>
+        <ul style='display:none' id="block_<?php echo $item["id"]?>_info" class="smart-block-info"></ul>
         <?php } ?>
     </li>
     <?php $i = $i+1; ?>
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css
index 2f99399aa..01828b72f 100644
--- a/airtime_mvc/public/css/playlist_builder.css
+++ b/airtime_mvc/public/css/playlist_builder.css
@@ -1,71 +1,63 @@
 #side_playlist {
-	width: 40%;
-	font-size: 16px;
-	overflow: auto;
+    width: 40%;
+    font-size: 16px;
+    overflow: auto;
 }
 
-#side_playlist, 
-#side_playlist ul, 
-#side_playlist li {
-	float: left;
+#side_playlist,#side_playlist ul,#side_playlist li {
+    float: left;
 }
 
-#spl_sortable, 
-#spl_sortable > li, 
-#side_playlist > div,
-#spl_editor,
-.spl_artist,
-.spl_cue_in,
-.spl_fade_in,
-.spl_cue_out,
-.spl_fade_out {
-	clear: left;
+#spl_sortable,#spl_sortable>li,#side_playlist>div,#spl_editor,.spl_artist,.spl_cue_in,.spl_fade_in,.spl_cue_out,.spl_fade_out
+    {
+    clear: left;
 }
-#spl_sortable > li {
-	width: 100%;
-	margin-bottom:-1px;
-	position:relative;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box; 
+
+#spl_sortable>li {
+    width: 100%;
+    margin-bottom: -1px;
+    position: relative;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
+
 /*#side_playlist button {
     float: left;
     font-size: 12px;
     height: 28px;
     margin: 0 7px 20px 0;
-}*/	
-
-#side_playlist input, 
-#side_playlist textarea {
-	width: 200px;
+}*/
+#side_playlist input,#side_playlist textarea {
+    width: 200px;
 }
 
 #side_playlist textarea {
-	height: 100px;
+    height: 100px;
 }
 
 #spl_sortable {
-	list-style: none;
-	padding:0;
-	padding-bottom:50px;
-	width:100%;
-	min-height: 320px;
-	margin-top:0;
-	margin-bottom:0;
+    list-style: none;
+    padding: 0;
+    padding-bottom: 50px;
+    width: 100%;
+    min-height: 320px;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-#side_playlist li div.list-item-container, #side_playlist li div.list-item-container.ui-state-active {
-	height:56px;
-	border: none;
+#side_playlist li div.list-item-container,#side_playlist li div.list-item-container.ui-state-active
+    {
+    height: 56px;
+    border: none;
 }
 
 #spl_name {
-
+    
 }
 
 .ui-icon-closethick {
-	margin-top: 7px;
+    margin-top: 7px;
 }
 
 .sp-closethick-center {
@@ -73,266 +65,297 @@
 }
 
 .spl_title {
-	font-size:14px;
+    font-size: 14px;
 }
 
 .spl_playlength {
-	float:right;
-	font-size:14px;
-	padding:0 5px 0 0;
-	width:100px;
-	text-align:right;
+    float: right;
+    font-size: 14px;
+    padding: 0 5px 0 0;
+    width: 100px;
+    text-align: right;
 }
 
-.spl_block_expand, .spl_block_expand.close {
-	float:right;
+.spl_block_expand,.spl_block_expand.close {
+    float: right;
     font-size: 9px;
     height: 15px;
     /*right: 35px;*/
     width: 120px;
-    margin-top:2px;
-    cursor:pointer;
-    color:#fff;
+    margin-top: 2px;
+    cursor: pointer;
+    color: #fff;
     font-weight: normal;
-    text-shadow:none;
-    opacity:1;
-	}
-	.spl_block_expand:hover, .spl_block_expand.close:hover {
-	    color:#FF611F;
-	    text-shadow:none;
-	    opacity:1;
-		}
-	.spl_block_expand .ui-icon {
-		float:left;
-	}	
+    text-shadow: none;
+    opacity: 1;
+}
+
+.spl_block_expand:hover,.spl_block_expand.close:hover {
+    color: #FF611F;
+    text-shadow: none;
+    opacity: 1;
+}
+
+.spl_block_expand .ui-icon {
+    float: left;
+}
 
 .spl_artist {
-	font-size:12px;
-	color:#d5d5d5;
+    font-size: 12px;
+    color: #d5d5d5;
 }
 
-.spl_offset	{
-	float: right;
-	text-align: right;
-	padding: 0 5px 0 0;
-	color: #D5D5D5;
+.spl_offset {
+    float: right;
+    text-align: right;
+    padding: 0 5px 0 0;
+    color: #D5D5D5;
 }
-.ui-state-active .spl_artist, .ui-state-active .spl_offset {
+
+.ui-state-active .spl_artist,.ui-state-active .spl_offset {
     color: #606060 !important;
 }
 
-#spl_editor > div > span {
-/*	display: inline-block;
+#spl_editor>div>span { /*	display: inline-block;
 	width: 150px;*/
+    
 }
 
-.ui-icon-closethick,
-.spl_fade_control,
-.spl_text_input {
-	cursor: pointer;
+.ui-icon-closethick,.spl_fade_control,.spl_text_input {
+    cursor: pointer;
 }
 
 .spl_text_input input {
-	cursor: text;
+    cursor: text;
 }
 
 #spl_error {
-	font-size: 14px;
-	padding: 0.3em;
-	/*width: 440px;*/
-	text-align: center;
+    font-size: 14px;
+    padding: 0.3em;
+    /*width: 440px;*/
+    text-align: center;
 }
 
 #side_playlist h3 {
-	font-size:20px;
-	margin:9px 0 3px 0;
-	padding:0;
-	color:#444444;
-	font-weight:normal;
-	clear:both;
-	float:left;
-}
-#side_playlist h4 {
-	font-size:15px;
-	margin:8px 0 10px 0;
-	padding:0;
-	color:#4f4f4f;
-	font-weight:normal;
-	clear:both;
-	float:left;
-}
-#side_playlist h3 + h4 {
-	margin:0 0 11px 0;
-}
-#spl_sortable div.big_play {
-	display:block;
-	width:20px;
-	height:50px;
-	margin:2px 0 0 2px;
-	text-align:center;
-	border:1px solid #5b5b5b;
-	float:left;
-	background-color: #707070;
-    background: -moz-linear-gradient(top, #707070 0, #666666 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(100%, #666666));
-}
-#spl_sortable div.big_play_disabled {
-	display:block;
-	width:20px;
-	height:50px;
-	margin:2px 0 0 2px;
-	text-align:center;
-	border:1px solid #5b5b5b;
-	float:left;
-	background-color: #707070;
-    background: -moz-linear-gradient(top, #707070 0, #666666 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(100%, #666666));
-}
-#spl_sortable div.big_play:hover {
-	border:1px solid #282828;
-	background-color: #3b3b3b;
-    background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929));
-    cursor: pointer;
-}
-#spl_sortable div.big_play .ui-icon {
-	margin: 17px 0 0 1px;
-}
-#spl_sortable div.big_play_disabled .ui-icon {
-	margin: 17px 0 0 1px;
+    font-size: 20px;
+    margin: 9px 0 3px 0;
+    padding: 0;
+    color: #444444;
+    font-weight: normal;
+    clear: both;
+    float: left;
 }
 
-#spl_sortable div.big_play:hover .ui-icon-play, #spl_sortable div.big_play:hover .ui-icon-pause {
-	background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png);
+#side_playlist h4 {
+    font-size: 15px;
+    margin: 8px 0 10px 0;
+    padding: 0;
+    color: #4f4f4f;
+    font-weight: normal;
+    clear: both;
+    float: left;
 }
+
+#side_playlist h3+h4 {
+    margin: 0 0 11px 0;
+}
+
+#spl_sortable div.big_play {
+    display: block;
+    width: 20px;
+    height: 50px;
+    margin: 2px 0 0 2px;
+    text-align: center;
+    border: 1px solid #5b5b5b;
+    float: left;
+    background-color: #707070;
+    background: -moz-linear-gradient(top, #707070 0, #666666 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070),
+        color-stop(100%, #666666) );
+}
+
+#spl_sortable div.big_play_disabled {
+    display: block;
+    width: 20px;
+    height: 50px;
+    margin: 2px 0 0 2px;
+    text-align: center;
+    border: 1px solid #5b5b5b;
+    float: left;
+    background-color: #707070;
+    background: -moz-linear-gradient(top, #707070 0, #666666 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070),
+        color-stop(100%, #666666) );
+}
+
+#spl_sortable div.big_play:hover {
+    border: 1px solid #282828;
+    background-color: #3b3b3b;
+    background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b),
+        color-stop(100%, #292929) );
+    cursor: pointer;
+}
+
+#spl_sortable div.big_play .ui-icon {
+    margin: 17px 0 0 1px;
+}
+
+#spl_sortable div.big_play_disabled .ui-icon {
+    margin: 17px 0 0 1px;
+}
+
+#spl_sortable div.big_play:hover .ui-icon-play,#spl_sortable div.big_play:hover .ui-icon-pause
+    {
+    background-image: url(redmond/images/ui-icons_ff5d1a_256x240.png);
+}
+
 #spl_sortable .ui-icon-closethick {
-	position:absolute;
-	top:3px;
-	right:6px;
-	z-index:3;
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    z-index: 3;
 }
+
 #spl_sortable .ui-icon-closethick:hover {
-	background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png)
+    background-image: url(redmond/images/ui-icons_ff5d1a_256x240.png)
 }
+
 #spl_sortable .spl_fade_control {
-	position:absolute;
-	right:35px;
-	z-index: 6;
-	height:15px;
-	width:33px;	
-	font-size:9px;
-	background-color:transparent;
+    position: absolute;
+    right: 35px;
+    z-index: 6;
+    height: 15px;
+    width: 33px;
+    font-size: 9px;
+    background-color: transparent;
 }
 
 #spl_sortable li .container {
-
+    
 }
+
 #spl_sortable .text-row {
     height: 20px;
     line-height: 19px;
     overflow: hidden;
     padding: 0 30px 0 10px;
     text-indent: 2px;
-	margin:-1px 0 0 0;
-	float:none;
+    margin: -1px 0 0 0;
+    float: none;
 }
+
 #spl_sortable .top {
-    padding-top:9px;
+    padding-top: 9px;
 }
+
 #spl_sortable li .spl_fade_control.ui-state-default {
-	background: transparent url(images/crossfade_playlist.png) no-repeat 0 0;
-	border:none;
+    background: transparent url(images/crossfade_playlist.png) no-repeat 0 0;
+    border: none;
 }
+
 #spl_sortable li .spl_fade_control.ui-state-active {
-	background: transparent url(images/crossfade_playlist.png) no-repeat 0 -30px;
-	border:none;
+    background: transparent url(images/crossfade_playlist.png) no-repeat 0
+        -30px;
+    border: none;
 }
-#spl_sortable li .crossfade, #spl_sortable li .cue-edit {
-	background:#debc9e url(images/crossfade_bg.png) repeat-x 0 0 !important;
-	border:1px solid #5d5d5d;
-	border-width: 1px 0 0 0;
-	min-height:35px;
+
+#spl_sortable li .crossfade,#spl_sortable li .cue-edit {
+    background: #debc9e url(images/crossfade_bg.png) repeat-x 0 0 !important;
+    border: 1px solid #5d5d5d;
+    border-width: 1px 0 0 0;
+    min-height: 35px;
 }
+
 #spl_sortable li .cue-edit {
-	background:#b6d1d5 url(images/cue-editor_bg.png) repeat-x 0 0 !important;
+    background: #b6d1d5 url(images/cue-editor_bg.png) repeat-x 0 0
+        !important;
 }
+
 #spl_sortable dl.inline-list {
-	margin:10px 0 0 37px;
+    margin: 10px 0 0 37px;
 }
 
-
-#spl_sortable li .spl_fade_start, #spl_sortable li .spl_fade_end {
+#spl_sortable li .spl_fade_start,#spl_sortable li .spl_fade_end {
     background-color: transparent;
-	float:right;
+    float: right;
     font-size: 9px;
     height: 15px;
     right: 35px;
     width: 33px;
-	margin-top:2px;
+    margin-top: 2px;
 }
+
 #spl_sortable li .spl_fade_start.ui-state-default {
-	background: transparent url(images/fade_in.png) no-repeat 0 0;
-	border:none;
+    background: transparent url(images/fade_in.png) no-repeat 0 0;
+    border: none;
 }
+
 #spl_sortable li .spl_fade_start.ui-state-active {
-	background: transparent url(images/fade_in.png) no-repeat 0 -30px;
-	border:none;
+    background: transparent url(images/fade_in.png) no-repeat 0 -30px;
+    border: none;
 }
 
 #spl_sortable li .spl_fade_end.ui-state-default {
-	background: transparent url(images/fade_out.png) no-repeat 0 0;
-	border:none;
+    background: transparent url(images/fade_out.png) no-repeat 0 0;
+    border: none;
 }
+
 #spl_sortable li .spl_fade_end.ui-state-active {
-	background: transparent url(images/fade_out.png) no-repeat 0 -30px;
-	border:none;
+    background: transparent url(images/fade_out.png) no-repeat 0 -30px;
+    border: none;
 }
-.crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list {
-	padding-bottom:5px;
-	clear:left;
 
+.crossfade dl.inline-list,.cue-edit dl.inline-list,.crossfade-main dl.inline-list
+    {
+    padding-bottom: 5px;
+    clear: left;
 }
-.crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt {
-	min-width: 90px;
-	
 
+.crossfade dl.inline-list dt,.cue-edit dl.inline-list dt,.crossfade-main dl.inline-list dt
+    {
+    min-width: 90px;
 }
-.crossfade dl.inline-list dd, .cue-edit dl.inline-list dd, .crossfade-main dl.inline-list dd {
+
+.crossfade dl.inline-list dd,.cue-edit dl.inline-list dd,.crossfade-main dl.inline-list dd
+    {
     float: left;
     font-size: 12px;
     margin: 0;
+}
 
-}
 .edit-error {
-	color:#b80000;
-	margin:0;
-	padding-bottom:0;
-	font-size:12px;
-	display:none;
+    color: #b80000;
+    margin: 0;
+    padding-bottom: 0;
+    font-size: 12px;
+    display: none;
 }
-	
+
 /*.edit-error:last-child {
 	padding-bottom:10px;
 }*/
 .spl_text_input {
-	color:#fff;
+    color: #fff;
 }
+
 .crossfade-main {
-	background:#debc9e;
-	border:1px solid #5b5b5b;
-	padding:10px 10px 0 10px;
-	margin:0 1px 16px 0;
-	position:relative;
+    background: #debc9e;
+    border: 1px solid #5b5b5b;
+    padding: 10px 10px 0 10px;
+    margin: 0 1px 16px 0;
+    position: relative;
 }
 
-.crossfade-main .edit-error  {
-	padding-bottom:4px;
-	margin:0;
+.crossfade-main .edit-error {
+    padding-bottom: 4px;
+    margin: 0;
 }
 
-.crossfade-main .edit-error:last-child  {
-	padding-bottom:2px;
+.crossfade-main .edit-error:last-child {
+    padding-bottom: 2px;
 }
+
 .crossfade-main .ui-icon-closethick {
     position: absolute;
     right: 6px;
@@ -342,65 +365,73 @@
 
 #spl_sortable li .spl_cue {
     background-color: transparent;
-	float:right;
+    float: right;
     font-size: 9px;
     height: 15px;
     right: 35px;
     width: 33px;
-	margin-top:2px;
-	cursor:pointer;
+    margin-top: 2px;
+    cursor: pointer;
 }
+
 #spl_sortable li .spl_cue.ui-state-default {
-	background: transparent url(images/cue_playlist.png) no-repeat 0 0;
-	border:none;
+    background: transparent url(images/cue_playlist.png) no-repeat 0 0;
+    border: none;
 }
+
 #spl_sortable li .spl_cue.ui-state-default:hover {
-	background: transparent url(images/cue_playlist.png) no-repeat 0 -15px;
-	border:none;
+    background: transparent url(images/cue_playlist.png) no-repeat 0 -15px;
+    border: none;
 }
-#spl_sortable li .spl_cue.ui-state-active, #spl_sortable li .spl_cue.ui-state-active:hover {
-	background: transparent url(images/cue_playlist.png) no-repeat 0 -30px;
-	border:none;
+
+#spl_sortable li .spl_cue.ui-state-active,#spl_sortable li .spl_cue.ui-state-active:hover
+    {
+    background: transparent url(images/cue_playlist.png) no-repeat 0 -30px;
+    border: none;
 }
 
 /*--/////////////// Changes 16.05.2011 ////////////--*/
-
 .playlist_title {
-	margin: 16px 0 10px 0;
-	height:26px;
-	clear:both;
+    margin: 16px 0 10px 0;
+    height: 26px;
+    clear: both;
 }
-#side_playlist .playlist_title h3, #side_playlist .playlist_title h4 {
+
+#side_playlist .playlist_title h3,#side_playlist .playlist_title h4 {
     margin: 0;
     padding: 0;
 }
+
 #side_playlist .playlist_title h3 {
-	float:left;
-	width:84%;
+    float: left;
+    width: 84%;
 }
+
 #side_playlist .playlist_title h4 {
-	float:right;
-	clear:none;
-	font-size: 16px;
-	padding-top:4px;
+    float: right;
+    clear: none;
+    font-size: 16px;
+    padding-top: 4px;
 }
 
 #side_playlist .playlist_title h3 a {
     padding: 0 22px 0 2px;
-	background:url(images/icon_edit_l.png) no-repeat right center;
-	text-decoration:none;
+    background: url(images/icon_edit_l.png) no-repeat right center;
+    text-decoration: none;
+}
 
-}
 #side_playlist .playlist_title h3 a:hover {
-	background-color:#D8D8D8;
+    background-color: #D8D8D8;
 }
+
 .element_hidden {
-	display: none;
+    display: none;
 }
+
 #side_playlist .playlist_title h3 input[type="text"] {
     background-color: #dddddd;
     border: 1px solid #8F8F8F;
-    font-family: Arial,Helvetica,sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     height: 23px;
     margin: 0;
@@ -409,31 +440,34 @@
     -moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
-	width:95%;
-	margin-bottom:10px;
+    width: 95%;
+    margin-bottom: 10px;
 }
 
 #side_playlist .zend_form {
     margin: 0;
     padding: 0;
 }
-#side_playlist .zend_form dt, #side_playlist .zend_form dd {
+
+#side_playlist .zend_form dt,#side_playlist .zend_form dd {
     display: block;
     float: none;
     margin: 4px 0 0;
     padding: 0;
-	width:100%;
+    width: 100%;
 }
+
 #side_playlist .zend_form dd.buttons {
     margin-top: 8px;
-	text-align:right;
+    text-align: right;
 }
+
 #side_playlist .zend_form dd.buttons .ui-button {
     margin: 0 0 0 10px;
 }
 
 #side_playlist .zend_form dt {
-	color:#5B5B5B;
+    color: #5B5B5B;
     font-weight: bold;
     margin: 9px 0 0;
     padding: 0 2px;
@@ -446,14 +480,14 @@
 #side_playlist .zend_form dd textarea {
     background-color: #dddddd;
     border: 1px solid #5B5B5B;
-    font-family: Arial,Helvetica,sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     margin: 0;
     padding: 2px 0 0 0;
     -moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
-	width:99.7%;
+    width: 99.7%;
 }
 
 #side_playlist fieldset {
@@ -461,28 +495,34 @@
     margin: 0 0 8px 0;
     padding: 8px;
 }
+
 #side_playlist fieldset.closed .zend_form {
-	display:none;
+    display: none;
 }
+
 #side_playlist fieldset.closed {
     border-width: 1px 0 0;
     margin-bottom: -6px;
-	margin-left:1px;
+    margin-left: 1px;
 }
-fieldset > legend {
+
+fieldset>legend {
     color: #4f4f4f;
     font-size: 12px;
     line-height: 140%;
 }
+
 .ui-widget-content fieldset legend .ui-icon {
     float: left;
-	background-image:url(redmond/images/ui-icons_454545_256x240.png);
+    background-image: url(redmond/images/ui-icons_454545_256x240.png);
 }
-#side_playlist .zend_form input, #side_playlist .zend_form textarea {
+
+#side_playlist .zend_form input,#side_playlist .zend_form textarea {
     width: auto;
 }
+
 #fieldset-metadate_change {
-	clear:both;
+    clear: both;
 }
 
 div.helper li {
@@ -494,34 +534,42 @@ li.spl_empty {
 }
 
 /*---////// SMART BLOCK /////---*/
-
 .smart-block-info {
-	padding: 5px 35px 10px 36px;
-	width: 100%;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box; 
-	}
-	.smart-block-info > li {
-		display: block;
-		float: none;
-		margin-bottom: 4px;
-		width: 100%;
-		font-size: 13px;
-		}
-		.smart-block-info > li span.block-item-time {
-			text-align: right;
-			float: right;
-			color: #D5D5D5;
-			font-size: 12px;
-			}
-		.smart-block-info > li span.block-item-title {
-			font-weight: bold;
-			display: inline-block;
-			padding-right: 6px;
-			}
-		.smart-block-info > li span.block-item-author {
-			font-weight: normal;
-			display: inline-block;
-			}
+    padding: 5px 35px 10px 36px;
+    width: 100%;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
 
+.smart-block-info>li {
+    display: block;
+    float: none;
+    margin-bottom: 4px;
+    width: 100%;
+    font-size: 13px;
+}
+
+.smart-block-info>li span.block-item-time {
+    text-align: right;
+    float: right;
+    color: #D5D5D5;
+    font-size: 12px;
+}
+
+.smart-block-info>li span.block-item-title {
+    font-weight: bold;
+    display: inline-block;
+    padding-right: 6px;
+}
+
+.smart-block-info>li span.block-item-author {
+    font-weight: normal;
+    display: inline-block;
+}
+
+.smart-block-info>li span.block-item-criteria {
+    font-weight: normal;
+    display: inline-block;
+    padding-right: 6px;
+}
\ No newline at end of file
diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js
index dc2f80c08..e0b58f205 100644
--- a/airtime_mvc/public/js/airtime/library/spl.js
+++ b/airtime_mvc/public/js/airtime/library/spl.js
@@ -429,24 +429,33 @@ var AIRTIME = (function(AIRTIME){
                             if (isStatic) {
                                 $.each(data, function(index, ele){
                                     if (ele.track_title !== undefined) {
-                                        $html += "<div>"+ele.track_title+"   "+ele.creator+"   "+ele.length+"</div>";
+                                        $html += "<li>" +
+                                            "<span class='block-item-title'>"+ele.track_title+"</span>" +
+                                            "<span class='block-item-author'>"+ele.creator+"</span>" +
+                                            "<span class='block-item-time'>"+ele.length+"</span>" + 
+                                            "</li>";
                                     }
                                 })
                             } else {
                                 for (var key in data.crit){
                                     $.each(data.crit[key], function(index, ele){
-                                        var extra = (ele['extra']==null)?"":ele['extra'];
-                                        $html += "<div>"+ele['display_name']+"   "+ele['modifier']+"   "+ele['value']+"   "+extra+"</div>";
+                                        var extra = (ele['extra']==null)?"":"- "+ele['extra'];
+                                        $html += "<li>" +
+                                            "<span class='block-item-title'>"+ele['display_name']+"</span>" +
+                                            "<span class='block-item-criteria'>"+ele['modifier']+"</span>" +
+                                            "<span class='block-item-criteria'>"+ele['value']+"</span>" +
+                                            "<span class='block-item-criteria'>"+extra+"</span>" + 
+                                            "</li>";
                                     });
                                 }
-                                $html += "<div>"+data.limit.value+"  "+data.limit.modifier;
+                                $html += "<li><br /><span class='block-item-title'>Limit to: "+data.limit.value+"  "+data.limit.modifier+"</span></li>";
                             }
-                            $pl.find("#block_"+id+"_info").html($html);
+                            $pl.find("#block_"+id+"_info").html($html).show();
                             mod.enableUI();
                         });
                         $(this).removeClass('close');
 		            } else {
-		                $pl.find("#block_"+id+"_info").html("");
+		                $pl.find("#block_"+id+"_info").html("").hide();
 		                $(this).addClass('close');
 		            }
                 }});