Updated layout in media picker so height and width inputs are inline.

--HG--
branch : dev
This commit is contained in:
Jonathan Wall
2011-02-21 17:30:02 -08:00
parent b1075d50a7
commit 7d4cd0c9d8
3 changed files with 63 additions and 62 deletions

View File

@@ -34,8 +34,9 @@ body {
#file-list {
border:1px solid #bdbcbc;
height:324px;
max-height:324px;
height:306px;
max-height:306px;
margin:18px 0 0 0;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
@@ -110,46 +111,10 @@ fieldset { padding:0; margin: 0; border: 0px solid #dbdbdb; }
#orchardmediapicker label.forcheckbox { display: inline; margin: 10px 0 0 4px; }
#orchardmediapicker .actions { margin:12px 0 0 0; clear:both; text-align:left; }
input[type="text"], select, textarea, input.text, input.textMedium, input.text-box {
padding:3px;
border:1px solid #bdbcbc;
width:90%;
}
input[type="checkbox"] {
margin: 10px 0 0 0;
vertical-align: -1px;
}
.image-width, .image-height {float:left; width:90px;}
form.inline, form.inline fieldset { /* todo: (heskew) need something other than .inline ... */
display:inline;
}
form.inline fieldset {
margin:0;
}
.image-width .text-box, .image-height .text-box {width:60%;}
input[type="checkbox"]:focus, input[type="radio"]:focus {
outline:1px dotted #666d51;
}
select {
padding:1px;
}
select:focus, textarea:focus, input.text:focus, input.text-box:focus {
border-color:#666d51;
}
input.check-box {
margin-left:0;
vertical-align:-.1em;
}
input.large.text, textarea, fieldset {
clear:both;
}
fieldset {
margin:0 0 1em 0;
padding:6px 0 0;
}
textarea {
min-height:8em;
}
.clearboth {
clear:both;

View File

@@ -76,18 +76,28 @@
<div id="file-details">
<img alt="" id="lib-loader" style="display:none" src="" />
<fieldset>
<ol>
<li>
<label for="lib-src">@T("URL")</label>
<input type="text" id="lib-src" />
<input class="text-box" type="text" id="lib-src" />
</li>
<li>
<label for="lib-alt">@T("Alternative Text")</label>
<input type="text" id="lib-alt" />
<input class="text-box" type="text" id="lib-alt" />
</li>
<li>
<label for="lib-class">@T("Class")</label>
<input type="text" id="lib-class" />
<input class="text-box" type="text" id="lib-class" />
</li>
<li>
<label for="lib-style">@T("Style")</label>
<input type="text" id="lib-style" />
<input class="text-box" type="text" id="lib-style" />
</li>
<li>
<label for="lib-align">@T("Alignment")</label>
<select id="lib-align">
<option value="">None</option>
@@ -101,19 +111,28 @@
<option value="absbottom">AbsBottom</option>
<option value="baseline">Baseline</option>
</select>
</li>
<label for="lib-width">@T("Width")</label>
<input type="text" id="lib-width" />
X
<label for="lib-height">@T("Height")</label>
<input type="text" id="lib-height" />
<li class="group">
<div class="image-width">
<label for="img-width">@T("Width")</label>
<input class="text-box" type="text" id="img-width" />&nbsp;x
</div>
<div class="image-height">
<label for="img-height">@T("Height")</label>
<input class="text-box" type="text" id="img-height" />
</div>
</li>
<li>
<input type="checkbox" id="lib-lock" checked="checked" />
<label class="forcheckbox" for="lib-lock">@T("Lock Aspect Ratio")</label>
</li>
<div class="actions">
<li class="actions">
<input type="button" id="lib-insert" value="@T("Insert")" class="disabled" data-edittext="@T("Update")" />
<input type="button" id="lib-cancel" value="@T("Cancel")" />
</div>
</li>
</ol>
</fieldset>
</div>

View File

@@ -19,7 +19,7 @@
</div>
<div>
<label for="img-src">@T("URL for the image resource")</label>
<input type="text" id="img-src" />
<input class="text-box" type="text" id="img-src" />
</div>
<div>
@using(Html.BeginFormAntiForgeryPost(uploadAction, FormMethod.Post, new { id = "img-uploadform", enctype = "multipart/form-data", onsubmit="jQuery.mediaPicker.uploadMedia(this)"})) {
@@ -34,15 +34,23 @@
</div>
<div id="file-details">
<fieldset>
<ol>
<li>
<label for="img-alt">@T("Alternative Text")</label>
<input type="text" id="img-alt" />
<input class="text-box" type="text" id="img-alt" />
</li>
<li>
<label for="img-class">@T("Class")</label>
<input type="text" id="img-class" />
<input class="text-box" type="text" id="img-class" />
</li>
<li>
<label for="img-style">@T("Style")</label>
<input type="text" id="img-style" />
<input class="text-box" type="text" id="img-style" />
</li>
<li>
<label for="img-align">@T("Alignment")</label>
<select id="img-align">
<option value="">None</option>
@@ -56,19 +64,28 @@
<option value="absbottom">AbsBottom</option>
<option value="baseline">Baseline</option>
</select>
</li>
<label for="img-width">@T("Width")</label>
<input type="text" id="img-width" />
X
<label for="img-height">@T("Height")</label>
<input type="text" id="img-height" />
<li class="group">
<div class="image-width">
<label for="img-width">@T("Width")</label>
<input class="text-box" type="text" id="img-width" />&nbsp;x
</div>
<div class="image-height">
<label for="img-height">@T("Height")</label>
<input class="text-box" type="text" id="img-height" />
</div>
</li>
<li>
<input type="checkbox" id="img-lock" checked="checked" />
<label class="forcheckbox" for="img-lock">@T("Lock Aspect Ratio")</label>
</li>
<div class="actions">
<li class="actions">
<input type="button" id="img-insert" value="@T("Insert")" class="disabled" data-edittext="@T("Update")" />
<input type="button" id="img-cancel" value="@T("Cancel")" />
</div>
</li>
</ol>
</fieldset>
</div>