CC-2775: Better layout for Stream Settings page

- layout is done
- need to implement status update part

airtime_mvc/application/views/scripts/form/stream-setting-form.phtml

@@ -2,7 +2,7 @@
         $s_name = "s".$this->stream_number;
         ?>
         <h3 class="collapsible-header"><span class="arrow-icon"></span>Stream <?php echo $this->stream_number?></h3>
-        <div class="collapsible-content" id="<?=$s_name?>-config" style="display: none;">
+        <div class="stream-setting-content" id="<?=$s_name?>-config">
         <fieldset class="padded">
             <dl class="zend_form clearfix">
             <dt id="<?=$s_name?>Enabled-label">
@@ -25,22 +25,10 @@
             <dd id="<?=$s_name?>Bitrate-element">
                 <?php echo $this->element->getElement('bitrate')?>
             </dd>
-            
+            <dt id="outputServer-label">
-            <dt id="<?=$s_name?>Output-label">
-                <label for="<?=$s_name?>Output"><?php echo $this->element->getElement('output')->getLabel()?></label>
-            </dt>
-            <dd id="<?=$s_name?>Output-element">
-                <?php echo $this->element->getElement('output')?>
-            </dd>
-            </dl>
-            
-            
-            <fieldset class="padded top-margin left-margin" id="output_setting">
-                <dl class="zend_form">
-                <dt id="outputServer-label" class="block-display">
                 <label for="outputServer"><?php echo $this->element->getElement('host')->getLabel()?><span class="info-text-small">(Required)</span> :</label>
             </dt>
-                <dd id="outputServer-element" class="block-display">
+            <dd id="outputServer-element">
                 <?php echo $this->element->getElement('host')?>
                 <?php if($this->element->getElement('host')->hasErrors()) : ?>
                     <ul class='errors'>
@@ -50,10 +38,10 @@
                     </ul>
                 <?php endif; ?>
             </dd>
-                <dt id="outputPort-label" class="block-display">
+            <dt id="outputPort-label">
                 <label for="outputPort"><?php echo $this->element->getElement('port')->getLabel()?><span class="info-text-small">(Required)</span> :</label>
             </dt>
-                <dd id="outputPort-element" class="block-display">
+            <dd id="outputPort-element">
                 <?php echo $this->element->getElement('port')?>
                 <?php if($this->element->getElement('port')->hasErrors()) : ?>
                     <ul class='errors'>
@@ -63,6 +51,19 @@
                     </ul>
                 <?php endif; ?>
             </dd>
+            <dt id="<?=$s_name?>Output-label">
+                <label for="<?=$s_name?>Output"><?php echo $this->element->getElement('output')->getLabel()?></label>
+            </dt>
+            <dd id="<?=$s_name?>Output-element">
+                <?php echo $this->element->getElement('output')?>
+            </dd>
+            
+            <fieldset class="padded top-margin display_field toggle closed" id="output_setting">
+                <legend style="cursor: pointer;">
+                    <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+                    Additional Options
+                </legend>
+                <dl class="zend_form">
                 <dt id="outputUser-label" class="block-display">
                     <label for="outputUser"><?php echo $this->element->getElement('user')->getLabel()?> :</label>
                 </dt>
@@ -106,10 +107,11 @@
                     <?php endif; ?>
                 </dd>
                 <dt id="stationURL-label" class="block-display">
-                    <label for="stationURL"><?php echo $this->element->getElement('url')->getLabel()?><span class="info-text-small">(Your radio station website)</span> :</label>
+                    <label for="stationURL"><?php echo $this->element->getElement('url')->getLabel()?> :</label>
                 </dt>
                 <dd id="stationURL-element" class="block-display clearfix">
                     <?php echo $this->element->getElement('url')?>
+                    <span class="info-text-small">(Your radio station website)</span>
                     <?php if($this->element->getElement('url')->hasErrors()) : ?>
                         <ul class='errors'>
                             <?php foreach($this->element->getElement('url')->getMessages() as $error): ?>
@@ -132,10 +134,11 @@
                     <?php endif; ?>
                 </dd>
                 <dt id="outputMountpoint-label" class="block-display">
-                    <label for="outputMountpoint"><?php echo $this->element->getElement('mount')->getLabel()?><span class="info-text-small">(Your radio station website)</span> :</label>
+                    <label for="outputMountpoint"><?php echo $this->element->getElement('mount')->getLabel()?> :</label>
                 </dt>
                 <dd id="outputMountpoint-element" class="block-display">
                     <?php echo $this->element->getElement('mount')?>
+                    <span class="info-text-small">(Your radio station website)</span>
                     <?php if($this->element->getElement('mount')->hasErrors()) : ?>
                         <ul class='errors'>
                             <?php foreach($this->element->getElement('mount')->getMessages() as $error): ?>
@@ -144,6 +147,8 @@
                         </ul>
                     <?php endif; ?>
                 </dd>
+                </dl>
+            </fieldset>
             <dt id="outputStreamURL-label" class="block-display">
                 <label for="outputStreamURL">Stream URL: </label>
             </dt>
@@ -152,5 +157,4 @@
             </dd>
             </dl>
         </fieldset>
-        </fieldset>
         </div>

airtime_mvc/public/css/styles.css

@@ -1614,8 +1614,7 @@ dt.block-display, dd.block-display {
     margin-left: 0;
     padding-left: 0;
 }
-.preferences dt.block-display, .preferences dd.block-display,
+.preferences dt.block-display, .preferences dd.block-display {
-.stream-config dt.block-display, .stream-config dd.block-display {
     padding: 0 0 5px 0;
 }
 .preferences dd.block-display, .stream-config dd.block-display {
@@ -1625,9 +1624,6 @@ dt.block-display, dd.block-display {
 	margin-bottom:0;
 	padding-bottom:0;
 }
-.simple-formblock dd.block-display {
-    width: 100%;
-}
 .preferences input[type="radio"], .stream-config input[type="radio"] {
 	margin:0;
 }
@@ -1643,7 +1639,7 @@ dd.radio-inline-list, .preferences dd.radio-inline-list, .stream-config dd.radio
 .radio-inline-list label {
 	margin-right:12px;
 }
-.preferences.simple-formblock dd.block-display, .stream-config.simple-formblock dd.block-display {
+.preferences.simple-formblock dd.block-display {
     width: 100%;
 }
 
@@ -1653,16 +1649,10 @@ dd.radio-inline-list, .preferences dd.radio-inline-list, .stream-config dd.radio
 .preferences dd.block-display .input_select, .stream-config dd.block-display .input_select {
     width: 100%;
 }
-.preferences dd.block-display .input_text_area, .preferences dd.block-display .input_text,
+.preferences dd.block-display .input_text_area, .preferences dd.block-display .input_text {
-.stream-config dd.block-display .input_text_area, .stream-config dd.block-display .input_text,
-.stream-config dd.block-display input[type="text"], .stream-config dd.block-display input[type="password"] {
     width: 99.5%;
 }
 
-
-
-
-
 .preferences dd#SoundCloudTags-element.block-display .input_text_area {
     height: 120px;
 }
@@ -1925,7 +1915,7 @@ dd .info-text-small {
 	padding: 4px 0;
 }
 .stream-config dt.block-display  {
-	width:auto;
+	width: 130px;
 }
 .stream-config dd  {
 	margin-bottom:0px;
@@ -1935,6 +1925,14 @@ dd .info-text-small {
 	line-height:140%;
 }
 
+.stream-config dd input {
+    width:300px;
+}
+
+.stream-config dd input[id$=port] {
+    width:160px;
+}
+
 dt.block-display.info-block {
     width: auto;
 	font-size:12px;
@@ -1942,9 +1940,11 @@ dt.block-display.info-block {
 }
 .top-margin {
 	margin-top:10px;
+	float: left;
 }
 .left-margin {
 	margin-left:20px;
+	float: left;
 }
 .stream-config dd.block-display textarea {
     width: 99.5%;
@@ -1964,8 +1964,18 @@ dt.block-display.info-block {
 	margin:4px 0 4px 2px;
 }
 
+.stream-config #output_setting {
+	width: 96%;
+}
+
+.stream-config dt.block-display, .stream-config dd.block-display {
+	float: left;
+}
 .collapsible-header-disabled {
 	cursor:default;
 	opacity:0.6;
-
+}
+
+.stream-setting-content {
+	margin-top:-1px;
 }

airtime_mvc/public/js/airtime/preferences/streamsetting.js

@@ -73,12 +73,6 @@ $(document).ready(function() {
         rebuildStreamURL($(this))
     })
     
-    $('.collapsible-header').click(function() {
-        $(this).next().toggle('fast');
-        $(this).toggleClass("close");
-        return false;
-    }).next().hide();
-    
     $("select[id$=data-type]").change(function(){
         if($(this).val() == 'ogg'){
             restrictOggBitrate($(this), true)
@@ -107,6 +101,11 @@ $(document).ready(function() {
         }
     })
     
+    $('.toggle legend').live('click',function() {
+        $('.toggle').toggleClass('closed');
+        return false;
+    });
+    
     showErrorSections()