init commit,
This commit is contained in:
louiscklaw
56
03_source/mobile/src/pages/Tutorial/Tutorial.scss
Normal file
56
03_source/mobile/src/pages/Tutorial/Tutorial.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
#tutorial-page {
|
||||
ion-toolbar {
|
||||
--background: transparent;
|
||||
--border-color: transparent;
|
||||
}
|
||||
|
||||
.slide-title {
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 100%);
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
height: 100%;
|
||||
|
||||
overflow: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
max-height: 50%;
|
||||
max-width: 60%;
|
||||
margin: -5vh 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 40px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--ion-color-step-600, #60646b);
|
||||
|
||||
b {
|
||||
color: var(--ion-text-color, #000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
102
03_source/mobile/src/pages/Tutorial/index copy.tsx
Normal file
102
03_source/mobile/src/pages/Tutorial/index copy.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { IonContent, IonPage, IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, useIonViewWillEnter } from '@ionic/react';
|
||||
import { arrowForward } from 'ionicons/icons';
|
||||
import { setMenuEnabled } from '../../data/sessions/sessions.actions';
|
||||
import { setHasSeenTutorial } from '../../data/user/user.actions';
|
||||
import './Tutorial.scss';
|
||||
import { connect } from '../../data/connect';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
|
||||
interface OwnProps extends RouteComponentProps {}
|
||||
interface DispatchProps {
|
||||
setHasSeenTutorial: typeof setHasSeenTutorial;
|
||||
setMenuEnabled: typeof setMenuEnabled;
|
||||
}
|
||||
|
||||
interface TutorialProps extends OwnProps, DispatchProps {}
|
||||
|
||||
const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMenuEnabled }) => {
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setMenuEnabled(false);
|
||||
// Scroll to first slide when entering the tutorial
|
||||
if (sliderRef.current) {
|
||||
sliderRef.current.scrollTo({
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const startApp = async () => {
|
||||
await setHasSeenTutorial(true);
|
||||
await setMenuEnabled(true);
|
||||
history.push('/tabs/schedule', { direction: 'none' });
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage id="tutorial-page">
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar>
|
||||
<IonButtons slot="end">
|
||||
<IonButton color="primary" onClick={startApp}>
|
||||
Skip
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<div className="slider" ref={sliderRef}>
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-1.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">
|
||||
Welcome to <b>ICA</b>
|
||||
</h2>
|
||||
<p>
|
||||
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-2.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic?</h2>
|
||||
<p>
|
||||
<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-3.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic Appflow?</h2>
|
||||
<p>
|
||||
<b>Ionic Appflow</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-4.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">Ready to Play?</h2>
|
||||
<IonButton fill="clear" onClick={startApp}>
|
||||
Continue
|
||||
<IonIcon slot="end" icon={arrowForward} />
|
||||
</IonButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect<OwnProps, {}, DispatchProps>({
|
||||
mapDispatchToProps: {
|
||||
setHasSeenTutorial,
|
||||
setMenuEnabled,
|
||||
},
|
||||
component: Tutorial,
|
||||
});
|
||||
107
03_source/mobile/src/pages/Tutorial/index.tsx
Normal file
107
03_source/mobile/src/pages/Tutorial/index.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { IonContent, IonPage, IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, useIonViewWillEnter } from '@ionic/react';
|
||||
import { arrowForward } from 'ionicons/icons';
|
||||
import { setMenuEnabled } from '../../data/sessions/sessions.actions';
|
||||
import { setHasSeenTutorial } from '../../data/user/user.actions';
|
||||
import './Tutorial.scss';
|
||||
import { connect } from '../../data/connect';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import paths from '../../paths';
|
||||
|
||||
interface OwnProps extends RouteComponentProps {}
|
||||
interface DispatchProps {
|
||||
setHasSeenTutorial: typeof setHasSeenTutorial;
|
||||
setMenuEnabled: typeof setMenuEnabled;
|
||||
}
|
||||
|
||||
interface TutorialProps extends OwnProps, DispatchProps {}
|
||||
|
||||
const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMenuEnabled }) => {
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setMenuEnabled(false);
|
||||
// Scroll to first slide when entering the tutorial
|
||||
if (sliderRef.current) {
|
||||
sliderRef.current.scrollTo({
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const startApp = async () => {
|
||||
await setHasSeenTutorial(true);
|
||||
await setMenuEnabled(true);
|
||||
history.push(paths.EVENT_LIST, { direction: 'none' });
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage id="tutorial-page">
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar>
|
||||
<IonButtons slot="end">
|
||||
<IonButton color="primary" onClick={startApp}>
|
||||
Skip
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<div className="slider" ref={sliderRef}>
|
||||
{/* */}
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-1.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">
|
||||
Welcome to <b>ICA</b>
|
||||
</h2>
|
||||
<p>
|
||||
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* */}
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-2.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic?</h2>
|
||||
<p>
|
||||
<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* */}
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-3.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic Appflow?</h2>
|
||||
<p>
|
||||
<b>Ionic Appflow</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* */}
|
||||
<section>
|
||||
<div className="swiper-item">
|
||||
<img src="assets/img/ica-slidebox-img-4.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">Ready to Play?</h2>
|
||||
<IonButton fill="clear" onClick={startApp}>
|
||||
Continue
|
||||
<IonIcon slot="end" icon={arrowForward} />
|
||||
</IonButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect<OwnProps, {}, DispatchProps>({
|
||||
mapDispatchToProps: {
|
||||
setHasSeenTutorial,
|
||||
setMenuEnabled,
|
||||
},
|
||||
component: Tutorial,
|
||||
});
|
||||
Reference in New Issue
Block a user