bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS fixes to match the style modifications of jquery.uls

Browse Source 
The style rearrangements of jquery.uls (to avoid CSSLint warnings)
requires some fixes on the extension.

Also update the changes from jquery.uls

Change-Id: I607f7778e620a398ce8648c21c594a3505ec0816
This commit is contained in:
pginer
2012-11-19 20:20:23 +01:00
committed by Santhosh Thottingal
parent 8882e7b08d
commit 73bb7015c8
4 changed files with 88 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
lib/jquery.uls/css/jquery.uls.css
View File

@@ -9,15 +9,11 @@
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
display: none; display: none;
min-width: 715px;
margin-top: 1px; margin-top: 1px;
width: 45%;
/* Styling */ /* Styling */
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #ccc; border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@@ -29,11 +25,16 @@
background-clip: padding-box; background-clip: padding-box;
} }
.uls-title a { .uls-wide {
min-width: 715px;
width: 45%;
}
.uls-title-region a {
padding-left: 15px; padding-left: 15px;
} }
.uls-menu h1 { .uls-menu .uls-title {
font-weight: normal; font-weight: normal;
border: none; border: none;
padding-top: 1.25em; padding-top: 1.25em;
@@ -44,17 +45,20 @@
color: #555; color: #555;
} }
.uls-menu h2 { .uls-menu .uls-no-results-found-title{
font-size: 16pt; font-size: 16pt;
font-weight: bold;
line-height: 1.5em; line-height: 1.5em;
padding-left: 6px; padding-left: 6px;
padding-top: 10px;
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: none; border-bottom: none;
color: #555; color: #555;
} }
.uls-menu h3 { .uls-menu .uls-lcd-region-title {
color: #777;
font-size: 14pt; font-size: 14pt;
line-height: 1.5em; line-height: 1.5em;
padding-left: 0; padding-left: 0;
@@ -86,15 +90,16 @@ div.uls-region {
} }
.uls-region a { .uls-region a {
bottom: 0; bottom: 2px;
padding: 2px; left: 2px;
padding: 0;
position: absolute; position: absolute;
font-size: 13px; font-size: 13px;
line-height: 1.2em; line-height: 1.2em;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 99%;
} }
.uls-region:hover { .uls-region:hover {
@@ -107,38 +112,48 @@ div.uls-region {
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
} }
.regionselector.active { .map-block .active {
border-bottom-color: #3366bb; border-bottom-color: #3366bb;
border-bottom-style: solid; border-bottom-style: solid;
} }
#map-block { .map-block {
top: 1px; top: 1px;
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
float: right; float: right;
overflow: hidden; overflow: hidden;
color: rgba(0,0,0,0);
opacity: 0.7; opacity: 0.7;
transition: color 0.15s linear; -moz-transition: opacity 0.2s linear;
-moz-transition: color 0.15s linear; -o-transition: opacity 0.2s linear;
-webkit-transition: color 0.15s linear; -webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
} }
#map-block:hover { .map-block a {
color: #333;
opacity:0;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.map-block:hover,
.map-block:hover a {
opacity: 1; opacity: 1;
color: #333; color: #333;
} }
#map-block #uls-region-1 { .map-block .uls-region-1 {
border-color: transparent; border-color: transparent;
} }
#map-block:hover #uls-region-1.active { .map-block:hover .active {
border-color: #3366bb; border-color: #3366bb;
} }
#map-block .active a { .map-block .active a {
font-weight: bold; font-weight: bold;
} }
@@ -151,26 +166,34 @@ div.uls-region {
cursor: pointer; cursor: pointer;
} }
input#languagefilter { .uls-menu .languagefilter {
background-color: transparent;
border: 1px solid #c9c9c9; border: 1px solid #c9c9c9;
-moz-transition: all 0.15s linear 0s;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
color: #333; color: #333;
display: block; display: block;
background-color: transparent !important; padding: 6px;
-moz-transition: border 0.15s linear 0s;
-o-transition: border 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s;
transition: border 0.15s linear 0s;
} }
input:focus#languagefilter { .uls-menu .languagefilter:focus {
border: 1px solid #3366bb; border: 1px solid #3366bb;
} }
#search{ .uls-menu .search{
position: relative; position: relative;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
background: #f8f8f8; background: #f8f8f8;
background: linear-gradient(#F0F0F0, #FBFBFB);
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB)); background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB); background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -ms-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);
background: linear-gradient(#F0F0F0, #FBFBFB);
border-top-color: #AAA; border-top-color: #AAA;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
@@ -180,18 +203,17 @@ input:focus#languagefilter {
border-bottom-color: #EEE; border-bottom-color: #EEE;
} }
.search-label { .uls-menu .search-label {
/* @embed */ /* @embed */
background: url('../images/search.png') no-repeat scroll right center background: url('../images/search.png') no-repeat scroll right center
transparent; transparent;
background-size: 30px; background-size: 30px;
height: 32px; height: 32px;
width: 32px; width: 32px;
display: inline-block;
float: right; float: right;
} }
#languagefilter-clear { .uls-menu .languagefilter-clear {
/* @embed */ /* @embed */
background: url('../images/clear.png') no-repeat scroll left center background: url('../images/clear.png') no-repeat scroll left center
transparent; transparent;
@@ -202,18 +224,18 @@ input:focus#languagefilter {
margin-left: -32px; margin-left: -32px;
} }
.filterinput { .uls-menu .filterinput {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 14px; font-size: 14px;
height: 32px; height: 32px;
padding: 6px;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
#filtersuggestion { .uls-menu .filtersuggestion {
padding: 6px;
background-color: white; background-color: white;
color: #888; color: #888;
border: 1px transparent; border: 1px transparent;
@@ -222,7 +244,7 @@ input:focus#languagefilter {
left: 1px; left: 1px;
} }
#search-input-block { .uls-menu .search-input-block {
position: relative; position: relative;
} }
@@ -547,24 +569,23 @@ img {
} }
.uls-lcd-region-section h3 {
color: #777;
}
.uls-lcd-region-section ul li:hover { .uls-lcd-region-section ul li:hover {
background-color: #eaeff7; background-color: #eaeff7;
} }
.uls-lcd-region-section {
margin-top:10px;
}
/* Language list */ /* Language list */
.uls-language-list { .uls-language-list {
height: 22em; height: 22em;
overflow: auto; overflow: auto;
padding: 10px;
width: auto; width: auto;
} }
.uls-language-block ul { .uls-language-block ul {
margin: 0 0 1.6em; margin: 0 0 1.5em;
} }
.uls-language-list ul li { .uls-language-list ul li {
@@ -611,10 +632,9 @@ img {
line-height: 1.6em; line-height: 1.6em;
} }
.uls-language-block .three.columns { .uls-language-block .columns {
width: 22%; width: 22%;
} }
.uls-language-block { .uls-language-block {
width: 100%; width: 100%;
} }
@@ -624,11 +644,7 @@ img {
height: 100%; height: 100%;
} }
.uls-no-results-view h2{ .uls-no-found-more {
font-weight: bold;
}
#uls-no-found-more {
font-size: 0.9em; font-size: 0.9em;
background: #F8F8F8; background: #F8F8F8;
width: 100%; width: 100%;
@@ -637,8 +653,7 @@ img {
position:absolute; position:absolute;
bottom:0; bottom:0;
left:0; left:0;
} -webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
.uls-lcd-region-section ul li.uls-column-break:hover { border-radius: 0 0 5px 5px;
background: none;
} }

32
lib/jquery.uls/jquery.uls.js
View File

@@ -1,4 +1,4 @@
/*! jquery.uls - v0.1.0 - 2012-11-19 /*! jquery.uls - v0.1.0 - 2012-11-20
* https://github.com/wikimedia/jquery.uls * https://github.com/wikimedia/jquery.uls
* Copyright (c) 2012 Santhosh Thottingal; Licensed GPL, MIT */ * Copyright (c) 2012 Santhosh Thottingal; Licensed GPL, MIT */
@@ -503,10 +503,10 @@
var noResultsTemplate = '\ var noResultsTemplate = '\
<div class="twelve columns uls-no-results-view">\ <div class="twelve columns uls-no-results-view">\
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one">\ <h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one uls-no-results-found-title">\
No results found\ No results found\
</h2>\ </h2>\
<div id="uls-no-found-more">\ <div id="uls-no-found-more" class="uls-no-found-more">\
<div class="ten columns end offset-by-one">\ <div class="ten columns end offset-by-one">\
<p>\ <p>\
<span data-i18n="uls-search-help">You can search by language name, \ <span data-i18n="uls-search-help">You can search by language name, \
@@ -646,7 +646,7 @@
$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) { $.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
$section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode ); $section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
$sectionTitle = $( '<h3 data-i18n="uls-region-'+ regionCode+'">' ) $sectionTitle = $( '<h3 data-i18n="uls-region-'+ regionCode+'">' )
.addClass( 'eleven columns uls-lcd-region-section offset-by-one' ) .addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
.text( regions[regionCode] ); .text( regions[regionCode] );
$section.append( $sectionTitle ); $section.append( $sectionTitle );
that.$element.append( $section ); that.$element.append( $section );
@@ -676,7 +676,7 @@
quickList.sort( $.uls.data.sortByAutonym ); quickList.sort( $.uls.data.sortByAutonym );
var $quickListSection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' ); var $quickListSection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
var $quickListSectionTitle = $( '<h3 data-i18n="uls-common-languages">' ) var $quickListSectionTitle = $( '<h3 data-i18n="uls-common-languages">' )
.addClass( 'eleven columns uls-lcd-region-section offset-by-one' ) .addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present .text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
$quickListSection.append( $quickListSectionTitle ); $quickListSection.append( $quickListSectionTitle );
this.$element.prepend( $quickListSection ); this.$element.prepend( $quickListSection );
@@ -1347,18 +1347,18 @@
// Region numbers in id attributes also appear in the langdb. // Region numbers in id attributes also appear in the langdb.
var template = '\ var template = '\
<div class="uls-menu"> \ <div class="uls-menu uls-wide"> \
<div class="row"> \ <div class="row"> \
<span id="uls-close" class="icon-close"></span> \ <span id="uls-close" class="icon-close"></span> \
</div> \ </div> \
<div class="row"> \ <div class="row"> \
<div class="uls-title four columns">\ <div class="uls-title-region four columns">\
<h1 data-i18n="uls-select-language">Select Language</h1>\ <h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
</div>\ </div>\
<div class="three columns" id="settings-block"></div>\ <div class="three columns" id="settings-block"></div>\
<div class="five columns" id="map-block">\ <div class="five columns map-block" id="map-block">\
<div class="row">\ <div class="row">\
<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region">\ <div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\
<a data-i18n="uls-region-WW">Worldwide</a>\ <a data-i18n="uls-region-WW">Worldwide</a>\
</div>\ </div>\
<div class="nine columns">\ <div class="nine columns">\
@@ -1380,20 +1380,20 @@
</div>\ </div>\
</div>\ </div>\
</div>\ </div>\
<div id="search" class="row"> \ <div id="search" class="row search"> \
<div class="one column">\ <div class="one column">\
<span class="search-label"></span>\ <span class="search-label"></span>\
</div>\ </div>\
<div class="ten columns">\ <div class="ten columns">\
<div id="search-input-block">\ <div id="search-input-block" class="search-input-block">\
<input type="text" class="filterinput" id="filtersuggestion" disabled="true"\ <input type="text" class="filterinput filtersuggestion" id="filtersuggestion" disabled="true"\
autocomplete="off" /> <input type="text" class="filterinput" id="languagefilter"\ autocomplete="off" /> <input type="text" class="filterinput languagefilter" id="languagefilter"\
data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\ data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\
placeholder="Language search" autocomplete="off" />\ placeholder="Language search" autocomplete="off" />\
</div>\ </div>\
</div>\ </div>\
<div class="one column">\ <div class="one column">\
<span id="languagefilter-clear"></span>\ <span id="languagefilter-clear" class="languagefilter-clear"></span>\
</div>\ </div>\
</div>\ </div>\
<div class="row uls-language-list"></div>\ <div class="row uls-language-list"></div>\
@@ -1419,7 +1419,7 @@
this.top = this.options.top; this.top = this.options.top;
this.shown = false; this.shown = false;
this.initialized = false; this.initialized = false;
this.$languageFilter = this.$menu.find( 'input#languagefilter' ); this.$languageFilter = this.$menu.find( '#languagefilter' );
this.$regionFilters = this.$menu.find( '.uls-region' ); this.$regionFilters = this.$menu.find( '.uls-region' );
this.$resultsView = this.$menu.find( 'div.uls-language-list' ); this.$resultsView = this.$menu.find( 'div.uls-language-list' );
this.render(); this.render();

5
resources/css/ext.uls.languagesettings.css
View File

@@ -50,7 +50,10 @@
font-size: 16pt; font-size: 16pt;
line-height: 20pt; line-height: 20pt;
margin-top: 0; margin-top: 0;
padding-top: 15px; font-weight: normal;
border: none;
padding: 15px 0 3px 15px;
color: #555;
} }
.language-settings-buttons { .language-settings-buttons {

2
resources/js/ext.uls.languagesettings.js
View File

@@ -36,7 +36,7 @@
settingsMenu + settingsMenu +
settingsPanel + settingsPanel +
'</div>'; '</div>';
windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu">' windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu uls-wide">'
+ closeRow + closeRow
+ panelsRow + panelsRow
+ '</div>'; + '</div>';