Improved country select modal

app/css/app_mobile.css

@@ -1272,4 +1272,21 @@ a.mobile_modal_action .tg_checkbox_label {
 }
 
 
+.countries_modal_search {
+  padding: 3px 3px 12px;
+  margin: 0;
+  position: relative;
+}
+.countries_modal_col {
+  margin: 0 -9px;
+  max-height: none;
+}
+.countries_modal_members_list {
+  padding: 0 12px 0 12px;
+}
+.countries_scrollable_wrap a.countries_modal_country {
+  padding: 8px 8px;
+}
+
+
 }

app/js/controllers.js

@@ -40,10 +40,18 @@ angular.module('myApp.controllers', [])
     $scope.callPending = {};
 
     $scope.selectCountry = function () {
+      var tUrl = 'partials/country_select_modal.html',
+          className = 'countries_modal_window page_modal';
+
+      if (Config.Navigator.mobile) {
+        tUrl = 'partials/mobile/country_select_modal.html';
+        className += ' mobile_modal';
+      }
+
       var modal = $modal.open({
-        templateUrl: 'partials/country_select_modal.html',
+        templateUrl: tUrl,
         controller: 'CountrySelectModalController',
-        windowClass: 'countries_modal_window'
+        windowClass: className
       });
 
       modal.result.then(function (code) {

app/js/directives.js

@@ -398,7 +398,10 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       function updateSizes () {
         $(element).css({
-          height: $($window).height() - (panelWrap && panelWrap.offsetHeight || 0) - (searchWrap && searchWrap.offsetHeight || 0) - 200
+          height: $($window).height()
+                    - (panelWrap && panelWrap.offsetHeight || 0)
+                    - (searchWrap && searchWrap.offsetHeight || 0)
+                    - (Config.Navigator.mobile ? 46 + 18 : 200)
         });
         $(countriesWrap).nanoScroller();
       }

app/partials/mobile/country_select_modal.html

@@ -0,0 +1,56 @@
+<div class="countries_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>Country</h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body mobile_modal_body">
+
+    <div class="countries_modal_search">
+      <input class="form-control countries_modal_search_field" my-focused type="search" placeholder="Search" ng-model="search.query"/>
+      <a class="countries_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
+    </div>
+
+    <div class="countries_modal_col" my-countries-list>
+
+      <div class="countries_wrap nano" my-infinite-scroller>
+        <div class="countries_scrollable_wrap nano-content">
+
+          <ul class="countries_modal_members_list nav nav-pills nav-stacked">
+
+            <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
+              <a class="countries_modal_country" ng-click="$close(country.code)">
+                <span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
+                <span class="countries_modal_country_name" ng-bind="country.name"></span>
+              </a>
+            </li>
+
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>