Infinty Scroll und CSS angepasst
This commit is contained in:
Hilmer, Carsten
parent
a3b9c29577
commit
8d2aa126a3
@ -20,9 +20,13 @@ ionic plugin add cordova-plugin-file-transfer
|
||||
ionic plugin add https://github.com/an-rahulpandey/cordova-plugin-dbcopy.git
|
||||
|
||||
|
||||
Crosswlak
|
||||
Crosswalk
|
||||
--------------------
|
||||
ionic browser add crosswalk
|
||||
oder
|
||||
ionic plugin add cordova-plugin-crosswalk-webview
|
||||
|
||||
|
||||
JS-Libs
|
||||
----------------------
|
||||
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
md-input-container {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-list-thumb {
|
||||
padding: 2px 2px 2px 2px;
|
||||
height: 100px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
|
||||
.pokemontyp1 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #D50000;
|
||||
color: white;
|
||||
@ -18,17 +22,17 @@
|
||||
.pokemontyp1 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp2 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #C51162;
|
||||
color: white;
|
||||
@ -37,17 +41,17 @@
|
||||
.pokemontyp2 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp3 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #AA00FF;
|
||||
color: white;
|
||||
@ -56,17 +60,17 @@
|
||||
.pokemontyp3 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp4 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #6200EA;
|
||||
color: white;
|
||||
@ -75,17 +79,17 @@
|
||||
.pokemontyp4 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp5 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #304FFE;
|
||||
color: white;
|
||||
@ -94,17 +98,17 @@
|
||||
.pokemontyp5 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp6 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #2962FF;
|
||||
color: white;
|
||||
@ -113,17 +117,17 @@
|
||||
.pokemontyp6 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp7 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #0091EA;
|
||||
color: white;
|
||||
@ -132,17 +136,17 @@
|
||||
.pokemontyp7 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp8 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #00B8D4;
|
||||
color: white;
|
||||
@ -151,17 +155,17 @@
|
||||
.pokemontyp8 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp9 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #00BFA5;
|
||||
color: white;
|
||||
@ -170,17 +174,17 @@
|
||||
.pokemontyp9 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp10 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #1B5E20;
|
||||
color: white;
|
||||
@ -189,17 +193,17 @@
|
||||
.pokemontyp10 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp11 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #33691E;
|
||||
color: white;
|
||||
@ -208,17 +212,17 @@
|
||||
.pokemontyp11 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp12 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #827717;
|
||||
color: white;
|
||||
@ -227,17 +231,17 @@
|
||||
.pokemontyp12 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp13 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #F57F17;
|
||||
color: white;
|
||||
@ -246,17 +250,17 @@
|
||||
.pokemontyp13 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp14 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #FF6F00;
|
||||
color: white;
|
||||
@ -265,17 +269,17 @@
|
||||
.pokemontyp14 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp15 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #E65100;
|
||||
color: white;
|
||||
@ -284,17 +288,17 @@
|
||||
.pokemontyp15 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp16 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #BF360C;
|
||||
color: white;
|
||||
@ -303,17 +307,17 @@
|
||||
.pokemontyp16 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp17 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #3E2723;
|
||||
color: white;
|
||||
@ -322,17 +326,17 @@
|
||||
.pokemontyp17 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pokemontyp18 {
|
||||
display: inline-block;
|
||||
padding: 0 25px;
|
||||
height: 50px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
border-radius: 25px;
|
||||
background-color: #212121;
|
||||
color: white;
|
||||
@ -341,7 +345,7 @@
|
||||
.pokemontyp18 img {
|
||||
float: left;
|
||||
margin: 0 10px 0 -25px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -236,13 +236,13 @@ md-sidenav {
|
||||
text-align: center; }
|
||||
|
||||
.toolbar-medium {
|
||||
max-height: 160px !important;
|
||||
height: 160px !important;
|
||||
max-height: 55px !important;
|
||||
height: 55 !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
|
||||
.toolbar-medium div {
|
||||
padding: 26px 10px 10px 10px;
|
||||
padding: 10px 5px 5px 5px;
|
||||
text-align: center;
|
||||
height: inherit !important; }
|
||||
}
|
||||
.toolbar-medium h1 {
|
||||
color: white;
|
||||
font-size: 34px; }
|
||||
@ -253,7 +253,7 @@ md-sidenav {
|
||||
color: white;
|
||||
font-size: 28px !important; }
|
||||
.toolbar-medium md-input-container {
|
||||
margin: auto 20px auto 20px; }
|
||||
margin: auto 10px auto 10px; }
|
||||
.toolbar-medium md-input-container input {
|
||||
border-bottom-color: white;
|
||||
color: white; }
|
||||
@ -485,7 +485,7 @@ md-sidenav {
|
||||
text-overflow: ellipsis; }
|
||||
|
||||
#contract-list-content {
|
||||
margin-top: 164px; }
|
||||
margin-top: 84px; }
|
||||
#contract-list-content .contract-list-item {
|
||||
padding: 14px 5px 14px 5px; }
|
||||
#contract-list-content .contract-list-item .col-25.icon-user {
|
||||
|
||||
@ -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-->
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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-->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user