Browse Source

Improved country select modal

master
Igor Zhukov 10 years ago
parent
commit
575015c8b8
  1. 17
      app/css/app_mobile.css
  2. 12
      app/js/controllers.js
  3. 5
      app/js/directives.js
  4. 56
      app/partials/mobile/country_select_modal.html

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

12
app/js/controllers.js

@ -40,10 +40,18 @@ angular.module('myApp.controllers', [])
$scope.callPending = {}; $scope.callPending = {};
$scope.selectCountry = function () { $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({ var modal = $modal.open({
templateUrl: 'partials/country_select_modal.html', templateUrl: tUrl,
controller: 'CountrySelectModalController', controller: 'CountrySelectModalController',
windowClass: 'countries_modal_window' windowClass: className
}); });
modal.result.then(function (code) { modal.result.then(function (code) {

5
app/js/directives.js

@ -398,7 +398,10 @@ angular.module('myApp.directives', ['myApp.filters'])
function updateSizes () { function updateSizes () {
$(element).css({ $(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(); $(countriesWrap).nanoScroller();
} }

56
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>
Loading…
Cancel
Save