-
-
-
- Schedule
-
-
-
-
- Speakers
-
-
-
-
- Map
-
-
-
-
- About
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- All
-
-
- Favorites
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No Sessions Found
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
- {contact.name}
- {read && received &&
- {preview}
-
-
-
-
- {date}
-
- {notificationCount > 0 && {notificationCount} }
-
-
-
- {children}
-
- {/* */}
-
- {'Loading'}
-
- {session.name}
-- {session.timeStart} — - {session.timeEnd}: - {session.location} -
-{speaker.name}
-{speaker.title}
-{session.name}
-About {speaker.name}
-
- {/* Instead of loading an image each time the select changes, use opacity to transition them */}
-
-
-
-
-
-
-
-
- setLocation(e.detail.value as any)}>
- Madison, WI
- Austin, TX
- Chicago, IL
- Seattle, WA
-
-
-
- Date
- {displayDate(conferenceDate, 'MMM dd, yyyy')}
-
- setConferenceDate(e.detail.value! as string)}
- presentation="date"
- >
-
-
-
-
-
-
- Wifi network
- ica{displayDate(conferenceDate, 'y')}
-
-
- Password
- makegoodthings
-
-
-
- About
- -- The Ionic Conference is a one-day event happening on {displayDate(conferenceDate, 'MMM dd, yyyy')}, featuring talks from the Ionic team. The - conference focuses on building applications with Ionic Framework, including topics such as app migration to the latest version, React best - practices, Webpack, Sass, and other technologies commonly used in the Ionic ecosystem. Tickets are completely sold out, and we're expecting over - 1,000 developers — making this the largest Ionic conference to date! -
- -Details
- -Internet
- -
- 
-
- clicked('Update Picture')}>Update Picture
- setShowAlert(true)}>Change Username
- clicked('Change Password')}>Change Password
-
- Support
-
-
- Logout
-
-
-
- )}
-
- {username}
-
- 
-
-
-
-
- Session not found
;
- }
-
- const isFavorite = favoriteSessions.indexOf(session.id) > -1;
-
- const toggleFavorite = () => {
- isFavorite ? removeFavorite(session.id) : addFavorite(session.id);
- };
- const shareSession = () => {};
- const sessionClick = (text: string) => {
- console.log(`Clicked ${text}`);
- };
-
- return (
-
-
- {session.timeStart} – {session.timeEnd}
-
- {session.location} -
-
- {session.name}
- {session.tracks.map((track) => ( - - {track} - - ))} -{session.description}
-- {session.location} -
- 
-
-
-
-
-
-
- Speaker not found
;
- }
-
- return (
-
- 
-
-
- {speaker.name}
-
-
- - openExternalUrl(`https://twitter.com/${speaker.twitter}`)}>
- Twitter
-
-
- openExternalUrl('https://github.com/ionic-team/ionic-framework')}>
- GitHub
-
-
- openExternalUrl('https://instagram.com/ionicframework')}>
- Instagram
-
-
- {speaker.about} Say hello on social media!
- -- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
- - Welcome to ICA -
-- The ionic conference app is a practical preview of the ionic framework in action, and a demonstration of proper code use. -
-
- 
-
-
- What is Ionic?
-- Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and - JavaScript. -
-
- 
-
-
- What is Ionic Appflow?
-- Ionic Appflow 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. -
-
- 
-
- Continue
-
-
-
- Ready to Play?
-
-
-
-
-
- {dayjs(page_content.event_date).format('DD/MM/YYYY')}
- {party_event.title}
-
-
-
- {'More'}
-
-
-
-
- {page_content.show_party_participants ? (
- <>
- {page_content.party_participants.map(({ profile }, i) => (
-
- +{page_content.party_participants_going} Going
- ) : (
- <>
- )}
-
- ) : (
- <>
- )}
-
-
-
-
-
-
- {page_content.currency}
- {page_content.price_per_person} {'per person'}
-
-
-
-
-
- {page_content.event_duration_min / 60} {'hours'}
-
-
-
-
-
- {page_content.age_min}-{page_content.age_max} {'years old'}
-
-
-
-
- {page_content.address}
-
-
- {page_content.num_m + page_content.num_f}
- {page_content.num_m}
- {page_content.num_f}
-
-
-
-
-
-
-
-
- );
-};
-
-export default React.memo(EventIonCard);
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/events/PageOne.tsx b/03_source/mobile.integrated.not_working.del/src/pages/events/PageOne.tsx
deleted file mode 100644
index fb1d4eb..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/events/PageOne.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// REQ0041/home_discover_event_tab
-
-import { IonBackButton, IonButton, IonButtons, IonContent, IonIcon, IonItem, IonList, IonTitle } from '@ionic/react';
-import { chevronBackOutline, settingsSharp } from 'ionicons/icons';
-import React from 'react';
-import './style.scss';
-
-import EventIonCard from './EventIonCard';
-
-// import { useListPartyEventSummaries } from '../../hooks/useListPartyEventSummaries';
-
-import dayjs from 'dayjs';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import HKPartyIonHeader from '../../components/HKPartyIonHeader';
-import HKPartyIonToolbar from '../../components/HKPartyIonToolbar';
-import Loading from '../../components/Loading';
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
-
-interface AboutProps {}
-
-const Events: React.FC
- {
- e.stopPropagation();
- }}
- >
-
-
-
-
-
- {page_content.title}
-
- {page_content.currency}
- {page_content.price}
-
-
-
-
-
- {page_content.NUM_M + page_content.NUM_F}
-
-
- {page_content.NUM_M}
-
-
- {page_content.NUM_F}
- Page Two
-Use the back button to navigate to the previous page.
-hello favourite
-
- {/* Instead of loading an image each time the select changes, use opacity to transition them */}
-
-
-
-
-
-
-
-
- setLocation(e.detail.value as any)}>
- Madison, WI
- Austin, TX
- Chicago, IL
- Seattle, WA
-
-
-
- Date
- {displayDate(conferenceDate, 'MMM dd, yyyy')}
-
- setConferenceDate(e.detail.value! as string)}
- presentation="date"
- >
-
-
-
-
-
-
- Wifi network
- ica{displayDate(conferenceDate, 'y')}
-
-
- Password
- makegoodthings
-
-
-
- About
- -- The Ionic Conference is a one-day conference on {displayDate(conferenceDate, 'MMM dd, yyyy')} featuring talks from the Ionic team. It is focused on - Ionic applications being built with Ionic Framework. This includes migrating apps to the latest version of the framework, Angular concepts, Webpack, - Sass, and many other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000 developers – making this the - largest Ionic conference ever! -
- -Details
- -Internet
- -
-
-
-
-
-
- );
-};
-
-export default VisitorAvatar;
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/messages/VisitorAvatar/style.scss b/03_source/mobile.integrated.not_working.del/src/pages/messages/VisitorAvatar/style.scss
deleted file mode 100644
index 33a4cfe..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/messages/VisitorAvatar/style.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.visitor-avatar {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- .time {
- padding-top: 1rem;
- }
-}
-
-#date-input-popover {
- --offset-y: -var(--ion-safe-area-bottom);
-
- --max-width: 90%;
- --width: 336px;
-}
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/messages/chat.tsx b/03_source/mobile.integrated.not_working.del/src/pages/messages/chat.tsx
deleted file mode 100644
index 6d50a2e..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/messages/chat.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import {
- CreateAnimation,
- IonActionSheet,
- IonBackButton,
- IonButton,
- IonButtons,
- IonCol,
- IonContent,
- IonFooter,
- IonGrid,
- IonHeader,
- IonIcon,
- IonPage,
- IonRow,
- IonText,
- IonTextarea,
- IonTitle,
- IonToast,
- IonToolbar,
- createGesture,
- useIonViewWillEnter,
-} from '@ionic/react';
-import {
- addOutline,
- alertOutline,
- callOutline,
- cameraOutline,
- micOutline,
- send,
- shareOutline,
- starOutline,
- trashOutline,
- videocamOutline,
-} from 'ionicons/icons';
-import { useEffect, useRef, useState } from 'react';
-//
-import { ChatStore, ContactStore } from '../../store';
-import { getNotificationCount, markAllAsRead, sendChatMessage, starChatMessage } from '../../store/ChatStore';
-import { getChat, getChats, getContact } from '../../store/Selectors';
-
-//
-import { useLongPress } from 'react-use';
-//
-import { ChatBottomDetails } from '../../components/ChatBottomDetails';
-import { ChatRepliedQuote } from '../../components/ChatRepliedQuote';
-import ReplyTo from '../../components/ReplyTo';
-import { useCamera } from '../../hooks/useCamera';
-import { useGallery } from '../../hooks/useGallery';
-import './Chat.css';
-
-const Chat = () => {
- // const params = useParams();
-
- // TODO: Fix this
- const params = { contact_id: 1 };
- // Global State
- const chat = ChatStore.useState(getChat(params.contact_id));
-
- const chats = ChatStore.useState(getChats);
- const contact = ContactStore.useState(getContact(params.contact_id));
- const notificationCount = getNotificationCount(chats);
-
- const { takePhoto } = useCamera();
- const { prompt } = useGallery();
-
- // Local state
- const [message, setMessage] = useState('');
- const [showSendButton, setShowSendButton] = useState(false);
- const [replyToMessage, setReplyToMessage] = useState(false);
- const [messageSent, setMessageSent] = useState(false);
-
- const [showActionSheet, setShowActionSheet] = useState(false);
- const [actionMessage, setActionMessage] = useState(false);
-
- const [showToast, setShowToast] = useState(false);
- const [toastMessage, setToastMessage] = useState('');
-
- // Refs
- const contentRef = useRef();
- const swiperRefs = useRef([]);
- const textareaRef = useRef();
- const sideRef = useRef();
- const sendRef = useRef();
- const replyToAnimationRef = useRef();
-
- const actionSheetButtons = [
- {
- text: actionMessage && actionMessage.starred ? 'Unstar Message' : 'Star Message',
- icon: starOutline,
- handler: () => starChatMessage(params.contact_id, actionMessage.id),
- },
- actionMessage && actionMessage.received
- ? {
- text: 'Reply To Message',
- icon: shareOutline,
- handler: () => showReplyToMessage(actionMessage),
- }
- : {
- text: 'Unsend Message',
- icon: alertOutline,
- handler: () => toaster("I haven't implemented unsend :) Simple store update though"),
- },
- {
- text: 'Delete Message',
- icon: trashOutline,
- handler: () => toaster("I haven't implemented delete :) Simple store update though"),
- role: 'destructive',
- },
- ];
-
- useEffect(() => {
- !showActionSheet && setActionMessage(false);
- }, [showActionSheet]);
-
- // Scroll to end of content
- // Mark all chats as read if we come into a chat
- // Set up our swipe events for animations and gestures
- useIonViewWillEnter(() => {
- scrollToBottom();
- setupObserver();
- markAllAsRead(params.contact_id);
- setSwipeEvents();
- });
-
- // For displaying toast messages
- const toaster = (message) => {
- setToastMessage(message);
- setShowToast(true);
- };
-
- // Scroll to end of content
- const scrollToBottom = async () => {
- contentRef.current.scrollToBottom();
- };
-
- // Watch for DOM changes
- // Then scroll to bottom
- // This ensures that the new chat message has *actually* been rendered
- // Check this:
- // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
- const setupObserver = () => {
- // Mutation Observers watch for DOM changes
- // This will ensure that we scroll to bottom AFTER the new chat has rendered
- const observer = new MutationObserver(() => {
- scrollToBottom();
- });
-
- // We observe the ion-content (or containing element of chats)
- observer.observe(contentRef.current, {
- childList: true,
- });
- };
-
- // Long press callback
- const onLongPress = (e) => {
- const elementID = e.target.id;
- const chatMessageID = elementID.includes('chatText')
- ? parseInt(elementID.replace('chatText_', ''))
- : elementID.includes('chatTime')
- ? parseInt(elementID.replace('chatTime_', ''))
- : parseInt(elementID.replace('chatBubble_', ''));
-
- const chatMessage = chat.filter((message) => parseInt(message.id) === parseInt(chatMessageID))[0];
-
- setActionMessage(chatMessage);
- setShowActionSheet(true);
- };
-
- const longPressEvent = useLongPress(onLongPress, {
- isPreventDefault: true,
- delay: 2000,
- });
-
- const showReplyToMessage = async (message) => {
- // Activate reply-to functionality
- setReplyToMessage(message);
- await replyToAnimationRef.current.animation.play();
- contentRef.current.scrollToBottom(300);
- };
-
- const checkBubble = async (bubble, message, event) => {
- if (event.deltaX >= 120) {
- // Activate reply-to functionality
- bubble.style.transform = 'none';
- showReplyToMessage(message);
- } else {
- // Put chat bubble back to original position
- bubble.style.transform = 'none';
- }
- };
-
- // Function to move a bubble with the deltaX swipe
- const moveBubble = (bubble, event) => {
- if (event.velocityX > 0) {
- bubble.style.transform = `translateX(${event.deltaX}px)`;
- }
- };
-
- const setSwipeEvents = () => {
- chat.forEach((message, index) => {
- if (!message.sent) {
- const chatBubble = swiperRefs.current[index];
-
- const swipeGesture = createGesture({
- el: chatBubble,
- onEnd: (e) => checkBubble(chatBubble, message, e),
- onMove: (e) => moveBubble(chatBubble, e),
- });
-
- swipeGesture.enable();
- }
- });
- };
-
- const widthAnimation = {
- property: 'width',
- fromValue: '110%',
- toValue: '100%',
- };
-
- const fadeAnimation = {
- property: 'opacity',
- fromValue: '100%',
- toValue: '0%',
- };
-
- const sideButtonsAnimation = {
- duration: 200,
- direction: showSendButton ? 'normal' : 'reverse',
- iterations: '1',
- fromTo: [fadeAnimation],
- easing: 'ease-in-out',
- };
-
- const sendButtonAnimation = {
- duration: showSendButton ? 300 : 100,
- direction: !showSendButton ? 'normal' : 'reverse',
- iterations: '1',
- fromTo: [fadeAnimation],
- easing: 'ease-in-out',
- };
-
- const textareaAnimation = {
- duration: 200,
- direction: !showSendButton ? 'normal' : 'reverse',
- iterations: '1',
- fromTo: [widthAnimation],
- easing: 'ease-in-out',
- };
-
- // Set the state value when message val changes
- useEffect(() => {
- setShowSendButton(message !== '');
- }, [message]);
-
- // Play the animations when the state value changes
- useEffect(() => {
- textareaRef.current.animation.play();
- sideRef.current.animation.play();
- sendRef.current.animation.play();
- }, [showSendButton]);
-
- const sendMessage = (image = false, imagePath = false) => {
- if (message !== '' || image === true) {
- sendChatMessage(params.contact_id, message, replyToMessage, replyToMessage ? replyToMessage.id : false, image, imagePath);
- setMessage('');
-
- setMessageSent(true);
- setTimeout(() => setMessageSent(false), 10);
- image && setTimeout(() => scrollToBottom(), 100);
- }
- };
-
- const handlePhoto = async () => {
- const returnedFilePath = await takePhoto();
- sendMessage(true, returnedFilePath);
- };
-
- const handlePrompt = async () => {
- const returnedFilePath = await prompt();
- sendMessage(true, returnedFilePath);
- };
-
- const replyToProps = {
- replyToAnimationRef,
- replyToMessage,
- setReplyToMessage,
- contact: contact.name,
- messageSent,
- };
-
- return (
-
- 12:30
-
- 
-
-
- last seen today at 22:10
-
- {contact.name}
- (swiperRefs.current[index] = ref)}
- id={`chatBubble_${message.id}`}
- key={index}
- className={`chat-bubble ${message.sent ? 'bubble-sent' : 'bubble-received'}`}
- {...longPressEvent}
- >
-
- );
- })}
-
-
- 
}
-
-
-
-
-
- setMessage(e.target.value)} />
-
-
-
-
-
-
- {results.map((chat, index) => {
- return Visitor
-
- {[...Array(3)].map((_, i) => (
-
-
-
-
- {results.map((chat, index) => {
- return Visitor
-
- {[...Array(3)].map((_, i) => (
-
-
-
-
-
- 
-
-
-
-
-
- {page_content.full_name || ''} {page_content.year_of_birth}
-
-
- {user_profile.other_tags.map((o, i) => (
- <>
- {i > 0 && ', '}
- {o}
-
- ))}
-
-
- {page_content.distance_between}
- km. {'Sai Kung'}
-
-
- {/* */}
-
-
-
- 
-
-
-
-
- {/* */}
- {contents.title}
-
-
-
-
-
- {'Number of participants:'}
- {contents.participant_count}
-
-
-
- {'Order time:'}
- {contents.order_time}
-
-
-
- {'Last payment date:'}
- {contents.last_payment_date}
-
-
-
- {'Remaining dates:'}
- {contents.renmaining_date}
-
-
-
- {contents.status ? 'Pending' : 'Paid'}
-
-
- Page Two
-Use the back button to navigate to the previous page.
-
-
- {/* */}
- {'What assistance do you need?'}
- -{'Add attachments'}
-
-
-
-
-
-
-
-
-
- {'Send'}
-
-
-
-
- {/* */}
- What assistance do you need?
-
- Add attachments
-
-
-
-
-
-
-
-
- Send
-
-
-
-
- {/* */}
- What assistance do you need?
-
- Add attachments
-
-
-
-
-
-
-
-
- Send
-
-
-
-
-
-
-
-
-
- {/* */}
-
-
- {page_content.full_name}
- {page_content.user_verified ? <>verified : <>}
- {page_content.user_vip ? <>VIP : <>}
-
-
-
- {'Edit'}
-
-
-
-
- {
- window.location.href = '/unlock-membership';
- }}
- >
- {'Unlock'}
-
-
-
-
-
-
-
-
-
- {'MemberShip'}
- 7 {'of the exclusive privileges'}
-
-
-
- Privileges Unlocked
-
-
-
-
- Unlock participant list
-
-
-
-
- Exclusive vip logo
-
-
-
-
- View visitors
-
-
-
-
- Tips of message read
-
-
-
-
- Voice and images transmission
-
-
-
-
- Pinned to the top of nearby list
-
-
-
-
- {/* */}
- What assistance do you need?
-
- Add attachments
-
-
-
-
-
-
-
-
- Send
-
-
-
-
-
- );
-};
-
-export default ChangeLanguageModal;
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/ChangeLanguageModal/style.scss b/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/ChangeLanguageModal/style.scss
deleted file mode 100644
index cc447c0..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/ChangeLanguageModal/style.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.change-language-modal-block {
- width: 100%;
- height: 400px;
-
- position: relative;
-
- //
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- //
-
- .title {
- font-weight: bold;
- font-size: 1.2rem;
- padding-top: 1rem;
- }
-
- .subtitle {
- font-size: 0.9rem;
- font-weight: 300;
- padding-top: 1rem;
- }
-
- .button-row {
- display: flex;
- flex-direction: row;
- width: 100%;
- justify-content: center;
- align-items: center;
-
- ion-button {
- width: 45%;
- }
- }
-
- .button-column {
- display: flex;
- flex-direction: column;
-
- width: 100%;
-
- padding: 1rem 2rem;
-
- ion-button {
- padding-top: 1rem;
- }
- }
-}
-
-ion-modal {
- --height: auto;
-}
-
-.modal-wrapper {
- position: fixed;
- bottom: 0px;
-}
-
-.apple {
- position: fixed;
- bottom: 0px;
-}
-
-ion-modal::part(content) {
- position: fixed;
- bottom: 0;
-}
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/index.tsx b/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/index.tsx
deleted file mode 100644
index e7f717e..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { IonBackButton, IonButton, IonButtons, IonContent, IonIcon, IonItem, IonLabel, IonList, IonNavLink, IonTitle, useIonModal } from '@ionic/react';
-import { alertCircle, chatbubbles, chevronBackOutline, earth, idCard, newspaper, shareSocial, trash } from 'ionicons/icons';
-import { useRef, useState } from 'react';
-
-import ContactUsPage from '../Contactus';
-import Privacy from '../Privacy';
-
-import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
-import HKPartyIonHeader from '../../../components/HKPartyIonHeader';
-import HKPartyIonToolbar from '../../../components/HKPartyIonToolbar';
-import ServiceAgreement from '../ServiceAgreement';
-import ChangeLanguageModal from './ChangeLanguageModal';
-import './style.scss';
-
-const DeleteTheAccountModal = ({ dismiss }: { dismiss: (data?: string | null | undefined | number, role?: string) => void }) => {
- const inputRef = useRefLanguage
-
-
- dismiss(inputRef.current?.value, 'confirm')} fill="outline" shape="round" size="large">
- English
-
- dismiss(inputRef.current?.value, 'confirm')} fill="outline" shape="round" size="large">
- 中文
-
-
-
-
-
- Change
-
-
-
-
-
- );
-};
-
-function PageSetting() {
- const [delete_the_account_modal_present, delete_the_account_modal_dismiss] = useIonModal(DeleteTheAccountModal, {
- dismiss: (data: string, role: string) => delete_the_account_modal_dismiss(data, role),
- });
- const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
-
- function openDeleteTheAccountModal() {
- delete_the_account_modal_present({
- onWillDismiss: (ev: CustomEvent
-
- Delete the Account
- You cannot re-register after deleting your account
-
-
- Confirm
-
- dismiss(inputRef.current?.value, 'confirm')} fill="outline" shape="round" size="large">
- Cancel
-
-
-
-
-
-
- {/* */}
-
- );
-}
-
-export default PageSetting;
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/style.scss b/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/style.scss
deleted file mode 100644
index 1a337fe..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-setting/style.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.block {
- width: 100%;
- height: 400px;
-
- position: relative;
-
- //
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- //
-
- .title {
- font-weight: bold;
- font-size: 1.2rem;
- padding-top: 1rem;
- }
-
- .subtitle {
- font-size: 0.9rem;
- font-weight: 300;
- padding-top: 1rem;
- }
-
- .button-column {
- display: flex;
- flex-direction: column;
-
- width: 100%;
-
- padding: 1rem 2rem;
-
- ion-button {
- padding-top: 1rem;
- }
- }
-}
-
-ion-modal {
- --height: auto;
-}
-
-.modal-wrapper {
- position: fixed;
- bottom: 0px;
-}
-
-.apple {
- position: fixed;
- bottom: 0px;
-}
-
-ion-modal::part(content) {
- position: fixed;
- bottom: 0;
-}
diff --git a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-three.tsx b/03_source/mobile.integrated.not_working.del/src/pages/profile/page-three.tsx
deleted file mode 100644
index 5cbb9e4..0000000
--- a/03_source/mobile.integrated.not_working.del/src/pages/profile/page-three.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
-
-function PageThree() {
- return (
- <>
- {'Logout'}
- Page Three
-Page Two
-Use the back button to navigate to the previous page.
-
-
-
-
-
-
-
-
-
-
- John 20
- Fishing, basketball, piano
- 40 km. Sai Kung
-
- {/* Instead of loading an image each time the select changes, use opacity to transition them */}
-
-
-
-
-
-
-
-
- setLocation(e.detail.value as any)}>
- Madison, WI
- Austin, TX
- Chicago, IL
- Seattle, WA
-
-
-
- Date
- {displayDate(conferenceDate, 'MMM dd, yyyy')}
-
- setConferenceDate(e.detail.value! as string)}
- presentation="date"
- >
-
-
-
-
-
-
- Wifi network
- ica{displayDate(conferenceDate, 'y')}
-
-
- Password
- makegoodthings
-
-
-
- About
- -- The Ionic Conference is a one-day conference on {displayDate(conferenceDate, 'MMM dd, yyyy')} featuring talks from the Ionic team. It is focused on - Ionic applications being built with Ionic Framework. This includes migrating apps to the latest version of the framework, Angular concepts, Webpack, - Sass, and many other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000 developers – making this the - largest Ionic conference ever! -
- -Details
- -Internet
- -
-
-
-
-
-
- {page_content.about_user}
-
- {page_content.gender == 1 ? 'Male' : 'Female'}
- {page_content.height_cm} cm
- {page_content.weight_kg} kg
- {page_content.career}
- {page_content.spoken_language}
- {page_content.education}
-
-
-
-
- Schedule
-
-
-
-
- Speakers
-
-
-
-
- Map
-
-
-
-
- About
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- All
-
-
- Favorites
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No Sessions Found
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default connect
-
- Loading...
-
-
-
- );
-}
-
-export default connect
-
-
-
-
-
- You have not saved yet
-
- To add your favourites,
- simply take a look here -
- - simply take a look here -
{session.name}
-- {session.timeStart} — - {session.timeEnd}: - {session.location} -
-{speaker.name}
-{speaker.title}
-{session.name}
-About {speaker.name}
-
- *
- * );
- */
-type UseSetStateReturnName: {state.name}
- *Age: {state.age}
- * - * - *
- {/* Instead of loading an image each time the select changes, use opacity to transition them */}
-
-
-
-
-
-
-
-
- setLocation(e.detail.value as any)}
- >
- Madison, WI
- Austin, TX
- Chicago, IL
- Seattle, WA
-
-
-
- Date
-
- {displayDate(conferenceDate, 'MMM dd, yyyy')}
-
-
-
- setConferenceDate(e.detail.value! as string)
- }
- presentation="date"
- >
-
-
-
-
-
-
- Wifi network
-
- ica{displayDate(conferenceDate, 'y')}
-
-
-
- Password
- makegoodthings
-
-
-
- About
- -- The Ionic Conference is a one-day event happening on {' '} - {displayDate(conferenceDate, 'MMM dd, yyyy')}, featuring talks from the - Ionic team. The conference focuses on building applications with Ionic - Framework, including topics such as app migration to the latest version, - React best practices, Webpack, Sass, and other technologies - commonly used in the Ionic ecosystem. Tickets are completely sold out, - and we're expecting over 1,000 developers — making this the largest - Ionic conference to date! -
- -Details
- -Internet
- -
-
-
- clicked('Update Picture')}>
- Update Picture
-
- setShowAlert(true)}>
- Change Username
-
- clicked('Change Password')}>
- Change Password
-
-
- Support
-
-
- Logout
-
-
-
- )}
-
- {username}
-
- Change Language
-
-
-
-
- Confirm change language
-
-
- Change language to Chinese
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
- 
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {keypadButtons.map((keypadRow, index) => {
- const isDisabled = parseInt(activeIndex) === parseInt(amount);
-
- return (
-
- {keypadRow.map((button, index2) => {
- return (
-
- );
- })}
-
- );
-};
-
-export default Keypad;
diff --git a/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.module.scss b/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.module.scss
deleted file mode 100644
index 400a722..0000000
--- a/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.logo {
- height: 4rem;
- width: auto;
-}
-
-.keypadButton {
- --background: none;
- --color: black;
- font-size: 2rem;
- font-weight: 700;
- --outline: none;
- --border: none;
- --box-shadow: none;
- padding: none;
- margin: none;
- --background-hover: rgb(245, 245, 245) !important;
- --background-focused: rgb(245, 245, 245) !important;
- --background-activated: rgb(245, 245, 245) !important;
-}
-
-.smallKeypadButton {
- font-size: 1.4rem;
- margin-top: 1rem;
-}
-
-.keypad {
- bottom: 0;
- position: absolute;
- width: 100%;
-}
diff --git a/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.tsx b/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.tsx
deleted file mode 100644
index 320a13c..0000000
--- a/03_source/mobile.trunk/src/pages/Demo2FaExample/components/KeypadButton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { IonButton, IonCol, IonIcon } from "@ionic/react";
-import { backspaceOutline } from "ionicons/icons";
-import styles from "./KeypadButton.module.scss";
-
-const KeypadButton = (props: any): JSX.Element => {
- const {
- small,
- value,
- remove,
- handleClick,
- isDisabled = false,
- correct,
- } = props;
-
- return (
-
- {value}
- {!isFilled && "0"}
-
- Verification required
-Enter your 4 digit verification code
-
- Awesome! You may continue.
-
-
- Continue
-
Wrong code entered
} -Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -Transactions
-No transactions found
-- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
- );
-};
-
-export default DebitCard;
diff --git a/03_source/mobile.trunk/src/pages/DemoBankingUi/components/DebitCard.module.css b/03_source/mobile.trunk/src/pages/DemoBankingUi/components/DebitCard.module.css
deleted file mode 100644
index b2064a5..0000000
--- a/03_source/mobile.trunk/src/pages/DemoBankingUi/components/DebitCard.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
-
-.card {
- box-sizing: border-box;
- font-family: 'Space Mono', monospace;
- margin: 0 auto;
-}
-
-.title {
- margin-bottom: 30px;
- color: #162969;
-}
-
-.card {
- width: 320px;
- height: 190px;
- -webkit-perspective: 600px;
- -moz-perspective: 600px;
- perspective: 600px;
-}
-
-.card__part {
- box-shadow: 1px 1px #aaa3a3;
- top: 0;
- position: absolute;
- z-index: 1000;
- left: 0;
- display: inline-block;
- width: 320px;
- height: 190px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 8px;
-
- -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
-}
-
-.card_orange {
- background: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #c74261, #d62158);
-}
-
-.card_blue {
- background: linear-gradient(to right bottom, #699dfd, #61b5fa, #58aff6, #4b86c9, #2151d6);
-}
-
-.card_black {
- background: linear-gradient(to right bottom, #292929, #363636, #555555, #444444, #0f0f0f);
-}
-
-.card_purple {
- background: linear-gradient(to right bottom, #7a43df, #644897, #8964cf, #633cac, #512c96);
-}
-
-.card__front {
- padding: 18px;
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
-}
-
-.card__back {
- padding: 18px 0;
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
-}
-
-.card__black_line {
- margin-top: 5px;
- height: 38px;
- background-color: #303030;
-}
-
-.card__logo {
- height: 16px !important;
-}
-
-.card__front_chip {
- left: 1.2rem;
- height: 1.5rem !important;
- position: absolute;
-}
-
-.card__front_logo {
- position: absolute;
- top: 18px;
- right: 18px;
-}
-
-.card__square {
- border-radius: 5px;
- height: 30px !important;
-}
-
-.card_number {
- display: block;
- width: 100%;
- word-spacing: 4px;
- font-size: 20px;
- letter-spacing: 2px;
- color: #fff;
- text-align: center;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-.card__space_75 {
- width: 75%;
- float: left;
-}
-
-.card__space_25 {
- width: 25%;
- float: left;
-}
-
-.card__label {
- font-size: 10px;
- text-transform: uppercase;
- color: rgba(255, 255, 255, 0.8);
- letter-spacing: 1px;
-}
-
-.card__info {
- margin-bottom: 0;
- margin-top: 5px;
- font-size: 16px;
- line-height: 18px;
- color: #fff;
- letter-spacing: 1px;
- text-transform: uppercase;
-}
-
-.card__back_content {
- padding: 15px 15px 0;
-}
-.card__secret__last {
- color: #303030;
- text-align: right;
- margin: 0;
- font-size: 14px;
-}
-
-.card__secret {
- padding: 5px 12px;
- background-color: #fff;
- position: relative;
-}
-
-.card__secret:before {
- content: '';
- position: absolute;
- top: -3px;
- left: -3px;
- height: calc(100% + 6px);
- width: calc(100% - 42px);
- border-radius: 4px;
- background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
-}
-
-.card__back_logo {
- position: absolute;
- bottom: 15px;
- right: 15px;
-}
-
-.card__back_square {
- position: absolute;
- bottom: 15px;
- left: 15px;
-}
-
-.card:hover .card__front {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
-}
-
-.card:hover .card__back {
- -webkit-transform: rotateY(0deg);
- -moz-transform: rotateY(0deg);
-}
diff --git a/03_source/mobile.trunk/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx b/03_source/mobile.trunk/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx
deleted file mode 100644
index ae39e44..0000000
--- a/03_source/mobile.trunk/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
- IonCard,
- IonCardContent,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonGrid,
- IonIcon,
- IonNote,
- IonRow,
- IonSkeletonText,
- IonText,
- IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-import React from 'react';
-
-export const SkeletonDashboard = (): React.JSX.Element => (
-
- 
- 
- 
-
-
-
-
- **** **** **** {lastFourCardNumbers}
-
- Card holder
-
- {`${profile.firstname} ${profile.surname}`}
-
- Expires
-
- {expiry}
-
-
-
-
-
-
-
-
-
-
- {secret}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {getContactNameInitials(name)}
-
- {name}
-- {deposit ? '+' : '-'} - £{formatBalance(amount)} -
-{`${profile.firstname} ${profile.surname}`}
-{cards.length} current cards
-
- {cards.map((card, index) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- })}
-
- {card.description}
-£{formatBalance(card.balance)}
-
-
-
-
-
-
-
-
-
- {post.category}
-
-
- {post.content}
- -
-
-
-
-
-
-
-
-
- {post.category}
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx b/03_source/mobile.trunk/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx
deleted file mode 100644
index a98804b..0000000
--- a/03_source/mobile.trunk/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { IonButton, IonCol, IonContent, IonGrid, IonIcon, IonLabel, IonNote, IonRow } from '@ionic/react';
-import { globeOutline, heartOutline, locationOutline, navigateOutline, phonePortraitOutline } from 'ionicons/icons';
-
-export const MarkerInfoWindow = ({ marker, dismiss }) => {
- return (
- Start with Ionic UI Components
-{marker.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Upcoming
-Happening Now
- setShowModal(true) }>
-
- { speakers.map((speaker, index) => {
-
- return (
-
-
- }
-
- { upcoming &&
-
-
-
- { talkCategory.name } talks
-
-
-
-
-
- { !upcoming &&
-
- { talk.title }
-
- 
-
- );
- })}
-
- { talk.time }
-
- }
-
- { !upcoming &&
-
-
-
-
-
- }
-
-
-
-
-
-
- { category.name } talks
-
- { talk.title }
-
-
-
-
-
- { speaker.name.split(" ")[0] }
-
-
-
-
-
- { people[Math.floor(Math.random() * 30)].name.split(" ")[0] }
-- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoColorTutorial/index.tsx b/03_source/mobile.trunk/src/pages/DemoColorTutorial/index.tsx
deleted file mode 100644
index 6090ccb..0000000
--- a/03_source/mobile.trunk/src/pages/DemoColorTutorial/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cloudOutline, ellipse, searchOutline, square, triangle } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import Tab1 from './pages/Tab1';
-import Tab2 from './pages/Tab2';
-import Tab3 from './pages/Tab3';
-
-import './style.scss';
-
-function DemoColorTutorial() {
- return (
- Explore UI Components
-Based on the English language
-There are 171, 146 words in the English language!
-You don't have any favourites yet!
-- Any time you see the heart icon, press it to add the related word to your favourites and - quickly access it from here. -
-Search for a word in the English language
-- This app will give you word meaninigs, phonetics, origin and also an audio clip so you can - hear what it sounds like. -
-
- {word.meanings &&
- word.meanings.map((meaning, index) => {
- return (
-
- {meaning.partOfSpeech}
-
-
- );
- })}
-
-
- no results
- found
-
-
-
-
-
-);
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordMeaning.jsx b/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
deleted file mode 100644
index 1f5d3b7..0000000
--- a/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IonBadge } from '@ionic/react';
-
-export const WordMeaning = ({ meaning, index }) => (
- { text }
- 0 ? 'ion-padding-top' : ''}>
-
- {meaning.partOfSpeech}
-
-
- {meaning.definitions.map((definition, index2) => { - return ( -
-);
diff --git a/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordModal.jsx b/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordModal.jsx
deleted file mode 100644
index 0896a4b..0000000
--- a/03_source/mobile.trunk/src/pages/DemoDictionaryApp/components/WordModal.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
- IonBadge,
- IonButton,
- IonButtons,
- IonCard,
- IonCardContent,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonIcon,
- IonNote,
- IonPage,
- IonRow,
- IonText,
- IonTitle,
- IonToolbar,
-} from '@ionic/react';
-import { heart, heartOutline, play } from 'ionicons/icons';
-import { useStoreState } from 'pullstate';
-import { WordStore } from '../store';
-import { getFavourites } from '../store/Selectors';
-import { addToFavourites } from '../store/WordStore';
-import { WordCardHeading } from './WordCardHeading';
-import { WordMeaning } from './WordMeaning';
-
-const WordModal = ({ dismiss, word }) => {
- const favourites = useStoreState(WordStore, getFavourites);
- const isFavourite = favourites.includes(word);
- const audio = word.phonetics[0] ? word.phonetics[0].audio : false;
-
- const playAudio = () => {
- const audioElement = new Audio(`https:${audio}`);
- audioElement.play();
- };
-
- return (
- - {meaning.definitions.map((definition, index2) => { - return ( -
0 ? 'ion-padding-top' : ''}> - {index2 + 1}. - {definition.definition} -
- ); - })} -
- {word.meanings &&
- word.meanings.map((meaning, index) => {
- return (
-
-
- {meaning.partOfSpeech}
-
-
-
- );
- })}
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}>
-
-
-
- {product.category.name}
-{product.product.name}
-
- {product.product.price}
-
-
- £{total.toFixed(2)}
-
-
-
-
-
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}
- >
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoFacebookClone/components/Post.tsx b/03_source/mobile.trunk/src/pages/DemoFacebookClone/components/Post.tsx
deleted file mode 100644
index 275e4ad..0000000
--- a/03_source/mobile.trunk/src/pages/DemoFacebookClone/components/Post.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
- IonAvatar,
- IonButton,
- IonCol,
- IonIcon,
- IonImg,
- IonItem,
- IonLabel,
- IonRow,
- IonText,
-} from '@ionic/react';
-import {
- arrowRedoOutline,
- chatboxOutline,
- ellipsisHorizontal,
- globe,
- heart,
- thumbsUp,
- thumbsUpOutline,
-} from 'ionicons/icons';
-import '../pages/Tab2.css';
-import React from 'react';
-
-const Post = (props): React.JSX.Element => {
- const { post } = props;
-
- return (
- - Explore{' '} - - UI Components - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- {post.image &&
- {post.name}
-
- {post.sponsored ? 'Sponsored' : post.time}
-
-
{post.message}
-
-
-
-
- Learn more
-
- )}
-
- ionicframework.com
-Start building apps today!
-
-
-
-
-
-
- {post.sponsored && {post.views} Views
} -
-
- Like
-
-
-
- Comment
-
-
-
- Share
-
-
- {props.message.name}
-This is a test message for a messenger item
-
- {props.message.new_message_count}
- )}
-
- {props.message.last_message_sent} min
- {props.message.new_message_count > 0 && ( -
-
-
*/
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoFacebookClone/pages/Tab2.tsx b/03_source/mobile.trunk/src/pages/DemoFacebookClone/pages/Tab2.tsx
deleted file mode 100644
index 9b7f202..0000000
--- a/03_source/mobile.trunk/src/pages/DemoFacebookClone/pages/Tab2.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import {
- IonAvatar,
- IonButton,
- IonButtons,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonIcon,
- IonImg,
- IonInput,
- IonItem,
- IonLabel,
- IonPage,
- IonRouterLink,
- IonRow,
- IonSearchbar,
- IonText,
- IonTitle,
- IonToolbar,
- useIonRouter,
-} from '@ionic/react';
-import {
- searchOutline,
- chatboxOutline,
- playCircleOutline,
- bagOutline,
- homeOutline,
- menuOutline,
- flagOutline,
- notificationsOutline,
- homeSharp,
- home,
- videocam,
- images,
- globe,
- ellipse,
- ellipsisHorizontal,
- thumbsUp,
- heart,
- thumbsUpOutline,
- shareOutline,
- arrowRedoOutline,
- chevronBackOutline,
-} from 'ionicons/icons';
-import ExploreContainer from '../components/ExploreContainer';
-import Post from '../components/Post';
-import { messages, posts } from '../main/messages';
-import './Tab2.css';
-import React from 'react';
-
-const Tab2 = (): React.JSX.Element => {
- const router = useIonRouter();
-
- function handleBackClick() {
- router.goBack();
- }
-
- return (
- ionicbook
- -
-
-
-
- Create
-
- Room -
-
- - Room -
- {messages.map((message, index) => {
- if (index > 1) {
- return (
-
-
-
-
- {message.online && }
-
- );
- }
- })}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* */}
- */}
-
-
- Ionic Framework
-
- Sponsored
-
Build cross-platform web native mobile apps with one codebase! 🎉
-
-
-
-
- Learn more
-
-
- ionicframework.com
-Start building apps today!
-
-
-
-
-
-
- 16K Views
-
-
- Like
-
-
-
- Comment
-
-
-
- Share
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-// -//
- addProductToFavourites(e, category.slug, product.id) } />
-
- { product.name }
-
-
- { product.price }
-
- addProductToCart(e, category.slug, product.id) }>
-
-
-
- 
- { product.category.name }
-{ product.product.name }
-
- { product.product.price }
-
-
- £{ total.toFixed(2) }
-
-
-
-
- 
- Kids eat free on any orders over £20.00
-
- Order for a collection or get a local delivery
-
- addProductToFavourites(e, category.slug, product.id) } />
-
- { product.name }
-
-
- { product.price }
-
- addProductToCart(e, category.slug, product.id) }>
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoFloatingTabs/index.tsx b/03_source/mobile.trunk/src/pages/DemoFloatingTabs/index.tsx
deleted file mode 100644
index 71a067d..0000000
--- a/03_source/mobile.trunk/src/pages/DemoFloatingTabs/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IonIcon, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-import Tab1 from './pages/Tab1';
-import Tab2 from './pages/Tab2';
-import Tab3 from './pages/Tab3';
-
-import './theme/style.scss';
-import './theme/floating-tab-bar.scss';
-
-function DemoFloatingTabs() {
- return (
- - Explore{' '} - - UI Components - -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.module.scss b/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.module.scss
deleted file mode 100644
index 4854d16..0000000
--- a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.module.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-.postsContainer {
-
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
-}
-
-.postContainer {
-
- display: flex;
- flex-direction: column;
- margin-top: 1rem;
-}
-
-.postProfile {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-right: 0.75rem;
- padding-left: 0.75rem;
-}
-
-.postProfile ion-router-link {
-
- display: flex !important;
- flex-direction: row !important;
-}
-
-.postProfileInfo ion-avatar {
-
- height: 2.2rem;
- width: 2.2rem;
-}
-
-.postProfileInfo p {
-
- margin: 0;
- padding: 0;
- margin-left: 0.5rem;
- font-weight: 500;
- font-size: 0.9rem;
- color: black;
-}
-
-.postProfileInfo {
-
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- align-content: center;
-}
-
-.postImage {
-
- border-top: 1px solid rgb(216, 216, 216);
- margin-top: 0.5rem;
- height: 20rem;
- width: 100%;
-}
-
-.postImageLike {
-
- font-size: 10rem;
- color: rgb(231, 231, 231);
- position: absolute;
- left: 32vmin;
- margin-top: 20vmin;
- display: none;
-}
-
-.postActionsContainer {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-right: 0.75rem;
- padding-left: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postActions {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.postActions ion-icon,
-.postBookmark ion-icon {
-
- font-size: 1.5rem;
-}
-
-.postActions ion-icon:not(:first-child) {
-
- padding-left: 0.7rem;
-}
-
-.postLikesContainer {
-
- padding-left: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postLikesContainer p {
-
- margin: 0;
- padding: 0;
- font-weight: 200 !important;
- font-size: 0.8rem;
-}
-
-.postLikedName {
-
- font-weight: 600;
-}
-
-.postCaption {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0.3rem;
-}
-
-.postCaption p {
-
- margin: 0;
- padding: 0;
- font-weight: 200 !important;
- font-size: 0.8rem;
-}
-
-.postName {
-
- color: black !important;
- font-weight: 600 !important;
-}
-
-.postName ion-router-link {
-
- color: black;
-}
-
-.postComments {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postComments p {
-
- margin: 0;
- padding: 0;
- color:rgb(175, 175, 175);
- font-size: 0.8rem;
-}
-
-.postAddComment {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-left: 0.75rem;
- padding-right: 0.75rem;
-}
-
-.postAddCommentProfile {
-
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-content: center;
- align-items: center;
- margin-top: 0.5rem;
-}
-
-.postAddCommentProfile ion-avatar {
-
- height: 1.9rem;
- width: 1.9rem;
-}
-
-.postAddCommentProfile p {
-
- padding-left: 0.75rem;
- font-size: 0.8rem;
- color: rgb(175, 175, 175);
-}
-
-.postAddCommentActions {
-
-
-}
-
-.postAddCommentActions ion-icon {
-
- padding-left: 0.5rem;
-}
-
-.postTime {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0rem;
-}
-
-.postTime p {
-
- margin: 0;
- padding: 0;
- color: rgb(175, 175, 175);
- font-size: 0.6rem;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.tsx b/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.tsx
deleted file mode 100644
index dbcfeff..0000000
--- a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Feed.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { IonAvatar, IonIcon, IonRouterLink } from '@ionic/react';
-import {
- addCircleOutline,
- bookmarkOutline,
- chatbubbleOutline,
- ellipsisVertical,
- heart,
- heartOutline,
- paperPlaneOutline,
-} from 'ionicons/icons';
-import { likePost } from '../pages/PostStore';
-import { ProfilesStore } from '../pages/ProfilesStore';
-import { ProfileStore } from '../pages/ProfileStore';
-import styles from './Feed.module.scss';
-
-const Feed = (props): React.JSX.Element => {
- const { posts } = props;
- const profile = ProfileStore.useState((s) => s.profile);
- const profiles = ProfilesStore.useState((s) => s.profiles);
-
- const addLike = (event, postID, liked) => {
- likePost(event, postID, liked);
- };
-
- return (
- - Explore{' '} - - UI Components - -
-
- {posts.map((post, index) => {
- const postProfile = profiles.filter((p) => p.id === post.profile_id)[0];
-
- return (
-
- );
-};
-
-export default Feed;
diff --git a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.module.scss b/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.module.scss
deleted file mode 100644
index aeb99cb..0000000
--- a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.module.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-$border: linear-gradient(to bottom, #d82b7e, #f57939);
-
-.stories {
-
- height: fit-content;
- margin-top: -0.7rem;
-}
-
-.storiesContainer {
-
- overflow-x: scroll;
- overflow-y: hidden;
- -webkit-overflow-scrolling: touch;
- display: flex;
- flex-direction: row;
- width: 100%;
-}
-
-.storiesContainer::-webkit-scrollbar {
-
- display: none;
-}
-
-.story,
-.yourStory {
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- align-content: center;
- margin: 0 auto;
- width: 4rem !important;
- margin-left: 1rem;
-}
-
-.story:first-child,
-.yourStory:first-child {
-
- margin-left: 0.75rem;
-}
-
-.story p,
-.yourStory p {
-
- text-align: center;
- margin: 0;
- padding: 0;
- margin-top: 0.2rem;
- color: rgb(95, 95, 95);
- font-size: 0.7rem;
- font-weight: 400;
- width: 120%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
- margin-top: 5rem;
-}
-
-.story img,
-.yourStory img {
-
- height: 3.5rem !important;
- width: 3.5rem !important;
- position: absolute;
- border-radius: 500px;
- background: $border;
- padding: 0.1rem;
-}
-
-.yourStory img {
-
- background:rgb(214, 214, 214);
-}
-
-.storyAdd {
-
- position: absolute;
- color: white;
- background-color: var(--ion-color-primary);
- width: 1rem;
- height: 1rem;
- text-align: center;
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- align-items: center;
- align-content: center;
- justify-content: center;
- border-radius: 500px;
- border: 2px solid white;
-
- bottom: 20px;
- right: 0;
- padding: 0.5rem;
- font-size: 0.9rem;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.tsx b/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.tsx
deleted file mode 100644
index c902b30..0000000
--- a/03_source/mobile.trunk/src/pages/DemoInstagramClone/components/Stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { IonCol, IonRouterLink, IonRow } from '@ionic/react';
-import styles from './Stories.module.scss';
-
-const Stories = (props): React.JSX.Element => {
- const { profiles } = props;
-
- return (
-
-
- );
- })}
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
- {postProfile.username}
-
-
-
-
-
-
-
-
-
- addLike(e, post.id, post.liked)}
- />
-
-
-
-
-
-
-
- - Liked by alanmontgomery and{' '} - 2 others -
-
-
-
-
-
-
-
-
- View all {post.comments.length} comments
-
-
-
-
-
- 
-
-
-
- Add a comment...
-
-
-
-
- {post.time}
-
- {profiles.map((story, index) => {
- return (
-
- 
- {index === 0 &&
-
-
- );
- })}
-
- +
}
-
- {index === 0 ? 'Your story' : story.username}
-
-
- {profile.username}
-
- {profile.firstname} {profile.surname} -
-{profile.title}
-{profile.bio}
- - {profile.link} - -
-
- {profile.username}
-
- {profile.username} -
- - )} -- {profile.firstname} {profile.surname} -
-{profile.title}
-{profile.bio}
- - {profile.link} - -
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {item.name}
-{item.summary}
-
- {item.labels.map((label, index2) => {
- return (
-
- {label}
-
-
- );
- })}
-
-
-
- {id !== 1 && moveToggled && (
-
- handleMove(e, 'Left', id, id - 1, item.id)}
- >
-
- )}
-
- {id !== 3 && moveToggled && (
- handleMove(e, 'Right', id, id + 1, item.id)}
- >
-
- )}
-
-
-
-
- {item.name}
-{item.summary}
-
- Setting
-
- - (IonCard problem) -
-
-
-
-
- Logout
-
-
- Unable to receive notifications after logging out
-
-
-
-
- Cancel
-
-
- Logout
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${coffee.price}
-
-
-
- { offer.title }
-
- { offer.description }
-{coffee.description}
- -
-
- {coffee.name}
-
- ${coffee.price}
-
-
- ${total.toFixed(2)}
-
-
-
-
- router.goBack()}
- >
- 0 ? 'yellow-icon' : 'gray-icon'} />
-
-
-
-
- 
-
-
- Find the best coffee near you
-Popular
- -Special Offers
- router.goBack()}>
-
- addCoffeeToFavourites(e, coffee.id)}
- >
-
- {coffee.name}
-{coffee.description}
-
- addCoffeeToCart(e, coffee.id)}
- disabled={!selectedSize}
- expand="block"
- color="main"
- >
- Add to cart
-
-
-
-
- Price
-
- ${selectedSize ? getPrice() : '0.00'}
-
-
- router.goBack()}>
-
- router.push('/tabs/cart')}
- >
- 0 ? 'yellow-icon' : 'gray-icon'} />
-
- View Full Range
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss b/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss
deleted file mode 100644
index 1aa74fb..0000000
--- a/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.custom-tab-bar {
- * {
- /* --ion-background-color: white; */
- --ion-tab-bar-color: var(--tab-color);
- --ion-tab-bar-color-selected: var(--tab-color-selected);
- }
-
- ion-tab-bar {
- --background: var(--tab-background);
- box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
- border-radius: 50px !important;
-
- height: 50px;
- width: 50%;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-left: 10px;
- padding-right: 10px;
-
- bottom: 20px;
- position: relative;
- margin: 0 auto !important;
- border-top: none;
- }
-
- ion-tab-button {
- border-radius: 16px !important;
- }
-}
diff --git a/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/index.tsx b/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/index.tsx
deleted file mode 100644
index 6ccb3e7..0000000
--- a/03_source/mobile.trunk/src/pages/DemoPinterestFloatingTabBar/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { chatbubble, cloudOutline, home, person, search, searchOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-import Tab3 from './AppPages/Tab3';
-import Tab4 from './AppPages/Tab4';
-
-import './style.scss';
-import './custom-tab-bar.scss';
-
-function DemoPinterestFloatingTabBar() {
- return (
- Explore UI Components
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.count}
-{props.title}
-
-
-
-
-
-
-
-
-
-);
diff --git a/03_source/mobile.trunk/src/pages/DemoProfileExample/index.tsx b/03_source/mobile.trunk/src/pages/DemoProfileExample/index.tsx
deleted file mode 100644
index 392e5a6..0000000
--- a/03_source/mobile.trunk/src/pages/DemoProfileExample/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
-import Home from './pages/Home';
-
-function DemoProfileExample(): React.JSX.Element {
- return (
-
-
-
- {props.post.date}
-@93alan
-{props.post.text}
- -
-
-
-
- {props.post.comments}
-
-
-
- {props.post.likes}
-
-
-
-
-
-
-
- Posts by @93alan
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {person.name}
-{person.title}
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-It looks like you don't have any QR codes stored.
-
-
-
- Click the
{code.text ? code.text : code}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
- Start Quiz!
-
- 🎉
-{ label }
-{ label }
-{ quote.text }
-- { quote.author }
-You haven't saved any bookmarks yet.
-{ quote.text }
-{ quote.author }
--
Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!icon && 'Add to cart'}
- {icon &&
-
-
-
-
- );
-};
-
-export default AddToCartButton;
diff --git a/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.module.css b/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.module.css
deleted file mode 100644
index fa0f815..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.priceContainer {
-
- display: flex;
- flex-direction: row;
- align-content: center;
- justify-content: space-between;
- align-items: center;
-}
-
-.price {
-
- margin-top: 0.7rem;
- border: 1px solid var(--ion-color-primary);
- color: var(--ion-color-primary);
- width: fit-content;
- padding: 1rem;
- border-radius: 10px;
- font-weight: 600;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.tsx b/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.tsx
deleted file mode 100644
index 272efcb..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactAddToCart/components/Product.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- IonCard,
- IonCardContent,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonGrid,
- IonRow,
- IonText,
-} from '@ionic/react';
-import AddToCartButton from './AddToCartButton';
-
-import styles from './Product.module.css';
-
-const Product = ({ product }): React.JSX.Element => {
- const handleAdd = (product) => {
- console.log(`Product added: ${product.name}`);
- console.log({ product });
-
- // Do something
- // Update Main Cart
- // Global State Stuff
- // API Call
- // etc etc
- };
-
- return (
- {feature}
; - })} -{product.price}
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {showTitle &&
- {showTitle}
} -{sumHistory}
-- {sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoReactDrawingCanvas/index.tsx b/03_source/mobile.trunk/src/pages/DemoReactDrawingCanvas/index.tsx
deleted file mode 100644
index cb105e1..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactDrawingCanvas/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import Home from './pages/Home';
-
-function DemoReactDrawingCanvas() {
- return (
- - Start with Ionic{' '} - - UI Components - -
-
-
-
-
- setShowColorPicker(!showColorPicker)}
- >
-
-
- {showColorPicker && (
-
-
- {!showColorPicker && (
- <>
-
-
- Size
- setBrushSize(parseInt(e.target.value))}
- />
-
-
-
-
- canvasRef.undo()}>
-
-
-
-
- canvasRef.clear()}>
-
-
-
- )}
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoReactItemList/index.tsx b/03_source/mobile.trunk/src/pages/DemoReactItemList/index.tsx
deleted file mode 100644
index 3fabe7c..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactItemList/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import './theme/variables.scss';
-import Home from './pages/Home';
-import Movies from './pages/Movies';
-
-function DemoReactItemList() {
- return (
- Start with Ionic UI Components
-
-
- {results.length} {results.legnth === 1 ? 'employee' : 'employees'} found
-
- search(e)}
- onKeyPress={(e) => search(e)}
- placeholder="Search..."
- icon={search}
- slot="end"
- />
-
-
- {results.map((employee, index) => {
- return (
-
- 
-
-
-
-
- remove(employee.id)}>
-
-
- );
- })}
-
-
- {employee.name}
-{employee.title}
-
- { totalResults } { (totalResults === 1) ? "movie" : "movies" } found
- search(e) } onKeyPress={ e => search(e) } placeholder="Search..." icon={ search } slot="end" />
-
- { movie.title }
-{ movie.overview }
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.css b/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.css
deleted file mode 100644
index 0ca47a2..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.css
+++ /dev/null
@@ -1,113 +0,0 @@
-ion-menu ion-content {
- --background: var(--ion-item-background, var(--ion-background-color, #fff));
-}
-
-ion-menu.md ion-content {
- --padding-start: 8px;
- --padding-end: 8px;
- --padding-top: 20px;
- --padding-bottom: 20px;
-}
-
-ion-menu.md ion-list {
- padding: 20px 0;
-}
-
-ion-menu.md ion-note {
- margin-bottom: 30px;
-}
-
-ion-menu.md ion-list-header, ion-menu.md ion-note {
- padding-left: 10px;
-}
-
-ion-menu.md ion-list#inbox-list {
- border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
-}
-
-ion-menu.md ion-list#inbox-list ion-list-header {
- font-size: 22px;
- font-weight: 600;
- min-height: 20px;
-}
-
-ion-menu.md ion-list#labels-list ion-list-header {
- font-size: 16px;
- margin-bottom: 18px;
- color: #757575;
- min-height: 26px;
-}
-
-ion-menu.md ion-item {
- --padding-start: 10px;
- --padding-end: 10px;
- border-radius: 4px;
-}
-
-ion-menu.md ion-item.selected {
- --background: rgba(var(--ion-color-primary-rgb), 0.14);
-}
-
-ion-menu.md ion-item.selected ion-icon {
- color: var(--ion-color-primary);
-}
-
-ion-menu.md ion-item ion-icon {
- color: #616e7e;
-}
-
-ion-menu.md ion-item ion-label {
- font-weight: 500;
-}
-
-ion-menu.ios ion-content {
- --padding-bottom: 20px;
-}
-
-ion-menu.ios ion-list {
- padding: 20px 0 0 0;
-}
-
-ion-menu.ios ion-note {
- line-height: 24px;
- margin-bottom: 20px;
-}
-
-ion-menu.ios ion-item {
- --padding-start: 16px;
- --padding-end: 16px;
- --min-height: 50px;
-}
-
-ion-menu.ios ion-item ion-icon {
- font-size: 24px;
- color: #73849a;
-}
-
-ion-menu.ios ion-item .selected ion-icon {
- color: var(--ion-color-primary);
-}
-
-ion-menu.ios ion-list#labels-list ion-list-header {
- margin-bottom: 8px;
-}
-
-ion-menu.ios ion-list-header,
-ion-menu.ios ion-note {
- padding-left: 16px;
- padding-right: 16px;
-}
-
-ion-menu.ios ion-note {
- margin-bottom: 8px;
-}
-
-ion-note {
- display: inline-block;
- font-size: 16px;
- color: var(--ion-color-medium-shade);
-}
-
-ion-item.selected {
- --color: var(--ion-color-primary);
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.tsx b/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.tsx
deleted file mode 100644
index 7024a26..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLifecycles/components/Menu.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
- IonContent,
- IonIcon,
- IonItem,
- IonLabel,
- IonList,
- IonListHeader,
- IonMenu,
- IonMenuToggle,
- IonNote,
-} from '@ionic/react';
-
-import { useLocation } from 'react-router-dom';
-import { archiveOutline, archiveSharp, bookmarkOutline, heartOutline, heartSharp, mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
-import './Menu.css';
-
-interface AppPage {
- url: string;
- iosIcon: string;
- mdIcon: string;
- title: string;
-}
-
-const appPages: AppPage[] = [
- {
- title: 'Inbox',
- url: '/page/Inbox',
- iosIcon: mailOutline,
- mdIcon: mailSharp
- },
- {
- title: 'Outbox',
- url: '/page/Outbox',
- iosIcon: paperPlaneOutline,
- mdIcon: paperPlaneSharp
- },
- {
- title: 'Favorites',
- url: '/page/Favorites',
- iosIcon: heartOutline,
- mdIcon: heartSharp
- },
- {
- title: 'Archived',
- url: '/page/Archived',
- iosIcon: archiveOutline,
- mdIcon: archiveSharp
- },
- {
- title: 'Trash',
- url: '/page/Trash',
- iosIcon: trashOutline,
- mdIcon: trashSharp
- },
- {
- title: 'Spam',
- url: '/page/Spam',
- iosIcon: warningOutline,
- mdIcon: warningSharp
- }
-];
-
-const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
-
-const Menu: React.FC = () => {
- const location = useLocation();
-
- return (
- Explore UI Components
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.message}
-
-
- {field.label}
- {error &&
-
- );
-};
-
-export default CustomField;
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLogin/components/Wave.tsx b/03_source/mobile.trunk/src/pages/DemoReactLogin/components/Wave.tsx
deleted file mode 100644
index 6e7c821..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLogin/components/Wave.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export const Wave = (): React.JSX.Element => (
-
-);
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLogin/data/fields.tsx b/03_source/mobile.trunk/src/pages/DemoReactLogin/data/fields.tsx
deleted file mode 100644
index 62f7eac..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLogin/data/fields.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useFormInput } from "./utils";
-
-export const useSignupFields = () => {
-
- return [
- {
- id: "name",
- label: "Name",
- required: true,
- input: {
-
- props: {
-
- type: "text",
- placeholder: "Joe Bloggs"
- },
- state: useFormInput("")
- }
- },
- {
- id: "email",
- label: "Email",
- required: true,
- input: {
-
- props: {
-
- type: "email",
- placeholder: "joe@bloggs.com"
- },
- state: useFormInput("")
- }
- },
- {
- id: "password",
- label: "Password",
- required: true,
- input: {
-
- props: {
-
- type: "password",
- placeholder: "*********"
- },
- state: useFormInput("")
- }
- }
- ];
-}
-
-export const useLoginFields = () => {
-
- return [
-
- {
- id: "email",
- label: "Email",
- required: true,
- input: {
-
- props: {
- type: "email",
- placeholder: "joe@bloggs.com"
- },
- state: useFormInput("")
- }
- },
- {
- id: "password",
- label: "Password",
- required: true,
- input: {
-
- props: {
- type: "password",
- placeholder: "*******"
- },
- state: useFormInput("")
- }
- }
- ];
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLogin/data/utils.tsx b/03_source/mobile.trunk/src/pages/DemoReactLogin/data/utils.tsx
deleted file mode 100644
index 10a39dd..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLogin/data/utils.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState } from "react";
-
-export const useFormInput = (initialValue = "") => {
-
- const [ value, setValue ] = useState(initialValue);
-
- const handleChange = async e => {
-
- const tempValue = await e.currentTarget.value;
- setValue(tempValue);
- }
-
- return {
-
- value,
- reset: (newValue) => setValue(newValue),
- onIonChange: handleChange,
- onKeyUp: handleChange
- };
-}
-
-export const validateForm = fields => {
-
- let errors = [];
-
- fields.forEach(field => {
-
- if (field.required) {
-
- const fieldValue = field.input.state.value;
-
- if (fieldValue === "") {
-
- const error = {
-
- id: field.id,
- message: `Please check your ${ field.id }`,
- };
-
- errors.push(error);
- }
- }
- });
-
- return errors;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk/src/pages/DemoReactLogin/index.tsx b/03_source/mobile.trunk/src/pages/DemoReactLogin/index.tsx
deleted file mode 100644
index 3c4c4dc..0000000
--- a/03_source/mobile.trunk/src/pages/DemoReactLogin/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import './theme/variables.scss';
-
-import Home from './pages/Home';
-import Login from './pages/Login';
-import Signup from './pages/Signup';
-
-function DemoReactLogin() {
- return (
- {errorMessage}
} -
-
-
-
-
- Join millions of other people discovering their creative side
-
-
-
-
-
-
-
-
- Get started →
-
-
-
-
-
-
- Welcome back, hope you're doing well
-Lets get to know each other
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { details.name }
-
-
- { profile.name }
-
- - { profile.bio } -
-
- {character.name}
-
-
- {character.name}
-
- {character.description}
-
- {character.comics.available}
- comics
-
-
- {character.stories.available}
- stories
-
-
- {character.series.available}
- series
-
-