(feat): various styling and functional changes

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.minds.mobile.dev" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.minds.mobile.dev" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Minds (2.0)</name>
     <description>The next gen Minds app</description>
     <author email="mark@minds.com" href="http://minds.com/mark">Minds Inc.</author>
@@ -23,6 +23,7 @@
     <preference name="DisallowOverscroll" value="true" />
     <preference name="android-minSdkVersion" value="16" />
     <preference name="BackupWebStorage" value="none" />
+    <preference name="loadUrlTimeoutValue" value="700000" />
 
     <!--
       Change these to configure how the splashscreen displays and fades in/out.

src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component, ViewChild } from "@angular/core";
 import { Nav } from 'ionic-angular';
 
-import { TabsComponent } from "./modules/tabs/tabs.component"
-import { LoginComponent } from "./modules/auth/login.component"
+import { TabsComponent } from "./modules/tabs/tabs.component";
+import { LoginComponent } from "./modules/auth/login.component";
+import { NewsfeedList } from "./modules/newsfeed/list.component";
 import { OAuth2 } from "./common/services/api/oauth2";
 
 @Component({
@@ -18,13 +19,13 @@ export class MindsApp {
   rootPage : any = LoginComponent;
 
   constructor(private oauth2 : OAuth2){
+    if(this.oauth2.hasAccessToken()){
+      this.rootPage = TabsComponent;
+    }
   }
 
   ngOnInit(){
-    if(this.oauth2.hasAccessToken()){
-      //this.nav.setRoot(LoginComponent);
-      this.rootPage = LoginComponent;
-    }
+
   }
 
   logout(){

src/app/app.module.ts

@@ -5,6 +5,8 @@ import { MindsApp } from './app.component';
 import { ApiModule } from './common/services/api.module';
 import { CacheModule } from './common/services/cache/cache.module';
 
+import { CommonModule } from './common/common.module';
+
 import { AuthModule } from './modules/auth/auth.module';
 import { TabsModule } from './modules/tabs/tabs.module';
 import { ChannelModule } from './modules/channel/channel.module';
@@ -25,10 +27,11 @@ import { routes } from "./app.routes";
       tabsPlacement: 'bottom',
       platforms: {
         android: {
-          tabsPlacement: 'top'
+          tabsPlacement: 'bottom'
         }
       }
     }),
+    CommonModule,
     ApiModule,
     CacheModule,
     AuthModule,

src/app/app.scss

@@ -2,7 +2,7 @@ $tabbar-md-background: #37474f;
 
 
 img{
-  background:#333;
+
 }
 
 

src/app/common/common.module.ts

@@ -0,0 +1,10 @@
+import { NgModule }     from '@angular/core';
+
+import { ImgFadeDirective } from './directives/img-fade.directive';
+import { DomainPipe } from './pipes/domain.pipe';
+
+@NgModule({
+  declarations: [ ImgFadeDirective, DomainPipe ],
+  exports: [ ImgFadeDirective, DomainPipe ]
+})
+export class CommonModule { }

src/app/common/directives/img-fade.directive.scss

@@ -0,0 +1,17 @@
+img[imgFade]{
+  -webkit-transition: -webkit-filter 1s ease-in;
+          transition: filter 1s ease-in;
+
+  background:#666;
+  -webkit-filter:
+    //blur(1px)
+    opacity(0%);
+
+  drop-shadow:0 0 3px #EEE;
+}
+
+img.m-imgFade--loaded{
+  -webkit-filter:
+    //blur(0)
+    opacity(100%);
+}

src/app/common/directives/img-fade.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[imgFade]'
+})
+
+export class ImgFadeDirective {
+
+  constructor(el: ElementRef) {
+
+    //el.nativeElement.cla = 0;
+    el.nativeElement.addEventListener('load', () => {
+      el.nativeElement.className += " m-imgFade--loaded";
+    });
+
+  }
+}

src/app/modules/auth/login.component.html

@@ -1,7 +1,7 @@
 
-<div class="login-header">
-   <div class="background-image background-image-2"></div>
-   <img src="assets/full_logo.png" class="login-logo"/>
+<div class="m-ionic-login--header login-header">
+   <div class="m-ionic-login--bg"></div>
+   <img src="assets/full_logo_white.png" class="m-ionic-login--logo"/>
 </div>
 
   <ion-list>

src/app/modules/auth/login.component.scss

@@ -0,0 +1,31 @@
+.m-auth-login-grid{
+  /*padding: 16;*/
+}
+
+.m-ionic-login--header{
+  text-align:center;
+  width:100%;
+  overflow: hidden;
+  position: relative;
+  max-height: 300px;
+
+}
+
+.m-ionic-login--bg{
+  position: absolute;
+	top: 0;
+	left: 0;
+	width: 110%;
+	height: 110%;
+	background: url('../assets/bg-1.jpeg') center 0;
+	background-size:100%;
+	z-index: -1;
+	margin: -12px;
+  -webkit-filter: brightness(60%);
+}
+
+.m-ionic-login--logo{
+  width:200px;
+  margin:50px 0;
+  background:transparent;
+}

src/app/modules/auth/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { NavController, LoadingController, AlertController } from 'ionic-angular';
 
 
 import { TabsComponent } from '../tabs/tabs.component';
@@ -14,7 +14,7 @@ import { OAuth2 } from '../../common/services/api/oauth2';
 
 export class LoginComponent {
 
-  constructor(private oauth2 : OAuth2, private nav : NavController){
+  constructor(private oauth2 : OAuth2, private nav : NavController, public loadingCtrl: LoadingController, private alertCtrl: AlertController){
   }
 
   ngOnInit(){
@@ -25,16 +25,23 @@ export class LoginComponent {
 
   login(username, password, e){
     e.preventDefault();
-    console.log('clicked login');
-    console.log('username: ', username.value);
-    console.log('password: ', password.value);
+
+    let loader = this.loadingCtrl.create({
+      content: "Please wait...",
+    });
+    loader.present();
+
     this.oauth2.login(username.value, password.value, (success) => {
-      console.log('login callback called');
-      console.log(success);
+      loader.dismiss();
       if(success){
         this.nav.push(TabsComponent);
       } else {
-        alert('Please try again');
+        let alert = this.alertCtrl.create({
+          title: 'Sorry!',
+          subTitle: "We could not log you in. Please check your credentials",
+          buttons: ['Try again']
+        });
+        alert.present();
       }
     });
     //this.routerExtensions.navigate(['/tab/newsfeed'], { clearHistory: true });

src/app/modules/buttons/buttons.scss

@@ -5,3 +5,13 @@
 .m-ionic-icon{
   font-size:20px;
 }
+
+
+minds-button-comment{
+  span{
+    margin-top: 4px;
+    margin-left: 8px;
+    font-weight: 600;
+    position: absolute;
+  }
+}

src/app/modules/channel/channel.component.html

@@ -14,7 +14,7 @@
          width="100%"
          [hidden]="banner.hide"
          height="225px"
-
+         imgFade
          >
      </div>
 
@@ -23,6 +23,7 @@
       [src]="'https://www.minds.com/icon/' + channel.guid + '/large'"
       width="150px"
       height="150px"
+      imgFade
       >
 
     <h1>  {{channel.name}} </h1>

src/app/modules/channel/channel.module.ts

@@ -5,6 +5,7 @@ import { Client } from '../../common/services/api/client';
 import { ChannelComponent } from './channel.component';
 import { ChannelFeedComponent } from './feed.component';
 import { NewsfeedModule } from '../newsfeed/newsfeed.module';
+import { CommonModule } from '../../common/common.module';
 
 @NgModule({
   /*imports: [
@@ -22,7 +23,7 @@ import { NewsfeedModule } from '../newsfeed/newsfeed.module';
   exports: [
     RouterModule
   ]*/
-  imports: [ IonicModule, NewsfeedModule ],
+  imports: [ IonicModule, NewsfeedModule, CommonModule ],
   providers: [ Client ],
   declarations: [ ChannelComponent, ChannelFeedComponent ],
   exports: [ ChannelComponent ],

src/app/modules/comments/list.component.html

@@ -12,13 +12,13 @@
 
 <ion-content>
 
-  <ion-refresher (ionRefresh)="refresh($event)">
-    <ion-refresher-content></ion-refresher-content>
+  <ion-refresher (ionRefresh)="loadEarlier($event)">
+    <ion-refresher-content *ngIf="inProgress"></ion-refresher-content>
   </ion-refresher>
 
-  <ion-list>
+  <ion-list class="m-ionic-comments--list">
 
-    <div *ngFor="let comment of comments" class="m-ionic-comments--list">
+    <div *ngFor="let comment of comments">
       <div class="m-ionic-comments--comment">
         <div class="m-ionic-avatar">
           <img [src]="'https://www.minds.com/icon/' +  comment.ownerObj.guid + '/medium'" class="mdl-shadow--2dp"/>
@@ -34,17 +34,16 @@
 	</ion-list>
 
 
-  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
-    <ion-infinite-scroll-content></ion-infinite-scroll-content>
-  </ion-infinite-scroll>
 
-  <div class="m-ionic-comments--composer">
-    <div class="m-ionic-avatar">
-      <img [src]="'https://www.minds.com/icon/' +  storage.get('user_guid') + '/medium'" class="mdl-shadow--2dp"/>
-    </div>
-    <div class="m-ionic-body">
-      <textarea placeholder="Write your comment..." rows="0"></textarea>
-    </div>
-  </div>
+
 
 </ion-content>
+
+<div class="m-ionic-comments--composer">
+  <div class="m-ionic-avatar">
+    <img [src]="'https://www.minds.com/icon/' +  storage.get('user_guid') + '/medium'" class="mdl-shadow--2dp"/>
+  </div>
+  <div class="m-ionic-body">
+    <textarea placeholder="Write your comment..." rows="0"></textarea>
+  </div>
+</div>

src/app/modules/comments/list.component.scss

@@ -1,3 +1,8 @@
+.m-ionic-comments--list{
+  margin-bottom:100px;
+}
+
+
 .m-ionic-comments--comment{
   display:flex;
   align-items:column;
@@ -23,6 +28,8 @@
   padding: 8px;
   width: 100%;
   border-top: 1px solid #EEE;
+  background:#FFF;
+  z-index:9999;
 
   .m-ionic-body{
     width: 100%;