louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update DemoSkeletonText,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 11:05:39 +08:00
parent a40b0fa4b1
commit 5b10977a64
13 changed files with 286 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab1.jsx
View File

@@ -14,9 +14,9 @@ import {
import { Geolocation } from '@capacitor/geolocation'; import { Geolocation } from '@capacitor/geolocation';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { SkeletonDashboard } from '../components/SkeletonDashboard'; import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
import { chevronBackOutline, refreshOutline } from 'ionicons/icons'; import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
import { CurrentWeather } from '../components/CurrentWeather'; import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab1() { function Tab1() {
const router = useIonRouter(); const router = useIonRouter();

2
03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx
View File

@@ -10,7 +10,7 @@ import {
IonToolbar, IonToolbar,
} from '@ionic/react'; } from '@ionic/react';
import { useState } from 'react'; import { useState } from 'react';
import { CurrentWeather } from '../components/CurrentWeather'; import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab2() { function Tab2() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');

0
03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/WeatherProperty.tsx → 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/WeatherProperty.tsx
View File

0
03_source/mobile/src/pages/DemoSkeletonText/components/CurrentWeather/index.tsx → 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/CurrentWeather/index.tsx
View File

0
03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonDashboard/index.tsx → 03_source/mobile/src/pages/DemoSkeletonText/TestComponents/SkeletonDashboard/index.tsx
View File

29
03_source/mobile/src/pages/DemoSkeletonText/components/Posts.tsx Normal file
View File

@@ -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 ? (
<IonList>
{posts.map((post, index) => {
return (
<IonItem key={index}>
<IonThumbnail slot="start">
<IonImg src={post.image} />
</IonThumbnail>
<IonLabel className="">
<h3>{post.title}</h3>
<p>{post.blurb}</p>
<p>{post.date}</p>
</IonLabel>
</IonItem>
);
})}
</IonList>
) : useSkeleton ? (
<SkeletonPosts />
) : (
<IonLoading isOpen={true} spinner="bubbles" message="Loading posts..." />
)}
</>
);

36
03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx Normal file
View File

@@ -0,0 +1,36 @@
import {
IonItem,
IonLabel,
IonList,
IonSkeletonText,
IonThumbnail,
} from "@ionic/react";
export const SkeletonPosts = (): JSX.Element => {
const postAmount = 10;
return (
<IonList>
{[...Array(postAmount)].map((post, index) => {
return (
<IonItem key={index}>
<IonThumbnail slot="start">
<IonSkeletonText animated />
</IonThumbnail>
<IonLabel>
<h3>
<IonSkeletonText animated style={{ width: "50%" }} />
</h3>
<p>
<IonSkeletonText animated style={{ width: "100%" }} />
</p>
<p>
<IonSkeletonText animated style={{ width: "30%" }} />
</p>
</IonLabel>
</IonItem>
);
})}
</IonList>
);
};

72
03_source/mobile/src/pages/DemoSkeletonText/data/index.ts Normal file
View File

@@ -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',
},
];

28
03_source/mobile/src/pages/DemoSkeletonText/index.tsx
View File

@@ -3,36 +3,20 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
import { cloudOutline, searchOutline } from 'ionicons/icons'; import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router'; import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1'; // import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2'; // import Tab2 from './AppPages/Tab2';
import Home from './pages/Home';
import './style.scss';
function DemoSkeletonText() { function DemoSkeletonText() {
return ( return (
<IonTabs> <IonTabs>
<IonRouterOutlet> <IonRouterOutlet>
<Route exact path="/demo-weather-app/tab1"> <Route exact path="/demo-skeleton-text/home">
<Tab1 /> <Home />
</Route>
<Route exact path="/demo-weather-app/tab2">
<Tab2 />
</Route> </Route>
<Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" /> <Redirect exact path="/demo-skeleton-text" to="/demo-skeleton-text/home" />
</IonRouterOutlet> </IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-weather-app/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-weather-app/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs> </IonTabs>
); );
} }

0
03_source/mobile/src/pages/DemoSkeletonText/pages/Home.scss Normal file
View File

63
03_source/mobile/src/pages/DemoSkeletonText/pages/Home.tsx Normal file
View File

@@ -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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Posts TS</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Posts TS</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<Posts posts={posts} useSkeleton={true} />
</IonContent>
</IonPage>
);
};
export default Home;

103
03_source/mobile/src/pages/DemoSkeletonText/style.scss
View File

@@ -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;
}

77
03_source/mobile/src/pages/DemoSkeletonText/theme/variables.css Normal file
View File

@@ -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;
}