diff --git a/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab1.jsx b/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab1.jsx
index 54ab2b9..a24d76a 100644
--- a/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab1.jsx
+++ b/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab1.jsx
@@ -14,9 +14,9 @@ import {
import { Geolocation } from '@capacitor/geolocation';
import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab1() {
const router = useIonRouter();
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx b/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx
index 216544f..c258179 100644
--- a/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx
+++ b/03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx
@@ -10,7 +10,7 @@ import {
IonToolbar,
} from '@ionic/react';
import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab2() {
const [search, setSearch] = useState('');
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/WeatherProperty.tsx b/03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/WeatherProperty.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/WeatherProperty.tsx
rename to 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/WeatherProperty.tsx
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/index.tsx b/03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/index.tsx
rename to 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/index.tsx
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonDashboard/index.tsx b/03_source/mobile/src/pages/DemoSkeletonText/TestComponents/SkeletonDashboard/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonDashboard/index.tsx
rename to 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/SkeletonDashboard/index.tsx
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/components/Posts.tsx b/03_source/mobile/src/pages/DemoSkeletonText/components/Posts.tsx
new file mode 100644
index 0000000..42960ef
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoSkeletonText/components/Posts.tsx
@@ -0,0 +1,29 @@
+import { IonImg, IonItem, IonLabel, IonList, IonLoading, IonThumbnail } from '@ionic/react';
+import { SkeletonPosts } from './SkeletonPosts';
+
+export const Posts = ({ posts, useSkeleton }): React.JSX.Element => (
+ <>
+ {posts.length > 0 ? (
+
+ {posts.map((post, index) => {
+ return (
+
+
+
+
+
+ {post.title}
+ {post.blurb}
+ {post.date}
+
+
+ );
+ })}
+
+ ) : useSkeleton ? (
+
+ ) : (
+
+ )}
+
+);
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx b/03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx
new file mode 100644
index 0000000..7edb9e4
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx
@@ -0,0 +1,36 @@
+import {
+ IonItem,
+ IonLabel,
+ IonList,
+ IonSkeletonText,
+ IonThumbnail,
+} from "@ionic/react";
+
+export const SkeletonPosts = (): JSX.Element => {
+ const postAmount = 10;
+
+ return (
+
+ {[...Array(postAmount)].map((post, index) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ );
+};
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/data/index.ts b/03_source/mobile/src/pages/DemoSkeletonText/data/index.ts
new file mode 100644
index 0000000..7eb4faf
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoSkeletonText/data/index.ts
@@ -0,0 +1,72 @@
+export const fakePosts = [
+ {
+ title: 'Sed ut perspiciatis unde',
+ blurb:
+ 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+ image: '/assets/DemoSkeletonText/scenery/1.png',
+ date: '01/04/2021',
+ },
+ {
+ title: 'But I must explain to you',
+ blurb:
+ 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth',
+ image: '/assets/DemoSkeletonText/scenery/2.png',
+ date: '23/02/2021',
+ },
+ {
+ title: 'Far far away, behind the word',
+ blurb:
+ 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.',
+ image: '/assets/DemoSkeletonText/scenery/3.png',
+ date: '18/02/2021',
+ },
+ {
+ title: 'A wonderful serenity',
+ blurb:
+ 'A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot.',
+ image: '/assets/DemoSkeletonText/scenery/4.png',
+ date: '09/02/2021',
+ },
+ {
+ title: 'Morning troubled dreams',
+ blurb:
+ 'One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head.',
+ image: '/assets/DemoSkeletonText/scenery/5.png',
+ date: '01/02/2021',
+ },
+ {
+ title: 'The quick brown fox',
+ blurb:
+ 'The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.',
+ image: '/assets/DemoSkeletonText/scenery/6.png',
+ date: '14/01/2021',
+ },
+ {
+ title: 'Lorem ipsum dolor',
+ blurb:
+ 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+ image: '/assets/DemoSkeletonText/scenery/7.png',
+ date: '04/01/2021',
+ },
+ {
+ title: 'Lorem ipsum dolor',
+ blurb:
+ 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+ image: '/assets/DemoSkeletonText/scenery/8.png',
+ date: '04/01/2021',
+ },
+ {
+ title: 'Lorem ipsum dolor',
+ blurb:
+ 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+ image: '/assets/DemoSkeletonText/scenery/9.png',
+ date: '04/01/2021',
+ },
+ {
+ title: 'Lorem ipsum dolor',
+ blurb:
+ 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+ image: '/assets/DemoSkeletonText/scenery/10.png',
+ date: '04/01/2021',
+ },
+];
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/index.tsx b/03_source/mobile/src/pages/DemoSkeletonText/index.tsx
index c33e8e7..1e3d8e9 100644
--- a/03_source/mobile/src/pages/DemoSkeletonText/index.tsx
+++ b/03_source/mobile/src/pages/DemoSkeletonText/index.tsx
@@ -3,36 +3,20 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+import Home from './pages/Home';
function DemoSkeletonText() {
return (
-
-
-
-
-
+
+
-
+
-
- {/* */}
-
-
-
- Dashboard
-
-
-
- Search
-
-
);
}
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/pages/Home.scss b/03_source/mobile/src/pages/DemoSkeletonText/pages/Home.scss
new file mode 100644
index 0000000..e69de29
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/pages/Home.tsx b/03_source/mobile/src/pages/DemoSkeletonText/pages/Home.tsx
new file mode 100644
index 0000000..5739132
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoSkeletonText/pages/Home.tsx
@@ -0,0 +1,63 @@
+import {
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonPage,
+ IonTitle,
+ IonToolbar,
+ useIonRouter,
+} from '@ionic/react';
+import './Home.scss';
+
+import { fakePosts } from '../data';
+import React, { useEffect, useState } from 'react';
+import { Posts } from '../components/Posts';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = (): React.JSX.Element => {
+ const [posts, setPosts] = useState([]);
+
+ const router = useIonRouter();
+ function handleBackClick() {
+ router.goBack();
+ }
+
+ useEffect(() => {
+ setTimeout(() => setPosts(fakePosts), 2000);
+ }, []);
+
+ return (
+
+
+
+ Posts TS
+
+
+ handleBackClick()}>
+
+
+
+
+
+
+
+
+ Posts TS
+
+
+ handleBackClick()}>
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/style.scss b/03_source/mobile/src/pages/DemoSkeletonText/style.scss
deleted file mode 100644
index 37c1e1a..0000000
--- a/03_source/mobile/src/pages/DemoSkeletonText/style.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-#about-page {
- ion-toolbar {
- position: absolute;
-
- top: 0;
- left: 0;
- right: 0;
-
- --background: transparent;
- --color: white;
- }
-
- ion-toolbar ion-back-button,
- ion-toolbar ion-button,
- ion-toolbar ion-menu-button {
- --color: white;
- }
-
- .about-header {
- position: relative;
-
- width: 100%;
- height: 30%;
- }
-
- .about-header .about-image {
- position: absolute;
-
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
-
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
-
- opacity: 0;
-
- transition: opacity 500ms ease-in-out;
- }
-
- .about-header .madison {
- background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
- }
-
- .about-header .austin {
- background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
- }
-
- .about-header .chicago {
- background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
- }
-
- .about-header .seattle {
- background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
- }
-
- .about-info {
- position: relative;
- margin-top: -10px;
- border-radius: 10px;
- background: var(--ion-background-color, #fff);
- z-index: 2; // display rounded border above header image
- }
-
- .about-info h3 {
- margin-top: 0;
- }
-
- .about-info ion-list {
- padding-top: 0;
- }
-
- .about-info p {
- line-height: 130%;
-
- color: var(--ion-color-dark);
- }
-
- .about-info ion-icon {
- margin-inline-end: 32px;
- }
-
- /*
- * iOS Only
- */
-
- .ios .about-info {
- --ion-padding: 19px;
- }
-
- .ios .about-info h3 {
- font-weight: 700;
- }
-}
-
-#date-input-popover {
- --offset-y: -var(--ion-safe-area-bottom);
-
- --max-width: 90%;
- --width: 336px;
-}
diff --git a/03_source/mobile/src/pages/DemoSkeletonText/theme/variables.css b/03_source/mobile/src/pages/DemoSkeletonText/theme/variables.css
new file mode 100644
index 0000000..088e83c
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoSkeletonText/theme/variables.css
@@ -0,0 +1,77 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+ /** primary **/
+ --ion-color-primary: #3880ff;
+ --ion-color-primary-rgb: 56, 128, 255;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
+ --ion-color-primary-shade: #3171e0;
+ --ion-color-primary-tint: #4c8dff;
+
+ /** secondary **/
+ --ion-color-secondary: #3dc2ff;
+ --ion-color-secondary-rgb: 61, 194, 255;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #36abe0;
+ --ion-color-secondary-tint: #50c8ff;
+
+ /** tertiary **/
+ --ion-color-tertiary: #5260ff;
+ --ion-color-tertiary-rgb: 82, 96, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #4854e0;
+ --ion-color-tertiary-tint: #6370ff;
+
+ /** success **/
+ --ion-color-success: #2dd36f;
+ --ion-color-success-rgb: 45, 211, 111;
+ --ion-color-success-contrast: #ffffff;
+ --ion-color-success-contrast-rgb: 255, 255, 255;
+ --ion-color-success-shade: #28ba62;
+ --ion-color-success-tint: #42d77d;
+
+ /** warning **/
+ --ion-color-warning: #ffc409;
+ --ion-color-warning-rgb: 255, 196, 9;
+ --ion-color-warning-contrast: #000000;
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
+ --ion-color-warning-shade: #e0ac08;
+ --ion-color-warning-tint: #ffca22;
+
+ /** danger **/
+ --ion-color-danger: #eb445a;
+ --ion-color-danger-rgb: 235, 68, 90;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #cf3c4f;
+ --ion-color-danger-tint: #ed576b;
+
+ /** dark **/
+ --ion-color-dark: #222428;
+ --ion-color-dark-rgb: 34, 36, 40;
+ --ion-color-dark-contrast: #ffffff;
+ --ion-color-dark-contrast-rgb: 255, 255, 255;
+ --ion-color-dark-shade: #1e2023;
+ --ion-color-dark-tint: #383a3e;
+
+ /** medium **/
+ --ion-color-medium: #92949c;
+ --ion-color-medium-rgb: 146, 148, 156;
+ --ion-color-medium-contrast: #ffffff;
+ --ion-color-medium-contrast-rgb: 255, 255, 255;
+ --ion-color-medium-shade: #808289;
+ --ion-color-medium-tint: #9d9fa6;
+
+ /** light **/
+ --ion-color-light: #f4f5f8;
+ --ion-color-light-rgb: 244, 245, 248;
+ --ion-color-light-contrast: #000000;
+ --ion-color-light-contrast-rgb: 0, 0, 0;
+ --ion-color-light-shade: #d7d8da;
+ --ion-color-light-tint: #f5f6f9;
+}
\ No newline at end of file