Classement

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ const routes: Routes = [
   { path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
   { path: 'offre-details', loadChildren: './pages/offre-details/offre-details.module#OffreDetailsPageModule' },
 
+
 ];
 
 @NgModule({

src/app/pages/classement/classement.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ClassementPage } from './classement.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ClassementPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ClassementPage]
+})
+export class ClassementPageModule {}

src/app/pages/classement/classement.page.scss

+ion-list {
+  ion-item {
+    margin: 3px 0;
+    ion-avatar {
+      width: 22vw;
+      height: 22vw;
+    }
+    ion-label {
+      h2 {
+        font-weight: bold;
+        font-family: Abel, Arial, Verdana, sans-serif;
+        text-transform: uppercase;
+      }
+      ion-chip.badge {
+        --background: var(--ion-color-secondary) !important;
+        --color: var(--ion-color-dark) !important;
+      }
+    }
+  }
+}
+ion-card {
+  font-family: Abel, Arial, Verdana, sans-serif;
+  ion-avatar {
+    width: 100%;
+    height: 100%;
+  }
+  ion-badge {
+    font-family: Abel, Arial, Verdana, sans-serif;
+  }
+  h2 {
+    font-weight: bold;
+    font-family: Abel, Arial, Verdana, sans-serif;
+    text-transform: uppercase;
+  }
+  p {
+    font-family: Abel, Arial, Verdana, sans-serif;
+  }
+}
+ion-card.mini {
+  font-family: Abel, Arial, Verdana, sans-serif;
+  ion-col:nth-child(2) {
+    padding: 4px 0 4px 4px;
+    ion-badge {
+      font-size: 11px;
+    }
+  }
+  ion-avatar {
+    width: 48px;
+    height: 48px;
+  }
+  ion-badge {
+    font-family: Abel, Arial, Verdana, sans-serif;
+    &.rank {
+      width: 100%;
+      height: 100%;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+    }
+  }
+  ion-chip {
+    padding: 7px;
+    height: 24px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  ion-text {
+    padding-left: 10px;
+  }
+  h2 {
+    font-weight: bold;
+    font-family: Abel, Arial, Verdana, sans-serif;
+    text-transform: uppercase;
+  }
+  p {
+    font-family: Abel, Arial, Verdana, sans-serif;
+  }
+}

src/app/pages/classement/classement.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassementPage } from './classement.page';
+
+describe('ClassementPage', () => {
+  let component: ClassementPage;
+  let fixture: ComponentFixture<ClassementPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClassementPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClassementPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/classement/classement.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-classement',
+  templateUrl: './classement.page.html',
+  styleUrls: ['./classement.page.scss'],
+})
+export class ClassementPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/dashboard/dashboard.page.html

@@ -77,7 +77,27 @@
         <ion-refresher-content></ion-refresher-content>
     </ion-refresher>
 
-    <!--list of trips-->
+    <ion-spinner *ngIf="!_TRIP.products"></ion-spinner>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button>
+            <ion-icon name="arrow-dropup"></ion-icon>
+        </ion-fab-button>
+
+        <ion-fab-list side="top">
+            <ion-fab-button routerLink="/app/hauts-faits" routerDirection="forward" routerLinkActive="active">
+                <ion-icon name="done-all"></ion-icon>
+            </ion-fab-button>
+            <ion-label>Quêtes</ion-label>
+
+            <ion-fab-button routerLink="/app/classement" routerDirection="forward" routerLinkActive="active">
+                <ion-icon name="trending-up"></ion-icon>
+            </ion-fab-button>
+            <ion-label>Classement</ion-label>
+
+        </ion-fab-list>
+    </ion-fab>
+
     <ion-card *ngFor="let trip of _TRIP.products | search : terms" (click)="viewDetail(trip.id)" tappable no-margin
         margin-bottom>
         <div class="img-spinner-wrap ion-text-center">

src/app/pages/dashboard/dashboard.page.scss

@@ -29,6 +29,31 @@ ion-header {
     }
   }
 }
+ion-fab-button {
+  margin-left: 110px;
+  overflow: visible;
+  position: relative;
+}
+ion-fab-list {
+  ion-label {
+    position: relative;
+    top: 40px;
+    right: 25px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    line-height: 24px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin-top: -30px;
+  }
+}
+ion-fab {
+  ion-badge {
+    position: relative;
+    top: 10px;
+    left: 110px;
+  }
+}
 .no-visibility {
   visibility: hidden;
 }

src/app/pages/hauts-faits/hauts-faits.page.html

@@ -3,7 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button defaultHref="/app/profil" text="Retour"></ion-back-button>
         </ion-buttons>
-        <ion-title>Hauts-faits</ion-title>
+        <!-- <ion-title class="ion-text-left">Progrès</ion-title> -->
+        <ion-chip slot="end" routerLink="/app/classement" routerDirection="forward" routerLinkActive="active">
+            <ion-icon name="trophy" color="secondary"></ion-icon>
+            <ion-label color="light">Classement</ion-label>
+        </ion-chip>
         <ion-chip slot="end">
             <ion-icon name="ribbon" color="secondary"></ion-icon>
             <ion-label color="light">60</ion-label>
@@ -12,11 +16,23 @@
 </ion-header>
 
 <ion-content color="light" padding-top>
-    <ion-card no-margin margin-horizontal margin-bottom padding-bottom>
+    <ion-text class="ion-text-center">
+        <h1 no-margin no-padding>Progrès</h1>
+    </ion-text>
+    <ion-grid>
+        <ion-row>
+            <ion-col size="2"></ion-col>
+            <ion-col>
+                <ion-img src="../../assets/img/ressources/checklist.png"></ion-img>
+            </ion-col>
+            <ion-col size="2"></ion-col>
+        </ion-row>
+    </ion-grid>
+    <!-- <ion-card no-margin margin-horizontal margin-bottom padding-bottom> -->
         <ion-list>
             <ion-list-header color="light">Connexion</ion-list-header>
             <ion-item lines="none" margin-top>
-                <ion-icon class="ach-icon" name="power" color="light" slot="start"></ion-icon>
+                <ion-icon class="ach-icon" name="checkmark-circle-outline" color="success" slot="start"></ion-icon>
                 <ion-label no-margin>
                     <h2>Marhba!</h2>
                     <p>Se connecter une seul fois à l'application.</p>
@@ -30,7 +46,7 @@
                             </ion-col>
                             <ion-col no-padding class="ion-text-end" size="7">
                                 1/1
-                                <ion-progress-bar color="success" value="1"></ion-progress-bar>
+                                <ion-progress-bar color="success" value="1">1/1</ion-progress-bar>
                             </ion-col>
                         </ion-row>
                     </ion-grid>
@@ -79,12 +95,12 @@
                 </ion-label>
             </ion-item>
         </ion-list>
-    </ion-card>
-    <ion-card no-margin margin-horizontal margin-bottom padding-bottom>
+    <!-- </ion-card> -->
+    <!-- <ion-card no-margin margin-horizontal margin-bottom padding-bottom> -->
         <ion-list>
             <ion-list-header color="light">Parrainage</ion-list-header>
             <ion-item lines="none" margin-top>
-                <ion-icon class="ach-icon" name="contacts" color="light" slot="start"></ion-icon>
+                <ion-icon class="ach-icon" name="checkmark-circle-outline" color="success" slot="start"></ion-icon>
                 <ion-label no-margin>
                     <h2>Viens, je te montre un truc</h2>
                     <p>Parrainer un(e) ami(e).</p>
@@ -146,6 +162,48 @@
                     </ion-grid>
                 </ion-label>
             </ion-item>
+            <ion-item lines="none" margin-vertical>
+                <ion-icon class="ach-icon" name="contacts" slot="start"></ion-icon>
+                <ion-label no-margin>
+                    <h2>Father</h2>
+                    <p>Parrainer 30 ami(e)s.</p>
+                    <ion-grid no-padding>
+                        <ion-row>
+                            <ion-col no-padding class="ion-text-start" size="5">
+                                <ion-chip outline="true">
+                                    <ion-icon name="ribbon" color="secondary"></ion-icon>
+                                    <ion-label>1700</ion-label>
+                                </ion-chip>
+                            </ion-col>
+                            <ion-col no-padding class="ion-text-end" size="7">
+                                4/30
+                                <ion-progress-bar color="primary" value="0.133"></ion-progress-bar>
+                            </ion-col>
+                        </ion-row>
+                    </ion-grid>
+                </ion-label>
+            </ion-item>
+            <ion-item lines="none" margin-vertical>
+                <ion-icon class="ach-icon" name="contacts" slot="start"></ion-icon>
+                <ion-label no-margin>
+                    <h2>Godfather</h2>
+                    <p>Parrainer 50 ami(e)s.</p>
+                    <ion-grid no-padding>
+                        <ion-row>
+                            <ion-col no-padding class="ion-text-start" size="5">
+                                <ion-chip outline="true">
+                                    <ion-icon name="ribbon" color="secondary"></ion-icon>
+                                    <ion-label>3000</ion-label>
+                                </ion-chip>
+                            </ion-col>
+                            <ion-col no-padding class="ion-text-end" size="7">
+                                4/50
+                                <ion-progress-bar color="primary" value="0.08"></ion-progress-bar>
+                            </ion-col>
+                        </ion-row>
+                    </ion-grid>
+                </ion-label>
+            </ion-item>
         </ion-list>
-    </ion-card>
+    <!-- </ion-card> -->
 </ion-content>
\ No newline at end of file

src/app/pages/hauts-faits/hauts-faits.page.scss

 ion-item {
+  border: 1px solid var(--ion-color-light);
+  border-radius: 15px;
+  margin: 10px;
+  padding: 5px;
+  background: #fff;
+  .item-native {
+    border-radius: 15px;
+  }
   ion-icon.ach-icon {
     font-size: 3em;
   }
+  h2 {
+    font-weight: bold;
+  }
   ion-progress-bar {
-      height: 10px;
-      border-radius: 5px;
+    height: 10px;
+    border-radius: 5px;
   }
 }

src/app/pages/menu/menu.module.ts

@@ -53,6 +53,10 @@ const routes: Routes = [
         path: 'hauts-faits',
         loadChildren: '../hauts-faits/hauts-faits.module#HautsFaitsPageModule'
       },
+      {
+        path: 'classement',
+        loadChildren: '../classement/classement.module#ClassementPageModule'
+      },
     ]
   }
 ];

src/app/pages/profil-edit/profil-edit.page.html

@@ -6,7 +6,7 @@
         <ion-title>
             Modifier mon profil
         </ion-title>
-        <ion-button color="success" slot="end">Valider</ion-button>
+        <ion-button color="success" size="small" slot="end">Valider</ion-button>
     </ion-toolbar>
 </ion-header>
 

src/app/pages/profil/profil.page.html

@@ -24,7 +24,7 @@
                         <ion-icon name="star"></ion-icon>
                         <ion-label>Testeur</ion-label>
                     </ion-chip>
-                    <ion-chip color="dark" routerLink="/app/hauts-faits" routerDirection="root" routerLinkActive="active">
+                    <ion-chip color="dark" routerLink="/app/hauts-faits" routerDirection="forward" routerLinkActive="active">
                         <ion-icon name="trophy" color="secondary"></ion-icon>
                         <ion-label>2/6</ion-label>
                     </ion-chip>
@@ -58,8 +58,7 @@
     <ion-card>
         <ion-item color="primary">
             Infos :
-            <ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="root"
-                routerLinkActive="active">Modifier</ion-button>
+            <ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="forward" routerLinkActive="active">Modifier</ion-button>
         </ion-item>
         <ion-item>
             <ion-icon name="mail" slot="start"></ion-icon> monemail@allo-testeurs.com

src/theme/variables.scss

@@ -2,6 +2,7 @@
 // http://ionicframework.com/docs/theming/
 
 /** Ionic CSS Variables **/
+@import url('https://fonts.googleapis.com/css?family=Abel');
 @font-face {
   font-family: "Open Sans";
   src: url("../assets/fonts/opensans/regular/OpenSans-Regular-webfont.eot");
@@ -25,27 +26,27 @@
 :root {
   /** primary **/
   --ion-color-primary: #f93129;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-rgb: 249, 49, 41;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #f7b32b;
-  --ion-color-primary-tint: #fcf6b1;
+  --ion-color-primary-shade: #db2b24;
+  --ion-color-primary-tint: #fa463e;
 
   /** secondary **/
   --ion-color-secondary: #f7b32b;
-  --ion-color-secondary-rgb: 12, 209, 232;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #f7b32b;
-  --ion-color-secondary-tint: #fcf6b1;
+  --ion-color-secondary-rgb: 247, 179, 43;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0, 0, 0;
+  --ion-color-secondary-shade: #d99e26;
+  --ion-color-secondary-tint: #f8bb40;
 
   /** tertiary **/
   --ion-color-tertiary: #2d1e2f;
-  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-rgb: 45, 30, 47;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #2d1e2f;
-  --ion-color-tertiary-tint: #7e57ff;
+  --ion-color-tertiary-shade: #281a29;
+  --ion-color-tertiary-tint: #423544;
 
   /** success **/
   --ion-color-success: #10dc60;
@@ -95,9 +96,90 @@
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 
-  /** **/
+  /** Gradient grey **/
+  --ion-color-gradgrey: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+  --ion-color-gradgrey-rgb: 255, 255, 255;
+  --ion-color-gradgrey-contrast: #000000;
+  --ion-color-gradgrey-contrast-rgb: 0, 0, 0;
+  --ion-color-gradgrey-shade: #e0e0e0;
+  --ion-color-gradgrey-tint: #ffffff;
+
+  /** FB **/
   --ion-color-fb: #3c5a99;
+  --ion-color-fb-rgb: 60, 90, 153;
+  --ion-color-fb-contrast: #ffffff;
+  --ion-color-fb-contrast-rgb: 255, 255, 255;
+  --ion-color-fb-shade: #354f87;
+  --ion-color-fb-tint: #506ba3;
+
+  /** G **/
   --ion-color-g: #cc3333;
+  --ion-color-g-rgb: 204, 51, 51;
+  --ion-color-g-contrast: #ffffff;
+  --ion-color-g-contrast-rgb: 255, 255, 255;
+  --ion-color-g-shade: #b42d2d;
+  --ion-color-g-tint: #d14747;
+
+  /** Blue **/
+  --ion-color-blue: #3880ff;
+  --ion-color-blue-rgb: 56,128,255;
+  --ion-color-blue-contrast: #ffffff;
+  --ion-color-blue-contrast-rgb: 255,255,255;
+  --ion-color-blue-shade: #3171e0;
+  --ion-color-blue-tint: #4c8dff;
+
+  /** Rose **/
+  --ion-color-rose: #ffceff;
+  --ion-color-rose-rgb: 255,206,255;
+  --ion-color-rose-contrast: #000000;
+  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-shade: #e0b5e0;
+  --ion-color-rose-tint: #ffd3ff;
+
+  --ion-font-family: "Open Sans";
+}
+
+.ion-color-gradgrey {
+  --ion-color-base: var(--ion-color-gradgrey);
+  --ion-color-base-rgb: var(--ion-color-gradgrey-rgb);
+  --ion-color-contrast: var(--ion-color-gradgrey-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-gradgrey-contrast-rgb);
+  --ion-color-shade: var(--ion-color-gradgrey-shade);
+  --ion-color-tint: var(--ion-color-gradgrey-tint);
+}
+
+.ion-color-fb {
+  --ion-color-base: var(--ion-color-fb);
+  --ion-color-base-rgb: var(--ion-color-fb-rgb);
+  --ion-color-contrast: var(--ion-color-fb-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-fb-contrast-rgb);
+  --ion-color-shade: var(--ion-color-fb-shade);
+  --ion-color-tint: var(--ion-color-fb-tint);
+}
+
+.ion-color-g {
+  --ion-color-base: var(--ion-color-g);
+  --ion-color-base-rgb: var(--ion-color-g-rgb);
+  --ion-color-contrast: var(--ion-color-g-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-g-contrast-rgb);
+  --ion-color-shade: var(--ion-color-g-shade);
+  --ion-color-tint: var(--ion-color-g-tint);
+}
+
+.ion-color-blue {
+  --ion-color-base: var(--ion-color-blue);
+  --ion-color-base-rgb: var(--ion-color-blue-rgb);
+  --ion-color-contrast: var(--ion-color-blue-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-blue-contrast-rgb);
+  --ion-color-shade: var(--ion-color-blue-shade);
+  --ion-color-tint: var(--ion-color-blue-tint);
+}
 
-  --ion-font-family: 'Open Sans';
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
 }