From 833f8f63d6614572874b855285df7438fee13642 Mon Sep 17 00:00:00 2001
From: pginer <pginer@wikimedia.org>
Date: Wed, 31 Oct 2012 13:36:15 +0100
Subject: [PATCH] Fix to reduce the ammount of settings text

Settings text on the main ULS view can grow longer for some languages running out of space.
This change does the following to avoid that:
* Removes setting section explanations and shows them as a tooltip on hover.
* Adjusts style for adjusting space between setting sections.
* Keyboard image has been adjusted to match the display settings image.

Change-Id: I42ec5cb35b3d4df977a6eff28ad55891f4135356
---
 resources/css/ext.uls.css    |  11 +++++++++--
 resources/images/input.png   | Bin 533 -> 1031 bytes
 resources/js/ext.uls.init.js |  22 ++++++++++------------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index b7d8531a..7cf642aa 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -4,8 +4,15 @@ div#settings-block {
 	line-height: 1.2em;
 }
 
-div.display-settings-block:hover {
-	color: black;
+#settings-block div.display-settings-block,
+#settings-block div.input-settings-block {
+	margin: 8px 0;
+	color: #565656;
+}
+
+#settings-block div.display-settings-block:hover,
+#settings-block div.input-settings-block:hover {
+	color: #252525;
 }
 
 .uls-ui-languages button {
diff --git a/resources/images/input.png b/resources/images/input.png
index 38e16d614e0e49ed650fef3dd8e2d5711bf5e3c3..cb6170749022d5afaa50145a95baab14d0c034f9 100644
GIT binary patch
delta 1009
zcmV<N0}lL^1cwNaB!2{RLP=Bz2nYy#2xN!=000SaNLh0L01|Wn01|Wo-ew<o0000P
zbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}WiD@WXPfRk8UO$Tgh@m}R9J=Wm``XNWf;bP
z@64<O)VdQzp?}bT;z6kzS7IPgvolGGc=2Gti_n8t>7jxbp??VCRrKmf1Z71;2-L`I
z(pxRYR;8D!Al6!}s7b4Zbh9&$hy5l_mu&u+-82h%F8hA(eDi+4-F@fzhR-C?FY<0R
zz-H7}ut7JA#c}+GnSB$6;dHH5Yjm?VYyh@Wsg%Mn9LciG^E@vzGi6zpnVHP2nPpkS
z<svhCUDEZ1g@1*8!1lsctJTNK<?^(o{bq(F@&~d#HnTi_ElHBA-3A4)PHs@CR7&M?
z`2sKmd=FfdR5G&?P@?rk16qCWN&3soYV~^kUG>OfI{va@7#@{01bj6(I5^ge9^9-t
zx`CvZ-RE070TepGj*X4o2|NKbgCO`~dyzWJs@3YL_J5@3d3Q*95?GRSX8W;LS72s`
z+LMLnV_>!Gw@Q7rgYClhN~`(o&xJSy_PF>LAOkS7J(5C~zYHw9_;%nP7heIETs#2W
z=i)zr>n<(<dtJ>1N!MK70}iYQdooFqXY;}2<m90&%T593k|Y_<^Kl#>1il3>*X#BD
z`HnR;HGg$)nx<EP#^U1Qf%*CQWmwq_{{e3EegBb}nVH`mphZ!13D}#a>FDh2?1jP_
zXKC5zirU-YCi9nc!xg<L@B4l}UM_B}jYcESD+dK|vD)U~?p-dfm8*Tt)nIqDEQ+Gy
zOULOnO;_5$_x;1bhrkcOXqu)eKoA5Yl0FCiOn=k#QCx2ZK`<ogEYOtnV3uW90X)yU
z%glbH<?F-EX7eYv#DMSn=YhL{YMQ3!+`2w+8hB_e*d49DYJ-lih-P+1(%bo1((`6^
z#97QMK-1+PHnS5he$~t_<+aW19Z8|2nwfoCsC`V*h@|so_GTeJDe35@VI_T;B*{nl
zIDd+w0pN(Fi%F7vkmtw8#~<*0{{%pmW$(?+%`N8F;y6A|%d1ZoYsGQ=G%#XjU$^C#
zfR3<z)dqb9yOtaL3QQNqqrgF0CjLIIXMy{H!!G^|_|3%u@Di;p^*dTtl<PTQAFZwT
zlR|zNc<TSa?l|>T8*Jo6Cgs1syq5|9e`>u6Yf93K^?Lo|t|4_$6h$wXS#7O3>$ZWJ
z{oOsJt*x_>HaIphG4agSan{x2>rL1Q?3ARbF2HPA0nn2}v|gy=!Q4(%U-|4VY_GHn
f+biwD_DcT(3(R_P156##00000NkvXXu0mjfr}q4M

delta 507
zcmV<X0R;Ys2$ckoB!32COGiWi{{a60|De66lK=n!32;bRa{vGh*8l(w*8xH(n|J^K
z00(qQO+^RX3K0n(1|ZeWivR!tqDe$SR9M69m%%GUQ5431!yqDN6e0_GH7_<Yl7+Ih
zmBe2l%7Q;Y*;!gi*;rXvSy@lb!d78np_ELKl!b(1ESy`X*MH2IXWsPYjr-NDIp00!
zz0<wtJMRowSXfwCSXfv@6paBtZvprOo~n^-%%|@hFe!E(cvkz(z$UN@Y=nIaTasX@
zbqXZIPP7+z1&)9w&uJ&rstK&g$)&<fB3^`F_SlQS3os+A+SvCauzbijSun4LDD~M$
zB^&=`{{y&`vVTYdL%=QYDElMQ9WH<`pc8O_9B?l_DWDBFmk&m}a1X$p_&5^#Cz!sO
zQQVYpvx++g&Xnzn&ywN}fE#7^iO-7Sc0B#M{>z{XNXze0b*-ihx`7VmGpw%Fa6Le)
z$3{xZaQ&6c1~u8b;$;TE0f!=xgiKdgKvwoAfN|hN#B>z{=0#ZL#8m|EfKo^x+lpHk
zZcK3*A94AAConBEGcTCwDy_I_HGG?SchE;1btka8ECYj8;5wjpJHTEL4=VPz#SQSF
x+!F5zq-Jx#dqByy00VyVij=@CEG#U3@C`|-XidfxnF0U+002ovPDHLkV1iSu-zxwB

diff --git a/resources/js/ext.uls.init.js b/resources/js/ext.uls.init.js
index 5355dba3..c6a64a4c 100644
--- a/resources/js/ext.uls.init.js
+++ b/resources/js/ext.uls.init.js
@@ -139,32 +139,30 @@
 		previousLang = previousLanguages.slice( -1 )[0];
 
 		function displaySettings () {
-			var $displaySettingsTitle, $displaySettingsText, $displaySettings;
+			var $displaySettingsTitle, displaySettingsText, $displaySettings;
 
+			displaySettingsText = $.i18n( 'ext-uls-display-settings-desc' );
 			$displaySettingsTitle = $( '<div data-i18n="ext-uls-display-settings-title">' )
-				.addClass( 'settings-title' );
-			$displaySettingsText = $( '<span data-i18n="ext-uls-display-settings-desc">' )
-				.addClass( 'settings-text' );
+				.addClass( 'settings-title' )
+				.attr( 'title', displaySettingsText );
 			$displaySettings = $( '<div>' )
 				.addClass( 'display-settings-block' )
 				.prop( 'id', 'display-settings-block' )
-				.append( $displaySettingsTitle )
-				.append( $displaySettingsText );
+				.append( $displaySettingsTitle );
 			return $displaySettings;
 		}
 
 		function inputSettings () {
-			var $inputSettingsTitle, $inputSettingsText, $inputSettings;
+			var $inputSettingsTitle, inputSettingsText, $inputSettings;
 
+			inputSettingsText = $.i18n( 'ext-uls-input-settings-desc' );
 			$inputSettingsTitle = $( '<div data-i18n="ext-uls-input-settings-title">' )
-				.addClass( 'settings-title' );
-			$inputSettingsText = $( '<span data-i18n="ext-uls-input-settings-desc">' )
-				.addClass( 'settings-text' );
+				.addClass( 'settings-title' )
+				.attr( 'title', inputSettingsText );
 			$inputSettings = $( '<div>' )
 				.addClass( 'input-settings-block' )
 				.prop( 'id', 'input-settings-block' )
-				.append( $inputSettingsTitle )
-				.append( $inputSettingsText );
+				.append( $inputSettingsTitle );
 			return $inputSettings;
 		}