From 995f44d9f06ef8b64edbb429fe5b67b188f5b7dc Mon Sep 17 00:00:00 2001
From: attosoft <attosoft@b8457f37-d9ea-0310-8a92-e5e31aec5664>
Date: Tue, 16 Oct 2012 07:35:41 +0000
Subject: [PATCH] FIXED: Modified Settings screen with CSS width properties and
 CSS3 Media Queries for small-width screen

---
 auto-thickbox-options.php | 18 +++++++++---------
 auto-thickbox.css         | 14 +++++++++++++-
 readme.txt                |  5 +++--
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/auto-thickbox-options.php b/auto-thickbox-options.php
index 2d29ab1..fce25f9 100644
--- a/auto-thickbox-options.php
+++ b/auto-thickbox-options.php
@@ -383,7 +383,7 @@ class auto_thickbox_options {
 		<th scope="row"><a href="<?php $this->util->_e('https://developer.mozilla.org/en/CSS/font-family'); ?>" target="_blank"><?php echo ucwords($this->util->__('Font Family', 'Font family')); ?></a></th>
 		<th scope="row"><?php $this->util->_e('Title'); ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[font_title]" value="<?php echo $this->util->esc_attr($this->options['font_title']); ?>" style="width:70%" />
+			<input type="text" name="auto-thickbox-plus[font_title]" value="<?php echo $this->util->esc_attr($this->options['font_title']); ?>" class="large-text" />
 			<label><input type="checkbox" name="auto-thickbox-plus[font_weight_title]" value="bold"<?php $this->util->checked($this->options['font_weight_title'], 'bold'); ?> />
 			<?php $this->util->_e('Bold'); ?></label>
 		</td>
@@ -392,7 +392,7 @@ class auto_thickbox_options {
 		<th scope="row"></th>
 		<th scope="row"><?php $this->util->_e('Caption'); ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[font_cap]" value="<?php echo $this->util->esc_attr($this->options['font_cap']); ?>" style="width:70%" />
+			<input type="text" name="auto-thickbox-plus[font_cap]" value="<?php echo $this->util->esc_attr($this->options['font_cap']); ?>" class="large-text" />
 			<label><input type="checkbox" name="auto-thickbox-plus[font_weight_cap]" value="bold"<?php $this->util->checked($this->options['font_weight_cap'], 'bold'); ?> />
 			<?php $this->util->_e('Bold'); ?></label>
 		</td>
@@ -739,7 +739,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['prev2']; ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_prev]" value="<?php echo $img_prev; ?>" style="width:70%"<?php $this->util->disabled($img_prev_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_prev]" value="<?php echo $img_prev; ?>" class="large-text"<?php $this->util->disabled($img_prev_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_prev]" value="none"<?php $this->util->checked($img_prev_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -748,7 +748,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['next2']; ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_next]" value="<?php echo $img_next; ?>" style="width:70%"<?php $this->util->disabled($img_next_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_next]" value="<?php echo $img_next; ?>" class="large-text"<?php $this->util->disabled($img_next_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_next]" value="none"<?php $this->util->checked($img_next_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -757,7 +757,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['first2']; ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_first]" value="<?php echo $img_first; ?>" style="width:70%"<?php $this->util->disabled($img_first_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_first]" value="<?php echo $img_first; ?>" class="large-text"<?php $this->util->disabled($img_first_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_first]" value="none"<?php $this->util->checked($img_first_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -766,7 +766,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['last2']; ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_last]" value="<?php echo $img_last; ?>" style="width:70%"<?php $this->util->disabled($img_last_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_last]" value="<?php echo $img_last; ?>" class="large-text"<?php $this->util->disabled($img_last_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_last]" value="none"<?php $this->util->checked($img_last_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -775,7 +775,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['close']; ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_close]" value="<?php echo $img_close; ?>" style="width:70%"<?php $this->util->disabled($img_close_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_close]" value="<?php echo $img_close; ?>" class="large-text"<?php $this->util->disabled($img_close_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_close]" value="none"<?php $this->util->checked($img_close_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -784,7 +784,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php echo $this->texts['close']; ?> (<?php $this->util->_e('Button'); ?>)</th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_close_btn]" value="<?php echo $img_close_btn; ?>" style="width:70%"<?php $this->util->disabled($img_close_btn_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_close_btn]" value="<?php echo $img_close_btn; ?>" class="large-text"<?php $this->util->disabled($img_close_btn_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_close_btn]" value="none"<?php $this->util->checked($img_close_btn_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
@@ -793,7 +793,7 @@ class auto_thickbox_options {
 	<tr>
 		<th scope="row"><?php $this->util->_e('Loading&#8230;', 'Loading...'); ?></th>
 		<td>
-			<input type="text" name="auto-thickbox-plus[img_load]" value="<?php echo $img_load; ?>" style="width:70%"<?php $this->util->disabled($img_load_none); ?> />
+			<input type="text" name="auto-thickbox-plus[img_load]" value="<?php echo $img_load; ?>" class="large-text"<?php $this->util->disabled($img_load_none); ?> />
 			<input type="button" class="media-uploader button" value="<?php echo $text_sel_file; ?>" />
 			<label><input type="checkbox" name="auto-thickbox-plus[img_load]" value="none"<?php $this->util->checked($img_load_none); ?> onclick="disableOption(this)" />
 			<?php echo $this->texts['none']; ?></label>
diff --git a/auto-thickbox.css b/auto-thickbox.css
index 3eca80e..3340b99 100644
--- a/auto-thickbox.css
+++ b/auto-thickbox.css
@@ -28,6 +28,7 @@ label.boundary { margin-left: 3px; }
 	height: 20px;
 }
 input.small-text { width: 40px; }
+input.large-text { width: 70%; }
 input.colortext { width: 75px; }
 input.pickcolor { margin-left: 41px; }
 .rtl input.pickcolor { margin-left: 1px; margin-right: 41px; }
@@ -49,7 +50,7 @@ input.pickcolor { margin-left: 41px; }
 .rtl .opacity-trans, .rtl .opacity-opaque { float: right; }
 .rtl .opacity-slider, .rtl #click-range-slider { float: right; }
 
-ol.sortable { margin: 0; padding: 0; width: 60%; }
+ol.sortable { margin: 0; padding: 0; max-width: 350px; }
 ol.sortable li {
 	cursor: move; margin: 0 5px 5px; padding: 3px 0 3px 6px;
 	-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
@@ -82,3 +83,14 @@ li.contact { background: url(images/contact.png) no-repeat; }
 .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: e-resize; }
 .ui-slider-horizontal { height: .8em; }
 .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+
+@media only screen and (max-width: 800px) {
+    .form-table th {
+        width: 120px;
+    }
+}
+@media only screen and (max-width: 640px) {
+    input.large-text {
+        width: 99%;
+    }
+}
diff --git a/readme.txt b/readme.txt
index 4208778..a570353 100644
--- a/readme.txt
+++ b/readme.txt
@@ -282,6 +282,7 @@ Modified ThickBox supports multiline (line breaks) in title/caption. The followi
 == Changelog ==
 
 = Latest Version =
+* FIXED: Modified Settings screen with CSS width properties and CSS3 Media Queries for small-width screen
 
 = 1.9 =
 * NEW: Mobile beta support for small-screen devices such as iPhone, Android, Symbian, BlackBerry and Windows Phone. This is experimental support so it may not work on some version of mobile browsers.
@@ -333,7 +334,7 @@ Modified ThickBox supports multiline (line breaks) in title/caption. The followi
 * FIXED: Removes whitespaces from both ends of gallery caption (regression in v1.5)
 * FIXED: Improved Right-to-Left (RTL) support in Options page when using Persian and so on
 * FIXED: Workaround for the issue that Media Uploader does not work in WordPress 3.3.3 or later
-* FIXED: 'First'/'Last' are not translated in ThickBox window because WordPress translations are split into locale.pot and admin-locale.pot since WordPress 3.4. Thereby 'First'/'Last' had translated only in Options page.
+* FIXED: The word "First/Last" are not translated in ThickBox window because WordPress translations are split into locale.pot and admin-locale.pot since WordPress 3.4. Thereby the word "First/Last" had translated only in Options page.
 * UPDATED: Added **Persian/Farsi (fa_IR) translation (props Mohammadi)** and **Spanish (es_ES) translation (props Juan Antonio Peón)**, and updated French translation (props JB Prévots) and Japanese translation
 
 = 1.6 =
@@ -401,7 +402,7 @@ Modified ThickBox supports multiline (line breaks) in title/caption. The followi
   * In AJAX content, ThickBox window is not displayed at the right position, and has no "Transition" effect
   * In AJAX content, multiple click event handlers are bound redundantly
 * FIXED: Uncaught exception occurs when opening images (ThickBox bug)
-* FIXED: '?'/'&' before "TB_iframe" parameter remains in iframe source URL (ThickBox bug)
+* FIXED: '?' / '&' before "TB_iframe" parameter remains in iframe source URL (ThickBox bug)
 * UPDATED: Dutch translation (props Michel Bats) and Japanese translation
 
 = 1.2 =