From f1c311acb662b04b89fe8f69ecbcc9027e94936a Mon Sep 17 00:00:00 2001
From: james <james@james-P35-DS3L.(none)>
Date: Wed, 7 Sep 2011 09:48:02 -0400
Subject: [PATCH] CC-2775: Better layout for Stream Settings page

- layout is done
- need to implement status update part
---
 .../scripts/form/stream-setting-form.phtml    | 82 ++++++++++---------
 airtime_mvc/public/css/styles.css             | 38 +++++----
 .../js/airtime/preferences/streamsetting.js   | 11 ++-
 3 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/airtime_mvc/application/views/scripts/form/stream-setting-form.phtml b/airtime_mvc/application/views/scripts/form/stream-setting-form.phtml
index e35d94408..fc4cf9fbd 100644
--- a/airtime_mvc/application/views/scripts/form/stream-setting-form.phtml
+++ b/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,44 +25,45 @@
             <dd id="<?=$s_name?>Bitrate-element">
                 <?php echo $this->element->getElement('bitrate')?>
             </dd>
-            
+            <dt id="outputServer-label">
+                <label for="outputServer"><?php echo $this->element->getElement('host')->getLabel()?><span class="info-text-small">(Required)</span> :</label>
+            </dt>
+            <dd id="outputServer-element">
+                <?php echo $this->element->getElement('host')?>
+                <?php if($this->element->getElement('host')->hasErrors()) : ?>
+                    <ul class='errors'>
+                        <?php foreach($this->element->getElement('host')->getMessages() as $error): ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <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">
+                <?php echo $this->element->getElement('port')?>
+                <?php if($this->element->getElement('port')->hasErrors()) : ?>
+                    <ul class='errors'>
+                        <?php foreach($this->element->getElement('port')->getMessages() as $error): ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </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>
-            </dl>
             
-            
-            <fieldset class="padded top-margin left-margin" id="output_setting">
+            <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="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">
-                    <?php echo $this->element->getElement('host')?>
-                    <?php if($this->element->getElement('host')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('host')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="outputPort-label" class="block-display">
-                    <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">
-                    <?php echo $this->element->getElement('port')?>
-                    <?php if($this->element->getElement('port')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('port')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
                 <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,13 +147,14 @@
                         </ul>
                     <?php endif; ?>
                 </dd>
-                <dt id="outputStreamURL-label" class="block-display">
-                    <label for="outputStreamURL">Stream URL: </label>
-                </dt>
-                <dd id="outputStreamURL-element" class="block-display">
-                    <p id="stream_url"></p>
-                </dd>
                 </dl>
             </fieldset>
+            <dt id="outputStreamURL-label" class="block-display">
+                <label for="outputStreamURL">Stream URL: </label>
+            </dt>
+            <dd id="outputStreamURL-element" class="block-display">
+                <p id="stream_url"></p>
+            </dd>
+            </dl>
         </fieldset>
         </div>
\ No newline at end of file
diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index ec707bfb9..57077eb47 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/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,
-.stream-config dt.block-display, .stream-config dd.block-display {
+.preferences dt.block-display, .preferences 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,
-.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"] {
+.preferences dd.block-display .input_text_area, .preferences dd.block-display .input_text {
     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;
 }
\ No newline at end of file
diff --git a/airtime_mvc/public/js/airtime/preferences/streamsetting.js b/airtime_mvc/public/js/airtime/preferences/streamsetting.js
index 5282d11f6..481032f56 100644
--- a/airtime_mvc/public/js/airtime/preferences/streamsetting.js
+++ b/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()