#1096 redesign language menu and drop jquery.uls
Merged 3 years ago by darknao. Opened 3 years ago by darknao.
darknao/fedora-websites lang_sel  into  staging

@@ -10,11 +10,6 @@ 

      <link rel='stylesheet' media="screen" href='https://fonts.googleapis.com/css?family=Montserrat' />

      <link rel="stylesheet" type="text/css" href="${path}/static/css/font-awesome.css" />

  

-     <!-- language selector -->

-     <link rel="stylesheet" type="text/css" href="${path}/static/css/jquery.uls.css" />

-     <link rel="stylesheet" type="text/css" href="${path}/static/css/jquery.uls.grid.css" />

-     <link rel="stylesheet" type="text/css" href="${path}/static/css/jquery.uls.lcd.css" />

- 

      <!-- use RTL css for specific languages -->

      <link py:if="lang in ('ar', 'bal', 'fa', 'he')" rel="stylesheet" type="text/css" media="all" href="${path}/static/css/bootstrap-rtl.css" />

  

@@ -91,14 +91,7 @@ 

                      </div>

                      <div class="col-md-3">

                          <div class="widget-body">

-                             <div class="pull-left language-header">

-                               <span class="active uls-trigger lang-dropdown">${_('Change Language')}</span>

-                                 <form action="" method="GET" style="visibility:hidden" id="langSelect" class="lang-dropdown">

-                                   <input type="hidden" name="lang" id="selectedLang" value="" />

-                         <!-- Allow uls script to change language through legacy system -->

-                                   <input type="submit" value="${_('OK')}" />

-                                 </form>

-                               </div>

+                             <xi:include href="../templates/translations.html" />

                          </div>

                      </div>

                  </div> <!-- /row of widgets -->

@@ -14,14 +14,6 @@ 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  

-     <script type="text/javascript" src="${path}/static/js/jquery.uls.data.js"></script>

- 	  <script type="text/javascript" src="${path}/static/js/jquery.uls.data.utils.js"></script>

- 	  <script type="text/javascript" src="${path}/static/js/jquery.uls.lcd.js"></script>

- 	  <script type="text/javascript" src="${path}/static/js/jquery.uls.languagefilter.js"></script>

- 	  <script type="text/javascript" src="${path}/static/js/jquery.uls.regionfilter.js"></script>

- 	  <script type="text/javascript" src="${path}/static/js/jquery.uls.core.js"></script>

-     <xi:include href="../templates/translations.html" />

- 

      <!--[if lt IE 9]>

      <script type="text/javascript" src="${path}/static/js/html5shiv.js"></script>

      <script type="text/javascript" src="${path}/static/js/respond.min.js"></script>

@@ -763,8 +763,31 @@ 

    padding-left: 2px;

  }

  .language-header {

-   margin-top: 43px;

+   margin-top: 29px;

  }

+ .language-menu ul {

+   column-count: 3;

+   column-gap: 3em;

+   margin: 1.5em;

+ }

+ 

+ @media (min-width:992px) {

+   .language-menu {

+     width: 97rem;

+   }

+   .language-menu ul {

+     column-count: 5;

+   }

+ }

+ @media (min-width:1200px) {

+   .language-menu {

+     width: 117rem;

+   }

+   .language-menu ul {

+     column-count: 5;

+   }

+ }

+ 

  .btn-topmargin {

    margin-top: 10px;

  }

@@ -1,75 +0,0 @@ 

- .uls-compact .uls-icon-close,

- .uls-compact .uls-title-region,

- .uls-compact .uls-map-block,

- .uls-compact #uls-settings-block {

- 	display: none !important;

- }

- 

- .uls-compact.uls-menu {

- 	border-radius: 0;

- }

- 

- .uls-compact .uls-search {

- 	background: white;

- 	border-top: none;

- 	padding: 0.8em 0;

- 	border-bottom-width: 1px;

- 	border-bottom-style: solid;

- 	border-bottom-color: #DDD;

- }

- 

- .uls-compact .uls-filterinput,

- .uls-compact .uls-filterinput:focus {

- 	background-color: transparent;

- 	border: none;

- 	box-shadow: none;

- 	outline: none;

- 	font-size: 18px;

- 	left: 0;

- }

- 

- .uls-compact .uls-language-list {

- 	background: #FCFCFC;

- 	height: 20em;

- }

- 

- .uls-compact .uls-search-label {

- 	background-size: 25px;

- 	height: 26px;

- 	width: 26px;

- 	float: right;

- 	opacity: 0.8;

- }

- 

- .uls-compact .uls-languagefilter-clear {

- 	margin-left: 0;

- }

- 

- .uls-compact .uls-title-region a {

- 	color: #777;

- 	display: inline-block;

- 	margin: 15px 0 5px 19px;

- 	cursor: pointer;

- 	padding: 6px;

- 	text-decoration: none;

- 	font-size: 14px;

- 	border: 1px solid transparent;

- }

- 

- .uls-compact .uls-title-region a:hover {

- 	color: #252525;

- 	background: #F0F0F0;

- 	border: 1px solid #DDD;

- 	border-radius: 3px;

- }

- 

- .uls-compact .uls-title-region a:before {

- 	display: inline-block;

- 	width: 0;

- 	height: 0;

- 	border-right: 4px solid #777;

- 	border-top: 4px solid transparent;

- 	border-bottom: 4px solid transparent;

- 	content: "";

- 	margin: 0 6px 0 0;

- }

@@ -1,260 +0,0 @@ 

- .uls-trigger {

- 	/* @embed */

- 	background: transparent url('/static/images/icon-language.png') no-repeat scroll left center;

- 	/* @embed */

- 	background-image: -webkit-linear-gradient(transparent, transparent), url('/static/images/icon-language.svg');

- 	/* @embed */

- 	background-image: linear-gradient(transparent, transparent), url('/static/images/icon-language.svg');

- 	padding-left: 30px;

- }

- 

- .uls-menu {

- 	position: absolute;

- 	z-index: 1000;

- 	display: none;

- 	margin-top: 1px;

- 	/* Styling */

- 	background-color: #ffffff;

- 	border: 1px solid #ccc;

- 	border: 1px solid rgba(0, 0, 0, 0.2);

- 	border-radius: 5px;

- 	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

- 	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

- 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

- 	-webkit-background-clip: padding-box;

- 	-moz-background-clip: padding;

- 	background-clip: padding-box;

- }

- 

- .uls-wide {

- 	min-width: 715px;

- 	width: 45%;

- }

- 

- .uls-title-region a {

- 	padding-left: 15px;

- }

- 

- .uls-menu .uls-title {

- 	font-weight: normal;

- 	border: none;

- 	padding-top: 1.25em;

- 	padding-left: 15px;

- 	padding-bottom: 3px;

- 	font-size: 18pt;

- 	line-height: 1.25em;

- 	color: #555;

- }

- 

- .uls-menu .uls-no-results-found-title {

- 	font-size: 16pt;

- 	font-weight: bold;

- 	line-height: 1.5em;

- 	padding-left: 6px;

- 	padding-top: 10px;

- 	margin-top: 0;

- 	margin-bottom: 15px;

- 	border-bottom: none;

- 	color: #555;

- }

- 

- .uls-menu .uls-lcd-region-section .uls-lcd-region-title {

- 	color: #777;

- 	font-size: 14pt;

- 	font-weight: lighter;

- 	line-height: 1.5em;

- 	padding-left: 0;

- 	margin-top: 0;

- 	margin-bottom: 10px;

- 	border-bottom: none;

- }

- 

- .uls-worldmap {

- 	/* @embed */

- 	background: transparent url('/static/images/world_map.png') no-repeat scroll right top;

- 	/* @embed */

- 	background-image: -webkit-linear-gradient(transparent, transparent), url('/static/images/world_map.svg');

- 	/* @embed */

- 	background-image: linear-gradient(transparent, transparent), url('/static/images/world_map.svg');

- 	background-size: 100%;

- }

- 

- div.uls-region {

- 	cursor: pointer;

- 	padding: 0;

- 	margin: 0;

- 	height: 120px;

- 	border-bottom-color: transparent;

- 	border-bottom-style: solid;

- 	border-bottom-width: 2px;

- }

- 

- .uls-worldmap .uls-region { /* The map doesn't flip */

- 	/* @noflip */

- 	float: left;

- }

- 

- .uls-region a {

- 	bottom: 2px;

- 	left: 2px;

- 	padding: 0;

- 	position: absolute;

- 	font-size: 13px;

- 	line-height: 1.2em;

- 	text-decoration: none;

- 	overflow: hidden;

- 	text-overflow: ellipsis;

- 	width: 99%;

- }

- 

- .uls-region:hover {

- 	/*Cross-browser background transparency*/

- 	background: #3366bb;

- 	background: rgba(51, 102, 187, 0.1);

- 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb );

- 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";

- }

- 

- .uls-map-block .active {

- 	border-bottom-color: #3366bb;

- 	border-bottom-style: solid;

- }

- 

- .uls-menu .row .uls-map-block {

- 	top: 1px;

- 	margin-right: 0;

- 	padding-right: 0;

- 	float: right;

- 	overflow: hidden;

- 	opacity: 0.7;

- 	-moz-transition: opacity 0.2s linear;

- 	-o-transition: opacity 0.2s linear;

- 	-webkit-transition: opacity 0.2s linear;

- 	transition: opacity 0.2s linear;

- }

- 

- .uls-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;

- }

- 

- .uls-menu .uls-map-block:hover,

- .uls-menu .uls-map-block:hover a {

- 	opacity: 1;

- 	color: #333;

- }

- 

- .uls-map-block .uls-region-1 {

- 	border-color: transparent;

- }

- 

- .uls-map-block:hover .active {

- 	border-color: #3366bb;

- }

- 

- .uls-map-block .active a {

- 	font-weight: bold;

- }

- 

- .uls-icon-close {

- 	/* @embed */

- 	background: transparent url('/static/images/close.png') no-repeat scroll center center;

- 	/* @embed */

- 	background-image: -webkit-linear-gradient(transparent, transparent), url('/static/images/close.svg');

- 	/* @embed */

- 	background-image: linear-gradient(transparent, transparent), url('/static/images/close.svg');

- 	float: right;

- 	padding: 15px;

- 	cursor: pointer;

- }

- 

- .uls-menu .uls-languagefilter {

- 	background-color: transparent;

- 	border: 1px solid #c9c9c9;

- 	border-radius: 2px 2px 2px 2px;

- 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;

- 	color: #333;

- 	display: block;

- 	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;

- }

- 

- .uls-menu .uls-languagefilter:focus {

- 	border: 1px solid #3366bb;

- }

- 

- .uls-menu .uls-search {

- 	position: relative;

- 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');

- 	background: #f8f8f8;

- 	background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));

- 	background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);

- 	background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);

- 	background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);

- 	background: linear-gradient(#F0F0F0, #FBFBFB);

- 	border-top-color: #AAA;

- 	border-top-style: solid;

- 	border-top-width: 1px;

- 	padding: 0.8em 0;

- 	border-bottom-width: 1px;

- 	border-bottom-style: solid;

- 	border-bottom-color: #DDD;

- }

- 

- .uls-menu .uls-search-label {

- 	/* @embed */

- 	background: transparent url('/static/images/search.png') no-repeat scroll right center;

- 	/* @embed */

- 	background-image: -webkit-linear-gradient(transparent, transparent), url('/static/images/search.svg');

- 	/* @embed */

- 	background-image: linear-gradient(transparent, transparent), url('/static/images/search.svg');

- 	background-size: 30px;

- 	height: 32px;

- 	width: 32px;

- 	float: right;

- }

- 

- .uls-menu .uls-languagefilter-clear {

- 	/* @embed */

- 	background: transparent url('/static/images/clear.png') no-repeat scroll left center;

- 	/* @embed */

- 	background-image: -webkit-linear-gradient(transparent, transparent), url('/static/images/clear.svg');

- 	/* @embed */

- 	background-image: linear-gradient(transparent, transparent), url('/static/images/clear.svg');

- 	cursor: pointer;

- 	height: 32px;

- 	position: absolute;

- 	width: 32px;

- 	margin-left: -32px;

- }

- 

- .uls-menu .uls-filterinput {

- 	position: absolute;

- 	top: 0;

- 	left: 0;

- 	font-size: 14px;

- 	height: 32px;

- 	width: 100%;

- 	text-align: left;

- }

- 

- .uls-menu .uls-filtersuggestion {

- 	padding: 6px;

- 	background-color: white;

- 	color: #888;

- 	border: 1px transparent;

- 	border-radius: 2px 2px 2px 2px;

- 	box-shadow: 0 1px 2px transparent inset;

- 	left: 1px;

- }

- 

- .uls-menu .uls-search-input-block {

- 	position: relative;

- }

@@ -1,315 +0,0 @@ 

- /* Generated using Foundation http://foundation.zurb.com/docs/grid.php */

- /* Global Reset & Standards ---------------------- */

- .grid * {

- 	-webkit-box-sizing: border-box;

- 	-moz-box-sizing: border-box;

- 	box-sizing: border-box;

- }

- 

- /* Misc ---------------------- */

- .grid .left {

- 	float: left;

- }

- 

- .grid .right {

- 	float: right;

- }

- 

- .grid .text-left {

- 	text-align: left;

- }

- 

- .grid .text-right {

- 	text-align: right;

- }

- 

- .grid .text-center {

- 	text-align: center;

- }

- 

- .grid .hide {

- 	display: none;

- }

- 

- .grid .highlight {

- 	background: #ffff99;

- }

- 

- /* The Grid ---------------------- */

- .grid .row {

- 	width: 100%;

- 	max-width: none;

- 	min-width: 600px;

- 	margin: 0 auto;

- }

- 

- .grid .row .row {

- 	width: auto;

- 	max-width: none;

- 	min-width: 0;

- 	margin: 0 -5px;

- }

- 

- .grid .row.collapse .column,

- .grid .row.collapse .columns {

- 	padding: 0;

- }

- 

- .grid .row .row {

- 	width: auto;

- 	max-width: none;

- 	min-width: 0;

- 	margin: 0 -5px;

- }

- 

- .grid .row .row.collapse {

- 	margin: 0;

- }

- 

- .grid .column, .grid .columns {

- 	float: left;

- 	min-height: 1px;

- 	padding: 0 5px;

- 	position: relative;

- }

- 

- .grid .column.centered, .grid .columns.centered {

- 	float: none;

- 	margin: 0 auto;

- }

- 

- .grid .row .one {

- 	width: 8.333%;

- }

- 

- .grid .row .two {

- 	width: 16.667%;

- }

- 

- .grid .row .three {

- 	width: 25%;

- }

- 

- .grid .row .four {

- 	width: 33.333%;

- }

- 

- .grid .row .five {

- 	width: 41.667%;

- }

- 

- .grid .row .six {

- 	width: 50%;

- }

- 

- .grid .row .seven {

- 	width: 58.333%;

- }

- 

- .grid .row .eight {

- 	width: 66.667%;

- }

- 

- .grid .row .nine {

- 	width: 75%;

- }

- 

- .grid .row .ten {

- 	width: 83.333%;

- }

- 

- .grid .row .eleven {

- 	width: 91.667%;

- }

- 

- .grid .row .twelve {

- 	width: 100%;

- }

- 

- .grid .row .offset-by-one {

- 	margin-left: 8.333%;

- }

- 

- .grid .row .offset-by-two {

- 	margin-left: 16.667%;

- }

- 

- .grid .row .offset-by-three {

- 	margin-left: 25%;

- }

- 

- .grid .row .offset-by-four {

- 	margin-left: 33.333%;

- }

- 

- .grid .row .offset-by-five {

- 	margin-left: 41.667%;

- }

- 

- .grid .row .offset-by-six {

- 	margin-left: 50%;

- }

- 

- .grid .row .offset-by-seven {

- 	margin-left: 58.333%;

- }

- 

- .grid .row .offset-by-eight {

- 	margin-left: 66.667%;

- }

- 

- .grid .row .offset-by-nine {

- 	margin-left: 75%;

- }

- 

- .grid .row .offset-by-ten {

- 	margin-left: 83.333%;

- }

- 

- .grid .push-two {

- 	left: 16.667%;

- }

- 

- .grid .pull-two {

- 	right: 16.667%;

- }

- 

- .grid .push-three {

- 	left: 25%;

- }

- 

- .grid .pull-three {

- 	right: 25%;

- }

- 

- .grid .push-four {

- 	left: 33.333%;

- }

- 

- .grid .pull-four {

- 	right: 33.333%;

- }

- 

- .grid .push-five {

- 	left: 41.667%;

- }

- 

- .grid .pull-five {

- 	right: 41.667%;

- }

- 

- .grid .push-six {

- 	left: 50%;

- }

- 

- .grid .pull-six {

- 	right: 50%;

- }

- 

- .grid .push-seven {

- 	left: 58.333%;

- }

- 

- .grid .pull-seven {

- 	right: 58.333%;

- }

- 

- .grid .push-eight {

- 	left: 66.667%;

- }

- 

- .grid .pull-eight {

- 	right: 66.667%;

- }

- 

- .grid .push-nine {

- 	left: 75%;

- }

- 

- .grid .pull-nine {

- 	right: 75%;

- }

- 

- .grid .push-ten {

- 	left: 83.333%;

- }

- 

- .grid .pull-ten {

- 	right: 83.333%;

- }

- 

- /* Nicolas Gallagher's micro clearfix */

- .grid .row {

- 	*zoom: 1;

- }

- 

- .grid .row:before, .grid .row:after {

- 	content: "";

- 	display: table;

- }

- 

- .grid .row:after {

- 	clear: both;

- }

- 

- /* Block Grids ---------------------- */

- /* These are 2-up, 3-up, 4-up and 5-up ULs, suited

-  for repeating blocks of content. Add 'mobile' to

-  them to switch them just like the layout grid

-  (one item per line) on phones

- 

-  For IE7/8 compatibility block-grid items need to be

-  the same height. You can optionally uncomment the

-  lines below to support arbitrary height, but know

-  that IE7/8 do not support :nth-child.

-  -------------------------------------------------- */

- .grid .block-grid {

- 	display: block;

- 	overflow: hidden;

- 	padding: 0;

- }

- 

- .grid .block-grid > li {

- 	display: block;

- 	height: auto;

- 	float: left;

- }

- 

- .grid .block-grid.two-up {

- 	margin: 0 -15px;

- }

- 

- .grid .block-grid.two-up > li {

- 	width: 50%;

- 	padding: 0 15px 15px;

- }

- 

- /* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */

- .grid .block-grid.three-up {

- 	margin: 0 -12px;

- }

- 

- .grid .block-grid.three-up > li {

- 	width: 33.33%;

- 	padding: 0 12px 12px;

- }

- 

- /* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */

- .grid .block-grid.four-up {

- 	margin: 0 -10px;

- }

- 

- .grid .block-grid.four-up > li {

- 	width: 25%;

- 	padding: 0 10px 10px;

- }

- 

- /* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */

- .grid .block-grid.five-up {

- 	margin: 0 -8px;

- }

- 

- .grid .block-grid.five-up > li {

- 	width: 20%;

- 	padding: 0 8px 8px;

- }

@@ -1,86 +0,0 @@ 

- .uls-lcd-region-section ul li:hover {

- 	background-color: #eaeff7;

- }

- 

- .uls-lcd-region-section {

- 	margin-top: 10px;

- }

- 

- /* Language list */

- .uls-language-list {

- 	height: 17em;

- 	overflow: auto;

- 	width: auto;

- }

- 

- .uls-language-block ul {

- 	margin: 0 0 1.5em;

- }

- 

- .uls-language-list ul li {

- 	cursor: pointer;

- 	font-weight: normal;

- 	overflow: hidden;

- 	white-space: nowrap;

- 

- 	/*

- 	 * Some languages have long names for various reasons and we still want

- 	 * them to appear on one line.

- 	 * To make it work correctly, the directionality must be set correctly

- 	 * on the item level.

- 	 */

- 	text-overflow: ellipsis;

- 

- 	/*

- 	 * The directionality (ltr/rtl) for each list item is set dynamically

- 	 * as HTML attributes in JavaScript. Setting directionality also applies

- 	 * alignment, but a list with mixed alignment is hard to read.

- 	 * All items are therefore explicitly aligned to the left, including names

- 	 * of right-to-left languages in left-to-right environment and vice versa.

- 	 * As long as the directionality of the item is set correctly, the text

- 	 * is readable.

- 	 */

- 	text-align: left;

- 

- 	/*

- 	 * We don't want any visible bullets in this list.

- 	 */

- 	list-style-image: none;

- 	list-style-type: none;

- }

- 

- .uls-language-list strong {

- 	text-decoration: underline;

- }

- 

- .uls-language-list a {

- 	font-weight: normal;

- 	text-decoration: none;

- 	color: #3366bb;

- 	font-size: 14px;

- 	line-height: 1.6em;

- }

- 

- .uls-language-block {

- 	width: 100%;

- }

- 

- .uls-no-results-view {

- 	color: #555;

- 	height: 100%;

- }

- 

- .uls-no-found-more {

- 	font-size: 0.9em;

- 	background: #F8F8F8;

- 	width: 100%;

- 	margin-top: 1.6em;

- 	line-height: 1.6em;

- 	position: absolute;

- 	bottom: 0;

- 	left: 0;

- }

- 

- .uls-no-found-more a {

- 	cursor: pointer;

- }

@@ -1,319 +0,0 @@ 

- @media only screen and (max-width: 767px) {

- 

- 	.uls-mobile.uls-menu {

- 		width: 95%;

- 		left: 2.5%;

- 	}

- 

- 	.uls-mobile .uls-language-list {

- 		-webkit-overflow-scrolling: touch;

- 	}

- 

- 	.uls-mobile .uls-language-block {

- 		padding-left: 15px !important;

- 	}

- 

- 	.uls-mobile .uls-language-block ul {

- 		min-height: 14em;

- 	}

- 

- 	.uls-mobile .uls-language-block a {

- 		font-size: 16px;

- 		line-height: 1.7em;

- 	}

- 

- 	.uls-mobile div.uls-region {

- 		width: 33% !important;

- 		float: left !important;

- 	}

- 

- 	.uls-mobile .uls-map-block a,

- 	.uls-mobile .uls-map-block {

- 		opacity: 1 !important;

- 	}

- 

- 	.uls-mobile .row {

- 		width: auto;

- 		min-width: 0;

- 		margin-left: 0;

- 		margin-right: 0;

- 	}

- 

- 	.uls-mobile .column,

- 	.uls-mobile .columns {

- 		width: auto !important;

- 		float: none;

- 	}

- 

- 	.uls-mobile .column:last-child,

- 	.uls-mobile .columns:last-child {

- 		float: none;

- 	}

- 

- 	.uls-mobile [class*="column"] + [class*="column"]:last-child {

- 		float: none;

- 	}

- 

- 	.uls-mobile .column:before,

- 	.uls-mobile .uls-mobile .columns:before,

- 	.uls-mobile .column:after,

- 	.columns:after {

- 		content: "";

- 		display: table;

- 	}

- 

- 	.uls-mobile .column:after,

- 	.uls-mobile .columns:after {

- 		clear: both;

- 	}

- 

- 	.uls-mobile .offset-by-one,

- 	.uls-mobile .offset-by-two,

- 	.uls-mobile .offset-by-three,

- 	.uls-mobile .offset-by-four,

- 	.uls-mobile .offset-by-five,

- 	.uls-mobile .offset-by-six,

- 	.uls-mobile .offset-by-seven,

- 	.uls-mobile .offset-by-eight,

- 	.uls-mobile .offset-by-nine,

- 	.uls-mobile .offset-by-ten {

- 		margin-left: 0 !important;

- 	}

- 

- 	.uls-mobile .push-two,

- 	.uls-mobile .push-three,

- 	.uls-mobile .push-four,

- 	.uls-mobile .push-five,

- 	.uls-mobile .push-six,

- 	.uls-mobile .push-seven,

- 	.uls-mobile .push-eight,

- 	.uls-mobile .push-nine,

- 	.uls-mobile .push-ten {

- 		left: auto;

- 	}

- 

- 	.uls-mobile .pull-two,

- 	.uls-mobile .pull-three,

- 	.uls-mobile .pull-four,

- 	.uls-mobile .pull-five,

- 	.uls-mobile .pull-six,

- 	.uls-mobile .pull-seven,

- 	.uls-mobile .pull-eight,

- 	.uls-mobile .pull-nine,

- 	.uls-mobile .pull-ten {

- 		right: auto;

- 	}

- 

- 	/* Mobile 4-column Grid */

- 	.uls-mobile .row .mobile-one {

- 		width: 25% !important;

- 		float: left;

- 		padding: 0 4px;

- 	}

- 

- 	.uls-mobile .row .mobile-one:last-child {

- 		float: right;

- 	}

- 

- 	.uls-mobile .row.collapse .mobile-one {

- 		padding: 0;

- 	}

- 

- 	.uls-mobile .row .mobile-two {

- 		width: 50% !important;

- 		float: left;

- 		padding: 0 4px;

- 	}

- 

- 	.uls-mobile .row .mobile-two:last-child {

- 		float: right;

- 	}

- 

- 	.uls-mobile .row.collapse .mobile-two {

- 		padding: 0;

- 	}

- 

- 	.uls-mobile .row .mobile-three {

- 		width: 75% !important;

- 		float: left;

- 		padding: 0 4px;

- 	}

- 

- 	.uls-mobile .row .mobile-three:last-child {

- 		float: right;

- 	}

- 

- 	.uls-mobile .row.collapse .mobile-three {

- 		padding: 0;

- 	}

- 

- 	.uls-mobile .row .mobile-four {

- 		width: 100% !important;

- 		float: left;

- 		padding: 0 4px;

- 	}

- 

- 	.uls-mobile .row .mobile-four:last-child {

- 		float: right;

- 	}

- 

- 	.uls-mobile .row.collapse .mobile-four {

- 		padding: 0;

- 	}

- 

- 	.uls-mobile .push-one-mobile {

- 		left: 25%;

- 	}

- 

- 	.uls-mobile .pull-one-mobile {

- 		right: 25%;

- 	}

- 

- 	.uls-mobile .push-two-mobile {

- 		left: 50%;

- 	}

- 

- 	.uls-mobile .pull-two-mobile {

- 		right: 50%;

- 	}

- 

- 	.uls-mobile .push-three-mobile {

- 		left: 75%;

- 	}

- 

- 	.uls-mobile .pull-three-mobile {

- 		right: 75%;

- 	}

- }

- 

- /* Visibility Classes ---------------------- */

- /* Standard (large) display targeting */

- .uls-mobile .show-for-small,

- .uls-mobile .show-for-medium,

- .uls-mobile .show-for-medium-down,

- .uls-mobile .hide-for-large,

- .uls-mobile .hide-for-large-up,

- .uls-mobile .show-for-xlarge {

- 	display: none !important;

- }

- 

- .uls-mobile .hide-for-xlarge,

- .uls-mobile .show-for-large,

- .uls-mobile .show-for-large-up,

- .uls-mobile .hide-for-small,

- .uls-mobile .hide-for-medium,

- .uls-mobile .hide-for-medium-down {

- 	display: block !important;

- }

- 

- /* Very large display targeting */

- @media only screen and (min-width: 1441px) {

- 

- 	.uls-mobile .hide-for-small,

- 	.uls-mobile .hide-for-medium,

- 	.uls-mobile .hide-for-medium-down,

- 	.hide-for-large, .show-for-large-up,

- 	.show-for-xlarge {

- 		display: block !important;

- 	}

- 

- 	.show-for-small,

- 	.uls-mobile .show-for-medium,

- 	.uls-mobile .show-for-medium-down,

- 	.uls-mobile .show-for-large,

- 	.uls-mobile .hide-for-large-up,

- 	.uls-mobile .hide-for-xlarge {

- 		display: none !important;

- 	}

- }

- /* Medium display targeting */

- @media only screen and (max-width: 1279px) and (min-width: 768px) {

- 

- 	.uls-mobile .hide-for-small,

- 	.uls-mobile .show-for-medium,

- 	.uls-mobile .show-for-medium-down,

- 	.uls-mobile .hide-for-large,

- 	.uls-mobile .hide-for-large-up,

- 	.uls-mobile .hide-for-xlarge {

- 		display: block !important;

- 	}

- 

- 	.uls-mobile .show-for-small,

- 	.uls-mobile .hide-for-medium,

- 	.uls-mobile .hide-for-medium-down,

- 	.uls-mobile .show-for-large,

- 	.uls-mobile .show-for-large-up,

- 	.uls-mobile .show-for-xlarge {

- 		display: none !important;

- 	}

- }

- /* Small display targeting */

- @media only screen and (max-width: 767px) {

- 

- 	.uls-mobile .show-for-small,

- 	.uls-mobile .hide-for-medium,

- 	.uls-mobile .show-for-medium-down,

- 	.uls-mobile .hide-for-large,

- 	.uls-mobile .hide-for-large-up,

- 	.uls-mobile .hide-for-xlarge {

- 		display: block !important;

- 	}

- 	.uls-mobile .hide-for-small,

- 	.uls-mobile .show-for-medium,

- 	.uls-mobile .hide-for-medium-down,

- 	.uls-mobile .show-for-large,

- 	.uls-mobile .show-for-large-up,

- 	.uls-mobile .show-for-xlarge {

- 		display: none !important;

- 	}

- }

- 

- /* Orientation targeting */

- .uls-mobile .show-for-landscape,

- .uls-mobile .hide-for-portrait {

- 	display: block !important;

- }

- 

- .uls-mobile .hide-for-landscape,

- .uls-mobile .show-for-portrait {

- 	display: none !important;

- }

- 

- @media screen and (orientation: landscape) {

- 	.uls-mobile .show-for-landscape,

- 	.uls-mobile .hide-for-portrait {

- 		display: block !important;

- 	}

- 	.uls-mobile .hide-for-landscape,

- 	.uls-mobile .show-for-portrait {

- 		display: none !important;

- 	}

- }

- 

- @media screen and (orientation: portrait) {

- 	.uls-mobile .show-for-portrait,

- 	.uls-mobile .hide-for-landscape {

- 		display: block !important;

- 	}

- 	.uls-mobile .hide-for-portrait,

- 	.uls-mobile .show-for-landscape {

- 		display: none !important;

- 	}

- }

- 

- /* Touch-enabled device targeting */

- .uls-mobile .show-for-touch {

- 	display: none !important;

- }

- 

- .uls-mobile .hide-for-touch {

- 	display: block !important;

- }

- 

- .uls-mobile .touch .show-for-touch {

- 	display: block !important;

- }

- 

- .uls-mobile .touch .hide-for-touch {

- 	display: none !important;

- }

@@ -1,444 +0,0 @@ 

- /**

-  * Universal Language Selector

-  * ULS core component.

-  *

-  * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,

-  * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other

-  * contributors. See CREDITS for a list.

-  *

-  * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't

-  * have to do anything special to choose one license or the other and you don't

-  * have to notify anyone which license you are using. You are free to use

-  * UniversalLanguageSelector in commercial projects as long as the copyright

-  * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.

-  *

-  * @file

-  * @ingroup Extensions

-  * @licence GNU General Public Licence 2.0 or later

-  * @licence MIT License

-  */

- 

- ( function ( $ ) {

- 	'use strict';

- 

- 	var template, ULS;

- 

- 	// Region numbers in id attributes also appear in the langdb.

- 	/*jshint multistr:true */

- 	template = '<div class="grid uls-menu uls-wide"> \

- 			<div class="row"> \

- 				<span id="uls-close" class="uls-icon-close"></span> \

- 			</div> \

- 			<div class="row"> \

- 				<div class="uls-title-region seven columns">\

- 					<h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\

- 				</div>\

- 				<div class="five columns uls-map-block" id="uls-map-block">\

- 					<div class="row">\

- 						<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\

- 							<a data-i18n="uls-region-WW">Worldwide</a>\

- 						</div>\

- 						<div class="nine columns">\

- 							<div class="row uls-worldmap">\

- 								<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\

- 									<a data-i18n="uls-region-AM">America</a>\

- 								</div>\

- 								<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\

- 									<a><span data-i18n="uls-region-EU">Europe</span><br>\

- 									<span data-i18n="uls-region-ME">Middle East</span><br>\

- 									<span data-i18n="uls-region-AF">Africa</span></a>\

- 								</div>\

- 								<div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\

- 									<a><span data-i18n="uls-region-AS">Asia</span><br>\

- 									<span data-i18n="uls-region-PA">Pacific</span></a>\

- 								</div>\

- 							</div>\

- 						</div>\

- 					</div>\

- 				</div>\

- 			</div>\

- 			<div id="search" class="row uls-search"> \

- 				<div class="one column">\

- 					<span class="uls-search-label"></span>\

- 				</div>\

- 				<div class="ten columns">\

- 					<div id="uls-search-input-block" class="uls-search-input-block">\

- 						<input type="text" class="uls-filterinput uls-filtersuggestion" id="uls-filtersuggestion" disabled="true"\

- 							autocomplete="off" /> <input type="text" class="uls-filterinput uls-languagefilter" id="uls-languagefilter"\

- 							data-clear="uls-languagefilter-clear" data-suggestion="uls-filtersuggestion"\

- 							placeholder="Language search" autocomplete="off" />\

- 					</div>\

- 				</div>\

- 				<div class="one column">\

- 					<span id="uls-languagefilter-clear" class="uls-languagefilter-clear"></span>\

- 				</div>\

- 			</div>\

- 			<div class="row uls-language-list"></div>\

- 			<div class="row" id="uls-settings-block"></div>\

- 		</div>';

- 	/*jshint multistr:false */

- 

- 	/**

- 	 * ULS Public class definition

- 	 */

- 	ULS = function ( element, options ) {

- 		this.$element = $( element );

- 		this.options = $.extend( {}, $.fn.uls.defaults, options );

- 		this.$menu = $( template );

- 		this.languages = this.options.languages;

- 

- 		for ( var code in this.languages ) {

- 			if ( $.uls.data.languages[code] === undefined ) {

- 				// Language is unknown to ULS.

- 				delete this.languages[code];

- 			}

- 		}

- 

- 		this.left = this.options.left;

- 		this.top = this.options.top;

- 		this.shown = false;

- 		this.initialized = false;

- 

- 		this.$languageFilter = this.$menu.find( '#uls-languagefilter' );

- 		this.$regionFilters = this.$menu.find( '.uls-region' );

- 		this.$resultsView = this.$menu.find( 'div.uls-language-list' );

- 

- 		this.render();

- 		this.listen();

- 		this.ready();

- 	};

- 

- 	ULS.prototype = {

- 		constructor: ULS,

- 

- 		/**

- 		 * A "hook" that runs after the ULS constructor.

- 		 * At this point it is not guaranteed that the ULS has its dimensions

- 		 * and that the languages lists are initialized.

- 		 *

- 		 * To use it, pass a function as the onReady parameter

- 		 * in the options when initializing ULS.

- 		 */

- 		ready: function () {

- 			if ( this.options.onReady ) {

- 				this.options.onReady.call( this );

- 			}

- 		},

- 

- 		/**

- 		 * A "hook" that runs after the ULS panel becomes visible

- 		 * by using the show method.

- 		 *

- 		 * To use it, pass a function as the onVisible parameter

- 		 * in the options when initializing ULS.

- 		 */

- 		visible: function () {

- 			if ( this.options.onVisible ) {

- 				this.options.onVisible.call( this );

- 			}

- 		},

- 

- 		/**

- 		 * Calculate the position of ULS

- 		 * Returns an object with top and left properties.

- 		 * @returns {Object}

- 		 * position is set by setting also window height and margin

- 		 */

- 		position: function () {

- 			var pos = $.extend( {}, this.$element.offset(), {

- 				height: this.$element[0].offsetHeight

- 			} );

- 			return {

- 				top: this.top !== undefined ? this.top : pos.top - (447+10),

- 				left: this.left !== undefined ? this.left : '25%'

- 			};

- 		},

- 

- 		/**

- 		 * Show the ULS window

- 		 */

- 		show: function () {

- 			this.$menu.css( this.position() );

- 

- 			if ( this.options.compact ) {

- 				this.$menu.addClass( 'uls-compact' );

- 			}

- 

- 			if ( !this.initialized ) {

- 				$( 'body' ).prepend( this.$menu );

- 				this.i18n();

- 

- 				// Initialize with a full search.

- 				// This happens on first time click of uls trigger.

- 				this.defaultSearch();

- 

- 				this.initialized = true;

- 			}

- 

- 			// hide any other visible ULS

- 			$( '.uls-menu' ).hide();

- 

- 			this.$menu.show();

- 			this.$menu.scrollIntoView();

- 			this.shown = true;

- 

- 			if ( !this.isMobile() ) {

- 				this.$languageFilter.focus();

- 			}

- 

- 			this.visible();

- 		},

- 

- 		i18n: function () {

- 			if ( $.i18n ) {

- 				this.$menu.find( '[data-i18n]' ).i18n();

- 				this.$languageFilter.prop( 'placeholder', $.i18n( 'uls-search-placeholder' ) );

- 			}

- 		},

- 

- 		defaultSearch: function () {

- 			this.$resultsView.lcd( 'empty' );

- 

- 			this.$regionFilters.regionselector( 'show' );

- 		},

- 

- 		/**

- 		 * Hide the ULS window

- 		 */

- 		hide: function () {

- 			this.$menu.hide();

- 			this.shown = false;

- 		},

- 

- 		/**

- 		 * Render the UI elements.

- 		 * Does nothing by default. Can be used for customization.

- 		 */

- 		render: function () {

- 			// Rendering stuff here

- 		},

- 

- 		/**

- 		 * Callback for no results found context.

- 		 */

- 		noresults: function () {

- 			$( '.regionselector' ).removeClass( 'active' );

- 			this.$resultsView.lcd( 'noResults' );

- 		},

- 

- 		/**

- 		 * callback for results found context.

- 		 */

- 		success: function () {

- 			$( '.regionselector' ).removeClass( 'active' );

- 			this.$resultsView.show();

- 		},

- 

- 		/**

- 		 * Bind the UI elements with their event listeners

- 		 */

- 		listen: function () {

- 			var lcd,

- 				uls = this;

- 

- 			// Register all event listeners to the ULS here.

- 			this.$element.on( 'click', $.proxy( this.click, this ) );

- 

- 			this.$languageFilter.on( 'searchclear.uls', $.proxy( this.defaultSearch, this ) );

- 			this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );

- 			this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );

- 

- 			// Close when clicking on the close button

- 			this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) );

- 			// Don't do anything if pressing on empty space in the ULS

- 			this.$menu.on( 'click', function ( e ) {

- 				e.stopPropagation();

- 			} );

- 

- 			// Handle key press events on the menu

- 			this.$menu.on( 'keypress', $.proxy( this.keypress, this ) )

- 				.on( 'keyup', $.proxy( this.keyup, this ) );

- 

- 			if ( this.eventSupported( 'keydown' ) ) {

- 				this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );

- 			}

- 

- 			lcd = this.$resultsView.lcd( {

- 				languages: this.languages,

- 				quickList: this.options.quickList,

- 				clickhandler: $.proxy( this.select, this ),

- 				source: this.$languageFilter,

- 				showRegions: this.options.showRegions,

- 				languageDecorator: this.options.languageDecorator

- 			} ).data( 'lcd' );

- 

- 			this.$languageFilter.languagefilter( {

- 				$target: lcd,

- 				languages: this.languages,

- 				searchAPI: this.options.searchAPI,

- 				onSelect: $.proxy( this.select, this )

- 			} );

- 

- 			// Create region selectors, one per region

- 			this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {

- 				$target: lcd,

- 				languages: this.languages,

- 				success: function ( regionfilter ) {

- 					// Deactivate search filtering

- 					uls.$languageFilter.languagefilter( 'deactivate' );

- 

- 					// If it is the WW region, show the quicklist

- 					if ( regionfilter.regionGroup === 1 ) {

- 						lcd.quicklist();

- 					}

- 

- 					// Show 'results view' if we are in no results mode

- 					uls.success();

- 				},

- 				noresults: function () {

- 					uls.$languageFilter.languagefilter( 'clear' );

- 				}

- 			} );

- 

- 			$( 'html' ).click( $.proxy( this.cancel, this ) );

- 		},

- 

- 		/**

- 		 * On select handler for search results

- 		 * @param langCode

- 		 */

- 		select: function ( langCode ) {

- 			this.hide();

- 			this.$languageFilter.trigger( 'searchclear' );

- 			if ( this.options.onSelect ) {

- 				this.options.onSelect.call( this, langCode );

- 			}

- 		},

- 

- 		/**

- 		 * On cancel handler for the uls menu

- 		 */

- 		cancel: function () {

- 			this.hide();

- 

- 			if ( this.options.onCancel ) {

- 				this.options.onCancel.call( this );

- 			}

- 		},

- 

- 		keyup: function ( e ) {

- 			if ( !this.shown ) {

- 				return;

- 			}

- 

- 			if ( e.keyCode === 27 ) { // escape

- 				this.cancel();

- 				e.preventDefault();

- 				e.stopPropagation();

- 			}

- 		},

- 

- 		keypress: function ( e ) {

- 			if ( !this.shown ) {

- 				return;

- 			}

- 

- 			if ( e.keyCode === 27 ) { // escape

- 				this.cancel();

- 				e.preventDefault();

- 				e.stopPropagation();

- 			}

- 		},

- 

- 		click: function ( e ) {

- 			e.stopPropagation();

- 			e.preventDefault();

- 

- 			if ( this.shown ) {

- 				this.hide();

- 			} else {

- 				this.show();

- 			}

- 		},

- 

- 		eventSupported: function ( eventName ) {

- 			var isSupported = eventName in this.$menu;

- 

- 			if ( !isSupported ) {

- 				this.$element.setAttribute( eventName, 'return;' );

- 				isSupported = typeof this.$element[eventName] === 'function';

- 			}

- 

- 			return isSupported;

- 		},

- 

- 		isMobile: function () {

- 			return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ );

- 		}

- 	};

- 

- 	/* ULS PLUGIN DEFINITION

- 	 * =========================== */

- 

- 	$.fn.uls = function ( option ) {