Use multiselect.js [1] to create more user-friendly multi select lists using two panes.

Addresses issue #863.

[1] http://loudev.com/

weblate/html/base.html

@@ -27,6 +27,7 @@
   <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'font-linux/font-linux.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'chartist.min.css' %}" />
+  <link rel="stylesheet" type="text/css" href="{% static 'multi-select.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'style-bootstrap.css' %}" />
 {% endcompress %}
   <script src="{% url 'js-catalog' %}" type="text/javascript"></script>
@@ -35,6 +36,7 @@
   <script src="{% static 'js/jquery.cookie.js' %}" type="text/javascript"></script>
   <script src="{% static 'js/autosize.js' %}" type="text/javascript"></script>
   <script src="{% static 'js/jquery.sortElements.js' %}" type="text/javascript"></script>
+  <script src="{% static 'js/jquery.multi-select.js' %}" type="text/javascript"></script>
   <script src="{% static 'js/mousetrap.js' %}" type="text/javascript"></script>
   <script src="{% static 'js/mousetrap-global-bind.js' %}" type="text/javascript"></script>
   <script src="{% static 'js/chartist.js' %}" type="text/javascript"></script>

weblate/static/loader-bootstrap.js

@@ -745,4 +745,10 @@ $(function () {
         weekStart: django.formats.FIRST_DAY_OF_WEEK,
         titleFormat: "MM yyyy"
     };
+
+    /* Override all multiple selects */
+    $('select[multiple]').each(function () {
+        $(this).multiSelect({
+        });
+    });
 });

weblate/static/multi-select.min.css

+.ms-container{background:url(switch.png) 50% 50% no-repeat;width:100%}.ms-container:after{content:".";display:block;height:0;line-height:0;font-size:0;clear:both;min-height:0;visibility:hidden}.ms-container .ms-selectable,.ms-container .ms-selection{background:#fff;color:#555;float:left;width:45%}.ms-container .ms-selection{float:right}.ms-container .ms-list{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-ms-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;height:200px;padding:0;overflow-y:auto}.ms-container .ms-list.ms-focus{border-color:rgba(82,168,236,.8);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);outline:0;outline:dotted thin\9}.ms-container ul{margin:0;list-style-type:none;padding:0}.ms-container .ms-optgroup-container{width:100%}.ms-container .ms-optgroup-label{margin:0;padding:5px 0 0 5px;cursor:pointer;color:#999}.ms-container .ms-selectable li.ms-elem-selectable,.ms-container .ms-selection li.ms-elem-selection{border-bottom:1px #eee solid;padding:2px 10px;color:#555;font-size:14px}.ms-container .ms-selectable li.ms-hover,.ms-container .ms-selection li.ms-hover{cursor:pointer;color:#fff;text-decoration:none;background-color:#08c}.ms-container .ms-selectable li.disabled,.ms-container .ms-selection li.disabled{background-color:#eee;color:#aaa;cursor:text}
\ No newline at end of file