From f238faa9374122bee7e9b556707ee0ac82963e85 Mon Sep 17 00:00:00 2001 From: drigato Date: Thu, 9 Apr 2015 14:22:50 -0400 Subject: [PATCH] SAAS-712: UI Improvements --- airtime_mvc/application/forms/Player.php | 18 +++++-------- .../views/scripts/embed/player.phtml | 2 +- .../views/scripts/form/player.phtml | 6 ++--- airtime_mvc/public/css/player-form.css | 27 ++++++++++++++----- airtime_mvc/public/css/player.css | 10 +++++-- .../public/js/airtime/player/player.js | 11 ++------ 6 files changed, 39 insertions(+), 35 deletions(-) diff --git a/airtime_mvc/application/forms/Player.php b/airtime_mvc/application/forms/Player.php index 5e1ac4009..a1dbff341 100644 --- a/airtime_mvc/application/forms/Player.php +++ b/airtime_mvc/application/forms/Player.php @@ -10,22 +10,15 @@ class Application_Form_Player extends Zend_Form_SubForm array('ViewScript', array('viewScript' => 'form/player.phtml')) )); - $displayTitle = new Zend_Form_Element_Checkbox('player_display_title'); - $displayTitle->setValue(true); - $displayTitle->setLabel(_('Display title?')); - //$displayTitle->addDecorator('Label', array('placement' => 'APPEND')); - $displayTitle->setDecorators(array( + $title = new Zend_Form_Element_Text('player_title'); + $title->setValue(_('Now Playing')); + $title->setLabel(_('Title:')); + $title->setDecorators(array( 'ViewHelper', 'Errors', 'Label' )); - $displayTitle->addDecorator('Label', array('class' => 'player-checkbox', 'placement' => 'APPEND')); - $this->addElement($displayTitle); - - $title = new Zend_Form_Element_Text('player_title'); - $title->setValue(_('Now Playing')); - $title->setLabel(_('Title:')); - $title->removeDecorator('DtDdWrapper'); + $title->addDecorator('Label', array('class' => 'player-title')); $this->addElement($title); $streamMode = new Zend_Form_Element_Radio('player_stream_mode'); @@ -76,6 +69,7 @@ class Application_Form_Player extends Zend_Form_SubForm $embedSrc->setAttrib('cols', '40') ->setAttrib('rows', '4'); $embedSrc->setLabel(_("Embeddable code:")); + $embedSrc->setDescription(_("Copy this code and paste it into your website's HTML to embed the player in your site.")); $embedSrc->setValue(''); $this->addElement($embedSrc); diff --git a/airtime_mvc/application/views/scripts/embed/player.phtml b/airtime_mvc/application/views/scripts/embed/player.phtml index a2732b3c4..0695ba202 100644 --- a/airtime_mvc/application/views/scripts/embed/player.phtml +++ b/airtime_mvc/application/views/scripts/embed/player.phtml @@ -277,7 +277,7 @@
  • - Powered by Airtime Pro + Powered by Airtime Pro diff --git a/airtime_mvc/application/views/scripts/form/player.phtml b/airtime_mvc/application/views/scripts/form/player.phtml index e9bb8f3ed..bedd3f099 100644 --- a/airtime_mvc/application/views/scripts/form/player.phtml +++ b/airtime_mvc/application/views/scripts/form/player.phtml @@ -9,12 +9,10 @@
    - Customize the player by configuring the options below. When you are done - copy the embeddable code below into your websites HTML. + Customize the player by configuring the options below. When you are done, + copy the embeddable code below and paste it into your website's HTML.
    - element->getElement('player_display_title'); ?> - element->getElement('player_title')->render(); ?> element->getElement('player_stream_mode')->render(); ?> diff --git a/airtime_mvc/public/css/player-form.css b/airtime_mvc/public/css/player-form.css index 0ab842bb6..69654c9f1 100644 --- a/airtime_mvc/public/css/player-form.css +++ b/airtime_mvc/public/css/player-form.css @@ -3,7 +3,8 @@ width: 100% !important; } .embed-player-form { - width: 98%; + width: 40%; + margin: 0 auto; } .embed-player-form dd { width: 100% !important; @@ -19,7 +20,7 @@ display: block; } #player_form { - width: 40%; + width: 100%; margin: 0 auto; } #player_form dd { @@ -29,20 +30,32 @@ border-bottom: 1px solid; padding-bottom: 10px; font-size: 14px; - font-weight: bold; - color: #5b5b5b; + /*font-weight: bold;*/ + color: #333; margin-bottom: 10px; } -.player-checkbox { +.player-title { clear: left; color: #5b5b5b; float: left; font-size: 13px; font-weight: bold; - margin: 0; - min-width: 90px; + width: 40px; padding: 4px 0; text-align: left; + margin-top: 5px; + margin-bottom: 17px; +} +#player_title { + clear: left; +} +#player_stream_url-element { + margin-left:30px; +} +#player_embed_src-element p { + margin: 0px; + font-size: 13px; + color: #333; } diff --git a/airtime_mvc/public/css/player.css b/airtime_mvc/public/css/player.css index 3c9ef0f08..cdb76e01f 100644 --- a/airtime_mvc/public/css/player.css +++ b/airtime_mvc/public/css/player.css @@ -38,9 +38,9 @@ padding-right: 30px; } .airtime_pro { - margin: 0px 20px; + margin: 6px 20px; color: #fff; - font-size: 10px; + font-size: 11px; text-decoration: none; display:inline-block; float:right; @@ -189,6 +189,7 @@ .airtime_next { float: left; margin: 0px; + margin-top: 1px; } .schedule_list { @@ -199,10 +200,15 @@ margin-left: 60px; margin-bottom: 0px; line-height: 130%; + height: 20px; } .schedule_list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} + +.airtime-pro-orange { + color: #ff5d1a; } \ No newline at end of file diff --git a/airtime_mvc/public/js/airtime/player/player.js b/airtime_mvc/public/js/airtime/player/player.js index a2bb17808..db2fbb8bb 100644 --- a/airtime_mvc/public/js/airtime/player/player.js +++ b/airtime_mvc/public/js/airtime/player/player.js @@ -9,10 +9,7 @@ function updateEmbedSrcParams() $embedCodeParams += "stream=auto"; } - var playerTitle = getPlayerTitle(); - if (playerTitle !== null) { - $embedCodeParams += "&title="+playerTitle; - } + $embedCodeParams += "&title="+getPlayerTitle(); $embedCodeParams += "\""; @@ -34,11 +31,7 @@ function getStreamMode() { } function getPlayerTitle() { - if ($("#player_display_title").prop("checked")) { - return $("input[name=player_title]").val(); - } else { - return null; - } + return $("input[name=player_title]").val(); } $(document).ready(function() {