From 43c336eb6d996f3cd84decfcdb0a6fbe6218da7b Mon Sep 17 00:00:00 2001 From: denise 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) { - " id="expand_block_">Static Block Expand + " id="expand_block_"> + + Expand Static Block + - " id="expand_block_">Dynamic Block + " id="expand_block_"> + + Expand Dynamic Block + @@ -79,7 +85,7 @@ if ($item['type'] == 2) { -
_info">
+ 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 += "
"+ele.track_title+" "+ele.creator+" "+ele.length+"
"; + $html += "
  • " + + ""+ele.track_title+"" + + ""+ele.creator+"" + + ""+ele.length+"" + + "
    • "; } }) } else { for (var key in data.crit){ $.each(data.crit[key], function(index, ele){ - var extra = (ele['extra']==null)?"":ele['extra']; - $html += "
    "+ele['display_name']+" "+ele['modifier']+" "+ele['value']+" "+extra+"
    "; + var extra = (ele['extra']==null)?"":"- "+ele['extra']; + $html += "
  • " + + ""+ele['display_name']+"" + + ""+ele['modifier']+"" + + ""+ele['value']+"" + + ""+extra+"" + + "
    • "; }); } - $html += "
    "+data.limit.value+" "+data.limit.modifier; + $html += "

  • Limit to: "+data.limit.value+" "+data.limit.modifier+"
    • "; } - $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'); } }});