Raataar/pokedex
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Infinty Scroll und CSS angepasst

Browse Source
This commit is contained in:
Hilmer, Carsten
2016-08-24 15:37:24 +02:00
parent a3b9c29577
commit 8d2aa126a3
8 changed files with 122 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
www/templates/application-storage/sqLite/html/contract-list.html
View File

@@ -5,7 +5,7 @@
<!--State name : app.contractlist-->
<!--URL : #app/contractlist-->
<ion-view view-title="">
<ion-view view-title="Pokedex Helper">
<!--right button on navigation bar-->
<ion-nav-buttons side="right">
<md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.contractsetting')"
@@ -15,21 +15,14 @@
</ion-nav-buttons> <!--end right button on navigation bar-->
<!--toolbar section-->
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
<md-toolbar class="bar-subheader">
<div>
<h1>Pokedex Helper</h1>
<h2>Dein Trainertool deluxe</h2>
<md-list-item>
<md-input-container md-no-float="" class="md-list-item-full-width">
<input ng-model="filterText" placeholder="Finde Pokemon...">
<input ng-model="filterText" placeholder="Finde Pokemon..." ng-minlength="3">
</md-input-container>
</md-list-item>
</div>
<a class="md-button md-accent md-fab fab-toolbar-medium"
ng-click="navigateTo('app.contractdetail',contract)"
aria-label="Add">
<i class="icon ion-plus"></i>
</a>
</md-toolbar><!--end toolbar section-->
<!--contract list section-->
@@ -39,23 +32,10 @@
<!--Below code it will disable animation to better performance-->
<div ng-if="!isAnimated" class="row contract-list-item"
ng-repeat="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname'">
ng-repeat="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname' | limitTo: numberOfItemsToDisplay">
<div class="col-25 icon-user">
<img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
</div>
<div class="col-50">
<h2>{{ pokemon.pokemonname }}</h2>
<h3>Nr.: {{ pokemon.pokedexidString }}</h3>
<div ng-if="pokemon.pokemontypa > 0" class="pokemontyp{{ pokemon.pokemontypa }}">
<img src="img/typbilder/{{ pokemon.pokemontypa }}.png" alt="PokemonTyp" width="96" height="96">
{{ pokemon.pokemontypaString }}
</div>
<div ng-if="pokemon.pokemontypb > 0" class="pokemontyp{{ pokemon.pokemontypb }}">
<img src="img/typbilder/{{ pokemon.pokemontypb }}.png" alt="PokemonTyp" width="96" height="96">
{{ pokemon.pokemontypbString }}
</div>
</div>
<div class="col-25 status-button">
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<p ng-click="$mdOpenMenu()">
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
@@ -114,6 +94,20 @@
</md-menu-content>
</md-menu>
</div>
<div class="col-75">
<h4>{{ pokemon.pokemonname }}</h4>
<h5>Nr.: {{ pokemon.pokedexidString }}</h5>
<div ng-if="pokemon.pokemontypa > 0" class="pokemontyp{{ pokemon.pokemontypa }}">
<img src="img/typbilder/{{ pokemon.pokemontypa }}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemon.pokemontypaString }}
</div>
<div ng-if="pokemon.pokemontypb > 0" class="pokemontyp{{ pokemon.pokemontypb }}">
<img src="img/typbilder/{{ pokemon.pokemontypb }}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemon.pokemontypbString }}
</div>
</div>
</div>
@@ -134,6 +128,9 @@
</md-list>
<!--end list section-->
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="pokemons.length > numberOfItemsToDisplay"></ion-infinite-scroll>
</ion-content><!--end contract list section-->
<!--loading progress-->

8
www/templates/application-storage/sqLite/js/controllers.js
View File

@@ -41,6 +41,7 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
jQuery('#contract-list-loading-progress').fadeIn(700);
}
}, 400);
$timeout(function () {
//Get all contracts.
@@ -53,6 +54,13 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
};// End initialForm.
$scope.numberOfItemsToDisplay = 20; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
if ($scope.pokemons.length > $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 20; // load number of more items
$scope.$broadcast('scroll.infiniteScrollComplete')
}
// getPokemonList is for get all contracts.
// By calling pokedexDB.all() service.
$scope.getPokemonList = function () {

2
www/templates/application-storage/sqLite/js/services.js
View File

@@ -59,7 +59,7 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
}
});
// Variable for prepare query statement to select all contracts.
var query = "SELECT * FROM tblPokemon order by POKEDEXID ASC";
var query = "SELECT * FROM tblPokemon";
// Execute query statement from query variable.
$cordovaSQLite.execute(db, query).then(function (res)

4
www/templates/menu/html/menu.html
View File

@@ -22,9 +22,9 @@
<img class="user-img" src="img/profileAvatar.jpg">
<p>
<span class="title">Ionic Material</span>
<span class="title">Pokedex Helper</span>
<br/>
<span class="sub-title">Material Design Application</span>
<span class="sub-title">Dein Trainertool deluxe</span>
</p>
</div><!--end menu header section-->
</div> <!--menu content section-->