feature/comic-list — Mimic changes made for characters (optimizations…

… and ios bugfix on card bottom border).

app/character/_character-list.scss

@@ -12,26 +12,26 @@
         // Default css from ionic define a transform matrix which is useless in that case.
         transform: none;
     }
-    &__card{
+    &-card{
         // #perfmatters
         box-shadow: none;
-    }
-    &-card__cover{
-        background-color: #CCC;
-        background-size: cover;
-        background-position: center;
-        width: 100%;
-        height: 250px;
-        &--not-found{
-            background-image: url('../img/image-not-available.png');
+        &__cover{
+            background-color: #CCC;
+            background-size: cover;
+            background-position: center;
+            width: 100%;
+            height: 250px;
+            &--not-found{
+                background-image: url('../img/image-not-available.png');
+            }
+        }
+        &__footer{
+            border-bottom: 1px solid #CCC !important;
         }
-    }
-    &-card__footer{
-        border-bottom: 1px solid #CCC !important;
     }
 }
 .platform-ios.platform-cordova .characters{
-    &__footer{
+    &__show-more{
         // Bugfix iOS: margin-bottom is not respected.
         transform: translateY(-10px);
     }

app/character/character-list.jade

@@ -7,7 +7,7 @@ ion-view.characters(view-title='Characters')
                     input(type='search' placeholder='Name starts with…' name='name' ng-model='vm.filter'
                     spellcheck="false")
         .list
-            .card.characters__card(ng-repeat="character in vm.characters track by character.id")
+            .card.characters-card(ng-repeat="character in vm.characters track by character.id")
                 .item.item-image(ui-sref='app.character-detail({character:character})')
                     div.characters-card__cover(ng-if="character.thumbnailUrl" img-cache ic-bg="{{::character.thumbnailUrl}}")
                     div.characters-card__cover.characters-card__cover--not-found(ng-if="!character.thumbnailUrl")
@@ -16,5 +16,5 @@ ion-view.characters(view-title='Characters')
                     | {{::character.name}}
         .characters__footer
             ion-spinner.spinner-assertive(ng-if='vm.searching')
-            button.button.button-block.button-assertive(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
+            button.button.button-block.button-assertive.characters__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
                 | Show more

app/comic/_comic-detail.scss

@@ -0,0 +1,23 @@
+.comic{
+    &__content{
+        padding: $content-padding;
+    }
+    &__meta{
+        padding: $content-padding;
+    }
+    &__text{
+        background-color: black;
+        color: $light;
+        font-size: 1.1rem;
+        line-height: 1.8rem;
+        padding: $content-padding/2 0;
+        box-shadow: $content-padding 0 0 0 black, -$content-padding 0 0 0 black;
+    }
+    &__title{
+        font-size: 1.3rem;
+    }
+    &__background{
+        background-size: cover;
+        background-position: top center;
+    }
+}

app/comic/_comic-list.scss

@@ -6,16 +6,33 @@
         text-align: center;
         margin: $content-padding $content-padding $content-padding*2 $content-padding;
     }
-    &__item-cover{
-        background-color: #CCC;
-        object-fit: cover;
-        object-position: center;
+    &__search-bar{
+        // #perfmatters
+        // In order to not have a composite layer (the bar) inside another composite layer (the scroll area)
+        // Default css from ionic define a transform matrix which is useless in that case.
+        transform: none;
+    }
+    &-card{
+        // #perfmatters
+        box-shadow: none;
+        &__cover{
+            background-color: #CCC;
+            background-size: cover;
+            background-position: center;
+            width: 100%;
+            height: 250px;
+            &--not-found{
+                background-image: url('../img/image-not-available.png');
+            }
+        }
+        &__footer{
+            border-bottom: 1px solid #CCC !important;
+        }
     }
 }
 .platform-ios.platform-cordova .comics{
-    &__footer{
-        // Bugfix iOS
-        // margin-bottom is not respected.
+    &__show-more{
+        // Bugfix iOS: margin-bottom is not respected.
         transform: translateY(-10px);
     }
 }

app/comic/comic-list.controller.js

@@ -18,7 +18,7 @@
         vm.keep = keep;
         vm.search = search;
         vm.loadMore = loadMore;
-        vm.hasMoreData = hasMoreData;
+        vm.hasMoreData = false;
 
         activate();
 
@@ -36,20 +36,20 @@
         function search() {
             showSpinner();
             var promise = comicListService.findByName(vm.filter);
-            vm.comics = promise.$object;
+            vm.comics = [];
+            vm.hasMoreData = false;
             vm.offset = 0;
             $cordovaKeyboard.close();
             return promise
-                .then(clean)
+                .then(updateList)
+                .then(notify)
                 .catch(throwErr)
                 .finally(hideSpinner);
 
             ///////////
 
-            function clean(results) {
-                var meta = _.get(results, 'meta');
-                $log.info('Loaded', meta.count, '/', meta.total, 'comics which title contains', vm.filter);
-                $cordovaToast.showShortBottom(meta.total + ' results');
+            function notify() {
+                $cordovaToast.showShortBottom(vm.comics.meta.total + ' results');
             }
 
         }
@@ -69,24 +69,20 @@
                 .then(updateList)
                 .catch(throwErr)
                 .finally(hideSpinner);
-
-            ///////////
-
-            function updateList(results) {
-                var meta = _.get(results, 'meta');
-                $log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'comics which title contains', vm.filter);
-                vm.comics = _.concat(vm.comics, results);
-                vm.comics.meta = results.meta;
-            }
-
         }
 
-        function hasMoreData() {
-            var meta = _.get(vm, 'comics.meta');
-            return meta && (meta.count + meta.offset) < meta.total;
+        function updateList(results) {
+            var meta = _.get(results, 'meta');
+            $log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'comics which title starts with `' +
+                vm.filter + '`');
+            // Update list of comics
+            vm.comics = meta.offset === 0 ? results : _.concat(vm.comics, results);
+            // Update meta
+            meta = vm.comics.meta = results.meta;
+            // Update boolean to know instantly if there is more
+            vm.hasMoreData = meta && (meta.count + meta.offset) < meta.total;
         }
 
-
     }
 
 })();

app/comic/comic-list.jade

@@ -1,19 +1,20 @@
 ion-view.comics(view-title='Comics')
     ion-content
-        .bar.item-input-inset
+        .bar.item-input-inset.comics__search-bar
             form.comics__form(name='cmSearchForm' novalidate ng-submit='vm.search()' autocomplete="off")
                 label.item-input-wrapper
                     i.icon.ion-ios-search.placeholder-icon
-                    input(type='search' placeholder='Title starts with…' name='name'
-                    ng-model='vm.filter' spellcheck="false")
+                    input(type='search' placeholder='Title starts with…' name='name' ng-model='vm.filter'
+                    spellcheck="false")
         .list
-            .card(ng-repeat="comic in vm.comics track by comic.id")
+            .card.comics-card(ng-repeat="comic in vm.comics track by comic.id")
                 .item.item-image(ui-sref='app.comic-detail({comic:comic})')
-                    img.comics__item-cover(img-cache ic-src="{{::comic.getThumbnailUrl()}}" width="100%"
-                    height="250px")
-                .item.item-icon-right.assertive
-                    i.icon.ion-android-favorite-outline(ng-click='::vm.keep()')
+                    div.comics-card__cover(ng-if="comic.thumbnailUrl" img-cache ic-bg="{{::comic.thumbnailUrl}}")
+                    div.comics-card__cover.comics-card__cover--not-found(ng-if="!comic.thumbnailUrl")
+                .item.item-icon-right.assertive.comics-card__footer
+                    i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
                     | {{::comic.title}}
         .comics__footer
             ion-spinner.spinner-assertive(ng-if='vm.searching')
-            button.button.button-block.button-assertive(ng-click='vm.loadMore()' ng-show='vm.hasMoreData()') Show more
+            button.button.button-block.button-assertive.comics__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
+                | Show more

app/comic/comic-list.run.js

@@ -9,14 +9,15 @@
 
     function addNewMethodsToComics(Restangular) {
         Restangular.extendModel('comics', function (model) {
-            model.getThumbnailUrl = getThumbnailUrl;
+            model.thumbnailUrl = getThumbnailUrl();
             return model;
 
             /////////////
 
             function getThumbnailUrl() {
-                if(_.isEmpty(model.thumbnail)) return '';
-                return model.thumbnail.path + '.' + model.thumbnail.extension;
+                var tnl = model.thumbnail;
+                if(_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
+                return tnl.path + '.' + tnl.extension;
             }
         });
     }