Commit 1704cb28 authored by John Vincent's avatar John Vincent

Completely refactor app

Currently unfinished. Use Ionic 5, have components use standard attributes and tags. Have proper layouts for ios and android.
parent 3a46be3a
Pipeline #118161466 failed with stages
in 3 minutes and 20 seconds
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabPage } from './tab.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
RouterModule.forChild([{ path: '', component: TabPage }])
],
declarations: [TabPage]
})
export class TabPageModule {}
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 3
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 3 page"></app-explore-container>
</ion-content>
ion-content ion-toolbar {
--background: translucent;
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { TabPage } from './tab.page';
describe('TabPage', () => {
let component: TabPage;
let fixture: ComponentFixture<TabPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TabPage],
imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
}).compileComponents();
fixture = TestBed.createComponent(TabPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-tab',
templateUrl: 'tab.page.html',
styleUrls: ['tab.page.scss']
})
export class TabPage {
constructor() {}
}
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabPage } from './tab.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
RouterModule.forChild([{ path: '', component: TabPage }])
],
declarations: [TabPage]
})
export class TabPageModule {}
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 3
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 3 page"></app-explore-container>
</ion-content>
ion-content ion-toolbar {
--background: translucent;
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { TabPage } from './tab.page';
describe('TabPage', () => {
let component: TabPage;
let fixture: ComponentFixture<TabPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TabPage],
imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
}).compileComponents();
fixture = TestBed.createComponent(TabPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-tab',
templateUrl: 'tab.page.html',
styleUrls: ['tab.page.scss']
})
export class TabPage {
constructor() {}
}
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabPage } from './tab.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
RouterModule.forChild([{ path: '', component: TabPage }])
],
declarations: [TabPage]
})
export class TabPageModule {}
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Discover
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title class="ar-header-title" size="large">Discover</ion-title>
</ion-toolbar>
</ion-header>
<ion-text>
<h4 class="manrope-header ar-discover-header-text">Hottest Reads</h4>
</ion-text>
<ion-slides [options]="HomesliderOptions">
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide class="ar-home-slide-end">
<ion-fab-button class="ar-home-slide-end-button" color="light">
<ion-icon color="primary" name="arrow-forward"></ion-icon>
</ion-fab-button>
<ion-text class="ar-home-slide-end-text" color="dark">See all</ion-text>
</ion-slide>
</ion-slides>
<h4>For You</h4>
<ion-slides [options]="HomesliderOptions">
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide class="ar-home-slide-end">
<ion-fab-button class="ar-home-slide-end-button" color="light">
<ion-icon color="primary" name="arrow-forward"></ion-icon>
</ion-fab-button>
<ion-text class="ar-home-slide-end-text" color="dark">See all</ion-text>
</ion-slide>
</ion-slides>
<h4>Recently Read</h4>
<ion-slides [options]="HomesliderOptions">
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card>
<img src="https://github.com/ionic-team/ionic-docs/raw/master/src/demos/api/card/madison.jpg" />
<ion-card-header>
<ion-card-subtitle>Destination</ion-card-subtitle>
<ion-card-title>Madison, WI</ion-card-title>
</ion-card-header>
<ion-card-content>
Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide class="ar-home-slide-end">
<ion-fab-button class="ar-home-slide-end-button" color="light">
<ion-icon color="primary" name="arrow-forward"></ion-icon>
</ion-fab-button>
<ion-text class="ar-home-slide-end-text" color="dark">See all</ion-text>
</ion-slide>
</ion-slides>
</ion-content>
ion-content ion-toolbar {
--background: translucent;
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { TabPage } from './tab.page';
describe('TabPage', () => {
let component: TabPage;
let fixture: ComponentFixture<TabPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TabPage],
imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
}).compileComponents();
fixture = TestBed.createComponent(TabPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;
@Component({
selector: 'app-tab',
templateUrl: 'tab.page.html',
styleUrls: ['tab.page.scss']
})
export class TabPage {
constructor() {}
ngOnInit() {
SplashScreen.hide();
}
HomesliderOptions = {
slidesPerView: 1.15,
freeMode: false,
coverflowEffect: {
rotate: 50,
stretch: 100,
depth: 0,
modifier: 1,
slideShadows: false,
}
}
}
<div id="container">
<strong>{{ name }}</strong>
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
\ No newline at end of file
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponent } from './explore-container.component';
describe('ExploreContainerComponent', () => {
let component: ExploreContainerComponent;
let fixture: ComponentFixture<ExploreContainerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ExploreContainerComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(ExploreContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
@Input() name: string;
constructor() { }
ngOnInit() {}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponent } from './explore-container.component';
@NgModule({
imports: [ CommonModule, FormsModule, IonicModule],
declarations: [ExploreContainerComponent],
exports: [ExploreContainerComponent]
})
export class ExploreContainerComponentModule {}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeTabsPage } from './home.page';
const routes: Routes = [
{
path: 'home',
component: HomeTabsPage,
children: [
{
path: 'discover',
children: [
{
path: '',
loadChildren: () =>
import('./discover/tab.module').then(m => m.TabPageModule)
}
]
},
{
path: 'browse',
children: [
{
path: '',
loadChildren: () =>
import('./browse/tab.module').then(m => m.TabPageModule)
}
]
},
{
path: 'library',
children: [
{
path: '',
loadChildren: () =>
import('./library/tab.module').then(m => m.TabPageModule)
}
]
},
{
path: 'account',
children: [
{
path: '',
loadChildren: () =>
import('./account/tab.module').then(m => m.TabPageModule)
}
]
},
{
path: '',
redirectTo: '/home/discover',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/home/discover',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeTabsPageRoutingModule {}
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomeTabsPageRoutingModule } from './home-routing.module';
import { HomeTabsPage } from './home.page';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
HomeTabsPageRoutingModule
],
declarations: [HomeTabsPage]