Skip to content

Commit df745d7

Browse files
yannbfyannbf
committed
Renames background video login + css refactor
1 parent c1d86c4 commit df745d7

File tree

7 files changed

+74
-120
lines changed

7 files changed

+74
-120
lines changed

‎src/app/app.imports.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { HomeLoginPage } from '../pages/login/home-login/home-login';
21
// Global state (used for theming)
32
import { AppState } from './app.global';
43

@@ -28,6 +27,7 @@ import { LoginListPage } from '../pages/login/login';
2827
import { LoginOnePage } from '../pages/login/login-one/login-one';
2928
import { LoginInstagramPage } from '../pages/login/login-instagram/login-instagram';
3029
import { LoginSliderPage } from '../pages/login/login-slider/login-slider';
30+
import { LoginBackgroundVideoPage } from '../pages/login/login-background-video/login-background-video';
3131

3232
// Popup Menu list
3333
import { PopupMenuListPage } from '../pages/popup-menu/popup-menu';
@@ -56,10 +56,6 @@ import { WalkthroughModalPage } from '../pages/popup-modal/walkthrough-modal/wal
5656
// Alerts
5757
import { AlertsPage } from '../pages/ionic-official-components/alert/alert';
5858

59-
// FlashCard
60-
import { FlashCardComponent } from '../components/flash-card/flash-card';
61-
import { FlashCardPage } from '../pages/miscellaneous/flash-card/flash-card';
62-
6359
// Slides
6460
import { SlidesPage } from '../pages/slide/slide';
6561
import { SlideTransitionsPage } from '../pages/slide/slide-transitions/slide-transitions';
@@ -90,6 +86,7 @@ import { RuntimePermissionsPage } from '../pages/miscellaneous/runtime-permissio
9086
import { ChartsPage } from '../pages/miscellaneous/charts/charts';
9187
import { GetImagePage } from '../pages/miscellaneous/get-image/get-image';
9288
import { BarcodescannerPage } from '../pages/miscellaneous/barcodescanner/barcodescanner';
89+
import { FlashCardPage } from '../pages/miscellaneous/flash-card/flash-card';
9390

9491
// Providers
9592
import { WeatherService } from '../pages/miscellaneous/weather/weather.service';
@@ -98,9 +95,12 @@ import { AlertService } from '../providers/util/alert.service';
9895
import { CameraProvider } from '../providers/util/camera.provider';
9996

10097
// Directives
101-
import { Timer } from '../components/countdown-timer/timer';
10298
import { SlidingDrawer } from '../components/sliding-drawer/sliding-drawer';
99+
100+
// Components
101+
import { Timer } from '../components/countdown-timer/timer';
103102
import { TypingEffect } from '../components/typing-effect/typing-effect';
103+
import { FlashCardComponent } from '../components/flash-card/flash-card';
104104

105105
// Pipes
106106
import { MomentPipe } from '../pipes/moment.pipe';
@@ -154,7 +154,7 @@ export const Pages = [
154154
LoginOnePage,
155155
LoginInstagramPage,
156156
LoginSliderPage,
157-
HomeLoginPage,
157+
LoginBackgroundVideoPage,
158158

159159
// Miscellaneous
160160
MiscellaneousListPage,
@@ -173,7 +173,6 @@ export const Pages = [
173173
ChartsPage,
174174
RuntimePermissionsPage,
175175
GetImagePage,
176-
FlashCardComponent,
177176
FlashCardPage,
178177
BarcodescannerPage,
179178

@@ -210,6 +209,10 @@ export const Providers = [
210209
WeatherService, AlertService, ToastService, AppState, CameraProvider
211210
]
212211

212+
export const Components = [
213+
FlashCardComponent,
214+
]
215+
213216
export const Directives = [
214217
SlidingDrawer,
215218
Timer,

‎src/app/app.module.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,15 @@ import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
33
import { MyApp } from './app.component';
44
import { SwingModule } from 'angular2-swing';
55

6-
import { Pages, Directives, Pipes, Providers } from './app.imports';
6+
import { Pages, Directives, Pipes, Providers, Components } from './app.imports';
77

88
@NgModule({
99
declarations: [
1010
// App Core
1111
MyApp,
12-
13-
// Pages
1412
Pages,
15-
16-
// directives
13+
Components,
1714
Directives,
18-
19-
// pipes
2015
Pipes
2116
],
2217
imports: [

‎src/pages/login/home-login/home-login.scss

Lines changed: 0 additions & 97 deletions
This file was deleted.

‎src/pages/login/home-login/home-login.html renamed to ‎src/pages/login/login-background-video/login-background-video.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<ion-content fullscreen padding>
66
<img class="logo" src="assets/img/logo/logo-canon.png" />
77
<div class="buttons">
8-
<button ion-button class="login-button email" (click)="goToSignup()">Create account</button>
8+
<button ion-button class="login-button facebook" (click)="goToLogin()">Continue with Facebook</button>
99
<button ion-button class="login-button google" (click)="goToLogin()">Login</button>
10+
<button ion-button class="login-button" color="dark" (click)="goToSignup()">Create account</button>
1011
</div>
1112
<video #player playsinline autoplay muted loop poster="assets/video-cover.jpg" id="bgvid">
1213
<source src="assets/video/background-480.mp4" type="video/mp4"> Your browser does not support the video tag.

‎src/pages/login/login-background-video/login-background-video.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
page-login-background-video {
2+
video#bgvid {
3+
position: fixed;
4+
top: 50%;
5+
left: 50%;
6+
min-width: 100%;
7+
min-height: 100%;
8+
width: auto;
9+
height: auto;
10+
z-index: -100;
11+
transform: translateX(-50%) translateY(-50%);
12+
background-size: cover;
13+
}
14+
.logo {
15+
width: 70%;
16+
height: auto;
17+
margin: 0 auto;
18+
padding-top: 50px;
19+
}
20+
span {
21+
color: white;
22+
}
23+
.buttons {
24+
text-align: center;
25+
position: absolute;
26+
bottom: 0;
27+
padding-bottom: 10px;
28+
width: 90%;
29+
transition: all 1s ease;
30+
}
31+
.login-button {
32+
width: 100%;
33+
height: 5rem;
34+
font-size: 1.2em;
35+
font-weight: bold;
36+
text-transform: none !important;
37+
}
38+
.facebook {
39+
background-color: rgba(59, 89, 152, .7);
40+
&.activated {
41+
background-color: rgba(59, 89, 152, 1) !important;
42+
}
43+
}
44+
.google {
45+
background-color: rgba(219, 68, 55, .7);
46+
&.activated {
47+
background-color: rgba(219, 68, 55, 1) !important;
48+
}
49+
}
50+
}

‎src/pages/login/home-login/home-login.ts renamed to ‎src/pages/login/login-background-video/login-background-video.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@ import { Component, ViewChild } from '@angular/core';
22
import { NavController } from 'ionic-angular';
33

44
@Component({
5-
selector: 'page-home-login',
6-
templateUrl: 'home-login.html'
5+
selector: 'page-login-background-video',
6+
templateUrl: 'login-background-video.html'
77
})
8-
export class HomeLoginPage {
8+
export class LoginBackgroundVideoPage {
99

1010
@ViewChild('player') player;
1111

1212
constructor(public navCtrl: NavController) { }
1313

14+
// It's interesting to remove the src and put it back
15+
// when entering and leaving the page so there are no memory leaks.
1416
ionViewWillLeave() {
15-
// the .nativeElement property of the ViewChild is the reference to the <video>
17+
// the .nativeElement property of the ViewChild is the reference to the tag <video>
1618
this.player.nativeElement.src = '';
1719
this.player.nativeElement.load();
1820
}
@@ -23,7 +25,7 @@ export class HomeLoginPage {
2325
}
2426

2527
ionViewDidLoad() {
26-
console.log('Hello HomeLoginPage Page');
28+
console.log('Hello LoginBackgroundVideo Page');
2729
}
2830

2931
goToSignup() {

‎src/pages/login/login.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { HomeLoginPage } from './home-login/home-login';
1+
import { LoginBackgroundVideoPage } from './login-background-video/login-background-video';
22
import { LoginSliderPage } from './login-slider/login-slider';
33
import { LoginInstagramPage } from './login-instagram/login-instagram';
44
import { Component } from '@angular/core';
@@ -32,7 +32,7 @@ export class LoginListPage {
3232
},
3333
{
3434
title: 'Login with video background',
35-
page: HomeLoginPage
35+
page: LoginBackgroundVideoPage
3636
},
3737
]
3838
}

0 commit comments

Comments
 (0)