Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CC-2775: Better layout for Stream Settings page 

- layout is done
- need to implement status update part
This commit is contained in:
james 2011-09-07 09:48:02 -04:00
parent 4e476b6859
commit f1c311acb6
3 changed files with 72 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
airtime_mvc/application/views/scripts/form/stream-setting-form.phtml
View File

@ -2,7 +2,7 @@
$s_name = "s".$this->stream_number; $s_name = "s".$this->stream_number;
?> ?>
<h3 class="collapsible-header"><span class="arrow-icon"></span>Stream <?php echo $this->stream_number?></h3> <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"> <fieldset class="padded">
<dl class="zend_form clearfix"> <dl class="zend_form clearfix">
<dt id="<?=$s_name?>Enabled-label"> <dt id="<?=$s_name?>Enabled-label">
@ -25,44 +25,45 @@
<dd id="<?=$s_name?>Bitrate-element"> <dd id="<?=$s_name?>Bitrate-element">
<?php echo $this->element->getElement('bitrate')?> <?php echo $this->element->getElement('bitrate')?>
</dd> </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"> <dt id="<?=$s_name?>Output-label">
<label for="<?=$s_name?>Output"><?php echo $this->element->getElement('output')->getLabel()?></label> <label for="<?=$s_name?>Output"><?php echo $this->element->getElement('output')->getLabel()?></label>
</dt> </dt>
<dd id="<?=$s_name?>Output-element"> <dd id="<?=$s_name?>Output-element">
<?php echo $this->element->getElement('output')?> <?php echo $this->element->getElement('output')?>
</dd> </dd>
</dl>
<fieldset class="padded top-margin display_field toggle closed" id="output_setting">
<fieldset class="padded top-margin left-margin" 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"> <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"> <dt id="outputUser-label" class="block-display">
<label for="outputUser"><?php echo $this->element->getElement('user')->getLabel()?> :</label> <label for="outputUser"><?php echo $this->element->getElement('user')->getLabel()?> :</label>
</dt> </dt>
@ -106,10 +107,11 @@
<?php endif; ?> <?php endif; ?>
</dd> </dd>
<dt id="stationURL-label" class="block-display"> <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> </dt>
<dd id="stationURL-element" class="block-display clearfix"> <dd id="stationURL-element" class="block-display clearfix">
<?php echo $this->element->getElement('url')?> <?php echo $this->element->getElement('url')?>
<span class="info-text-small">(Your radio station website)</span>
<?php if($this->element->getElement('url')->hasErrors()) : ?> <?php if($this->element->getElement('url')->hasErrors()) : ?>
<ul class='errors'> <ul class='errors'>
<?php foreach($this->element->getElement('url')->getMessages() as $error): ?> <?php foreach($this->element->getElement('url')->getMessages() as $error): ?>
@ -132,10 +134,11 @@
<?php endif; ?> <?php endif; ?>
</dd> </dd>
<dt id="outputMountpoint-label" class="block-display"> <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> </dt>
<dd id="outputMountpoint-element" class="block-display"> <dd id="outputMountpoint-element" class="block-display">
<?php echo $this->element->getElement('mount')?> <?php echo $this->element->getElement('mount')?>
<span class="info-text-small">(Your radio station website)</span>
<?php if($this->element->getElement('mount')->hasErrors()) : ?> <?php if($this->element->getElement('mount')->hasErrors()) : ?>
<ul class='errors'> <ul class='errors'>
<?php foreach($this->element->getElement('mount')->getMessages() as $error): ?> <?php foreach($this->element->getElement('mount')->getMessages() as $error): ?>
@ -144,13 +147,14 @@
</ul> </ul>
<?php endif; ?> <?php endif; ?>
</dd> </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> </dl>
</fieldset> </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> </fieldset>
</div> </div>

38
airtime_mvc/public/css/styles.css
View File

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

11
airtime_mvc/public/js/airtime/preferences/streamsetting.js
View File

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