[MediaWiki-commits] [Gerrit] Use select for language choice - change (wikimedia/wikimania-scholarships)
jenkins-bot has submitted this change and it was merged.
Change subject: Use select for language choice
..
Use select for language choice
Use progressive enhancement to convert the list of languages into
a select element. This should help reduce UI clutter as more
translations are added.
Change-Id: I38144d4bdcd6785caaa9074361cbed14807345c3
---
M data/i18n/en.php
M data/templates/apply.html
M data/templates/base.html
M data/templates/base_auth.html
M public/css/style.css
A public/js/site.js
6 files changed, 40 insertions(+), 4 deletions(-)
Approvals:
Chad: Looks good to me, approved
jenkins-bot: Verified
diff --git a/data/i18n/en.php b/data/i18n/en.php
index dbac130..815a410 100644
--- a/data/i18n/en.php
+++ b/data/i18n/en.php
@@ -3,6 +3,7 @@
'wikimania' = Wikimania,
'header-title' = Wikimania 2013 - Scholarship application,
'page-header' = Wikimania 2013 travel scholarships,
+ 'language' = 'Language:',
'text-intro' =
pThis is the application for sponsorship to attend a
href='http://wikimania2013.wikimedia.org'Wikimania 2013/a, Wikimedia's
international conference. Awardees will receive a scholarship to pay for
registration, hotel, and roundtrip travel to Wikimania in Hong Kong, 7–11
August 2013./p
pThis is strongnot/strong a scholarship for university study.
Applications not obviously related to the conference will be discarded./p
diff --git a/data/templates/apply.html b/data/templates/apply.html
index 76998a3..10e63ad 100644
--- a/data/templates/apply.html
+++ b/data/templates/apply.html
@@ -18,7 +18,6 @@
link rel=stylesheet type=text/css href={{ siteUrl( 'css/chosen.min.css'
) }} /
{% endblock css %}
{% block javascript %}
-script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
script src={{ siteUrl( 'js/chosen.jquery.js' ) }}/script
script type=text/javascript(function( $, document ) {
$( document ).ready( function() {
$('.chosen-select').chosen({'search_contains':true}); });
diff --git a/data/templates/base.html b/data/templates/base.html
index bd65184..06b9ae6 100644
--- a/data/templates/base.html
+++ b/data/templates/base.html
@@ -20,9 +20,10 @@
body
div class=container
div id=langbar class=fifteen columns
+span class=langlabel{{ wgLang.message( 'language' ) }}/span
ul class=langlist
- {% for lang in wgLang.getLangs %}
- lia href={{ app.request.getPath }}?uselang={{ lang }}{{ lang
}}/a/li
+ {% for l in wgLang.getLangs %}
+ lia href={{ app.request.getPath }}?uselang={{ l }} {{ l == lang
? 'class=selected' }}{{ l }}/a/li
{% endfor %}
li class=lasta href={{ urlFor( 'translate' ) }}{{
wgLang.message( 'help-translate' ) }}/a/li
/ul
@@ -45,6 +46,8 @@
/ul
/div
/div
+script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
+script src={{ siteUrl( 'js/site.js' ) }}/script
{% block javascript %}{% endblock javascript %}
/body
/html
diff --git a/data/templates/base_auth.html b/data/templates/base_auth.html
index 9528d01..0fd5284 100644
--- a/data/templates/base_auth.html
+++ b/data/templates/base_auth.html
@@ -42,7 +42,6 @@
{% endblock post_content %}
{% block javascript %}
-script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
script src={{ siteUrl( 'js/jquery-ui.min.js' ) }}/script
script src={{ siteUrl( 'js/flexigrid.pack.js' ) }}/script
script src={{ siteUrl( 'js/schols.js' ) }}/script
diff --git a/public/css/style.css b/public/css/style.css
index a6f07df..0657d18 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -120,6 +120,16 @@
padding: 1em 1em 0 1em;
border: none;
text-align: right;
+ overflow: auto;
+ width: 100%;
+}
+
+.langlabel {
+ margin-right:.5em;
+ display: none;
+}
+.langselect {
+ float:right;
}
div#footer {
@@ -130,6 +140,7 @@
ul.langlist {
list-style: none;
padding-left: 0;
+ display: inline;
}
ul#footerlinks li,
diff --git a/public/js/site.js b/public/js/site.js
new file mode 100644
index 000..a87f299
--- /dev/null
+++ b/public/js/site.js
@@ -0,0 +1,23 @@
+(function( $, document, window ) {
+ $(document).ready(function() {
+$('.langlist').each(function() {
+ var $list = $(this),
+$select = $(document.createElement('select'))
+ .addClass('langselect')
+ .insertBefore($list.hide());
+ $('li a', this).each(function() {
+var $this = $(this);
+$(document.createElement('option'))
+ .val(this.href)
+ .html($this.html())
+ .prop('selected',$this.attr('class')==='selected')
+ .click(function() {
+window.location.href = $(this).val();
+ })
+ .appendTo($select);
+ });
+ $list.remove();
+});
+$('.langlabel').show();
+ });
+})( jQuery, document, window );
--
To view, visit
[MediaWiki-commits] [Gerrit] Use select for language choice - change (wikimedia/wikimania-scholarships)
BryanDavis has uploaded a new change for review.
https://gerrit.wikimedia.org/r/101176
Change subject: Use select for language choice
..
Use select for language choice
Use progressive enhancement to convert the list of languages into
a select element. This should help reduce UI clutter as more
translations are added.
Change-Id: I38144d4bdcd6785caaa9074361cbed14807345c3
---
M data/i18n/en.php
M data/templates/apply.html
M data/templates/base.html
M data/templates/base_auth.html
M public/css/style.css
A public/js/site.js
6 files changed, 40 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/wikimania-scholarships
refs/changes/76/101176/1
diff --git a/data/i18n/en.php b/data/i18n/en.php
index dbac130..815a410 100644
--- a/data/i18n/en.php
+++ b/data/i18n/en.php
@@ -3,6 +3,7 @@
'wikimania' = Wikimania,
'header-title' = Wikimania 2013 - Scholarship application,
'page-header' = Wikimania 2013 travel scholarships,
+ 'language' = 'Language:',
'text-intro' =
pThis is the application for sponsorship to attend a
href='http://wikimania2013.wikimedia.org'Wikimania 2013/a, Wikimedia's
international conference. Awardees will receive a scholarship to pay for
registration, hotel, and roundtrip travel to Wikimania in Hong Kong, 7–11
August 2013./p
pThis is strongnot/strong a scholarship for university study.
Applications not obviously related to the conference will be discarded./p
diff --git a/data/templates/apply.html b/data/templates/apply.html
index 76998a3..10e63ad 100644
--- a/data/templates/apply.html
+++ b/data/templates/apply.html
@@ -18,7 +18,6 @@
link rel=stylesheet type=text/css href={{ siteUrl( 'css/chosen.min.css'
) }} /
{% endblock css %}
{% block javascript %}
-script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
script src={{ siteUrl( 'js/chosen.jquery.js' ) }}/script
script type=text/javascript(function( $, document ) {
$( document ).ready( function() {
$('.chosen-select').chosen({'search_contains':true}); });
diff --git a/data/templates/base.html b/data/templates/base.html
index bd65184..06b9ae6 100644
--- a/data/templates/base.html
+++ b/data/templates/base.html
@@ -20,9 +20,10 @@
body
div class=container
div id=langbar class=fifteen columns
+span class=langlabel{{ wgLang.message( 'language' ) }}/span
ul class=langlist
- {% for lang in wgLang.getLangs %}
- lia href={{ app.request.getPath }}?uselang={{ lang }}{{ lang
}}/a/li
+ {% for l in wgLang.getLangs %}
+ lia href={{ app.request.getPath }}?uselang={{ l }} {{ l == lang
? 'class=selected' }}{{ l }}/a/li
{% endfor %}
li class=lasta href={{ urlFor( 'translate' ) }}{{
wgLang.message( 'help-translate' ) }}/a/li
/ul
@@ -45,6 +46,8 @@
/ul
/div
/div
+script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
+script src={{ siteUrl( 'js/site.js' ) }}/script
{% block javascript %}{% endblock javascript %}
/body
/html
diff --git a/data/templates/base_auth.html b/data/templates/base_auth.html
index 9528d01..0fd5284 100644
--- a/data/templates/base_auth.html
+++ b/data/templates/base_auth.html
@@ -42,7 +42,6 @@
{% endblock post_content %}
{% block javascript %}
-script src={{ siteUrl( 'js/jquery-1.7.1.min.js' ) }}/script
script src={{ siteUrl( 'js/jquery-ui.min.js' ) }}/script
script src={{ siteUrl( 'js/flexigrid.pack.js' ) }}/script
script src={{ siteUrl( 'js/schols.js' ) }}/script
diff --git a/public/css/style.css b/public/css/style.css
index a6f07df..0657d18 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -120,6 +120,16 @@
padding: 1em 1em 0 1em;
border: none;
text-align: right;
+ overflow: auto;
+ width: 100%;
+}
+
+.langlabel {
+ margin-right:.5em;
+ display: none;
+}
+.langselect {
+ float:right;
}
div#footer {
@@ -130,6 +140,7 @@
ul.langlist {
list-style: none;
padding-left: 0;
+ display: inline;
}
ul#footerlinks li,
diff --git a/public/js/site.js b/public/js/site.js
new file mode 100644
index 000..0291bb6
--- /dev/null
+++ b/public/js/site.js
@@ -0,0 +1,23 @@
+(function( $, document, window ) {
+ $(document).ready(function() {
+$('.langlist').each(function() {
+ var $list = $(this)
+, $select = $(document.createElement('select'))
+.addClass('langselect')
+.insertBefore($list.hide());
+ $('li a', this).each(function() {
+var $this = $(this);
+$(document.createElement('option'))
+ .val(this.href)
+ .html($this.html())
+ .prop('selected',$this.attr('class')==='selected')
+ .click(function() {
+window.location.href = $(this).val();
+ })
+ .appendTo($select);
+ });
+ $list.remove();
+});
+$('.langlabel').show();
+ })
+})( jQuery,
