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');
}
}});