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

update,

Browse Source
This commit is contained in:
louiscklaw
2025-06-05 11:29:42 +08:00
parent 8c46a93e61
commit d909805283
207 changed files with 10412 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
03_source/mobile/src/pages/DemoBlogPostUi/AppPages/BlogPost.css Normal file
View File

@@ -0,0 +1,7 @@
.view-post-footer {
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
}

90
03_source/mobile/src/pages/DemoBlogPostUi/AppPages/BlogPost.jsx Normal file
View File

@@ -0,0 +1,90 @@
import {
IonBackButton,
IonBadge,
IonButton,
IonButtons,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonContent,
IonFooter,
IonGrid,
IonHeader,
IonIcon,
IonNote,
IonPage,
IonRow,
IonText,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { bookmarkOutline, shareOutline } from 'ionicons/icons';
import { useParams } from 'react-router';
import { blogPosts } from '../localData';
import './BlogPost.css';
const BlogPost = () => {
const { id } = useParams();
const post = blogPosts.filter((post) => parseInt(post.id) === parseInt(id))[0];
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blog</IonTitle>
<IonButtons slot="start">
<IonBackButton text="Blog Posts" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<img src={post.image} alt="post header" />
<IonGrid className="ion-padding-start ion-padding-end">
<IonRow className="ion-align-items-center ion-justify-content-between">
<IonRow className="ion-align-items-center ion-justify-content-between">
<img src={post.authorImage} className="post-author-avatar" alt="post author" />
<IonCardSubtitle className="ion-no-margin ion-no-padding ion-margin-start">
{post.author}
</IonCardSubtitle>
</IonRow>
<IonNote>{post.date}</IonNote>
</IonRow>
<IonRow>
<IonCol size="12">
<IonCardTitle className="post-title">{post.title}</IonCardTitle>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<IonText color="medium">{post.content}</IonText>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
<IonFooter className="view-post-footer">
<IonRow className="post-footer ion-align-self-center ion-justify-content-between">
<div>
<IonButton fill="clear" color="primary">
<IonIcon icon={shareOutline} />
</IonButton>
<IonButton fill="clear" color="primary">
<IonIcon icon={bookmarkOutline} />
</IonButton>
</div>
<div>
<IonBadge color="primary" className="post-category">
{post.category}
</IonBadge>
</div>
</IonRow>
</IonFooter>
</IonPage>
);
};
export default BlogPost;

51
03_source/mobile/src/pages/DemoBlogPostUi/AppPages/Home.jsx Normal file
View File

@@ -0,0 +1,51 @@
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { Post } from '../components/Post';
import { blogPosts } from '../localData';
import { chevronBackOutline } from 'ionicons/icons';
const Home = () => {
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Blog</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">Ionic Blog</IonTitle>
</IonToolbar>
</IonHeader>
{blogPosts.map((post, index) => (
<Post post={post} key={`post_${index}`} />
))}
</IonContent>
</IonPage>
);
};
export default Home;

37
03_source/mobile/src/pages/DemoBlogPostUi/components/Post.css Normal file
View File

@@ -0,0 +1,37 @@
.post-author-avatar {
height: 2rem;
width: 2rem;
border-radius: 500px;
}
.post-title {
font-size: 1.4rem;
margin-top: 0.75rem;
}
.post-content {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.post-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
width: 100%;
border-top: 2px solid rgb(245, 245, 245);
margin-top: 2rem;
padding-top: 1rem;
}
.post-category {
margin-top: 1.1rem;
}
.post-image {
width: 100%;
}

57
03_source/mobile/src/pages/DemoBlogPostUi/components/Post.jsx Normal file
View File

@@ -0,0 +1,57 @@
import {
IonBadge,
IonButton,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonIcon,
IonNote,
IonRow,
} from '@ionic/react';
import { bookmarkOutline, shareOutline } from 'ionicons/icons';
import './Post.css';
export const Post = ({ post }) => {
return (
<IonCard routerLink={`/demo-blog-post-ui/post/${post.id}`}>
<img src={post.image} alt="main post" className="post-image" />
<IonCardHeader>
<IonRow className="ion-align-items-center ion-justify-content-between">
<IonRow className="ion-align-items-center ion-justify-content-between">
<img src={post.authorImage} className="post-author-avatar" alt="post author" />
<IonCardSubtitle className="ion-no-margin ion-no-padding ion-margin-start">
{post.author}
</IonCardSubtitle>
</IonRow>
<IonNote>{post.date}</IonNote>
</IonRow>
<IonCardTitle className="post-title">{post.title}</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<p className="post-content">{post.content}</p>
<IonRow className="post-footer ion-align-self-center ion-justify-content-between">
<div>
<IonButton fill="clear" color="primary">
<IonIcon icon={shareOutline} />
</IonButton>
<IonButton fill="clear" color="primary">
<IonIcon icon={bookmarkOutline} />
</IonButton>
</div>
<div>
<IonBadge color="primary" className="post-category">
{post.category}
</IonBadge>
</div>
</IonRow>
</IonCardContent>
</IonCard>
);
};

27
03_source/mobile/src/pages/DemoBlogPostUi/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Home from './AppPages/Home';
import BlogPost from './AppPages/BlogPost';
import './style.scss';
function DemoBlogPostUi() {
return (
<IonRouterOutlet className="demo-blog-post-ui">
<Route exact path="/demo-blog-post-ui/home">
<Home />
</Route>
<Route exact path="/demo-blog-post-ui/post/:id">
<BlogPost />
</Route>
<Redirect exact path="/demo-blog-post-ui" to="/demo-blog-post-ui/home" />
</IonRouterOutlet>
);
}
export default DemoBlogPostUi;

98
03_source/mobile/src/pages/DemoBlogPostUi/localData/index.js Normal file
View File

@@ -0,0 +1,98 @@
export const blogPosts = [
{
"id": 1,
"title": "How to Convince Your Boss to Choose Ionic",
"title_link": "https://ionicframework.com/blog/convince-boss-choose-ionic-app-development/",
"date": "August 3, 2021",
"author": "By Kim Maida",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2021/07/kim-maida-150x150.jpg",
"category": "ANNOUNCEMENTS",
"category_link": "https://ionicframework.com/blog//blog/category/announcements",
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/how-to-convince-your-boss_image_1aug2021.png",
"content": "Greetings, friend! You’re a web developer, team lead, or engineering manager who has discovered that Ionic products are awesome. They have helped you build cross-platform applications quickly, made the app development process enjoyable, and solved important mobile development problems. You can see that Ionic would be extremely beneficial in your daily job, but are wondering how to convince your boss to endorse the adoption of new software. In a nutshell:"
},
{
"id": 2,
"title": "Ioniconf 2021 Conference Recap",
"title_link": "https://ionicframework.com/blog/ioniconf-2021-conference-recap/",
"date": "July 29, 2021",
"author": "By Mike Hartington",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2018/08/mike-headshot-2-smaller-150x150.png",
"category": "ANNOUNCEMENTS",
"category_link": "https://ionicframework.com/blog//blog/category/announcements",
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/06/og-imgx2.png",
"content": "And with that, Ioniconf 2021 has concluded! Ioniconf, our online conference for Ionic developers and the wider web development community, featured twelve expert Ionic speakers and was attended by many thousands of Ionic community members. We’re thrilled by the community’s reception to the event and are already looking forward to our next event taking place in September. Read on for a recap and links to all recorded talks."
},
{
"id": 3,
"title": "Announcing Identity Vault 5.0",
"title_link": "https://ionicframework.com/blog/announcing-identity-vault-5-0/",
"date": "July 28, 2021",
"author": "By Dallas James",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2021/07/dallas-james-150x150.jpg",
"category": "PRODUCT",
"category_link": "https://ionicframework.com/blog//blog/category/announcements",
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/iv-5-feature-image.png",
"content": "Today I’m excited to announce Identity Vault 5.0, the newest version of Ionic’s mobile biometrics solution. Featuring the latest in native security best practices, Identity Vault improves frontend security in any Ionic app by making it easy to add secure biometric authentication in minutes."
},
{
"id": 4,
"title": "Building with Stencil: Clock Component",
"title_link": "https://ionicframework.com/blog/building-with-stencil-clock-component/",
"date": "July 22, 2021",
"author": "By Kevin Hoyt",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2021/07/2520666-150x150.jpg",
"category": "ANNOUNCEMENTS",
"category_link": "https://ionicframework.com/blog//blog/category/announcements",
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/Image-from-iOS.png",
"content": "I have not seen a clock in a web-based user interface in a long time. This makes sense — they are pretty redundant these days. You have a clock on your watch, on your mobile device, and on your desktop, and those are just the digital versions available at a glance. Nonetheless, the process of building a clock can reveal a lot about how a platform works."
},
{
"id": 5,
"title": "Building with Stencil: Calendar Component",
"title_link": "https://ionicframework.com/blog/building-with-stencil-calendar-component/",
"date": "July 19, 2021",
"author": "By Kevin Hoyt",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2021/07/2520666-150x150.jpg",
"category": "TUTORIALS",
"category_link": null,
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/ionic-blog-post-image_first-look-01.png",
"content": "Take a look at the month view of a calendar and you will see several rows of numbers. The numbers themselves, increasing in value one after the other, are arranged in columns. HTML and CSS provide us with a number of tools to display content in rows and columns. Making a calendar component should be easy, right? Right?"
},
{
"id": 6,
"title": "Introducing the New Overlay Hooks for Ionic React",
"title_link": "https://ionicframework.com/blog/introducing-the-new-overlay-hooks-for-ionic-react/",
"date": "July 14, 2021",
"author": "By Ely Lucas",
"authorImage": "https://secure.gravatar.com/avatar/45ad19965b4bde97e9f4396ea01ed184?s=32&r=g",
"category": "ENGINEERING",
"category_link": null,
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/react-overlay-hooks-feature-image.png",
"content": "Hello Friends! We know everyone is excited about the new features in Ionic Framework 6.0 beta, but that doesn’t mean we’re done with V5! In Ionic React 5.6, we packaged up a new set of hooks for controlling our overlay components that we think you might like. What is an overlay you ask? It’s the term we give components that display over your current content, such as alerts, modals, toasts, etc."
},
{
"id": 7,
"title": "The Future of Stencil: Expanded Team, New Software Platform, and More",
"title_link": "https://ionicframework.com/blog/the-future-of-stencil-expanded-team-new-software-platform-and-more/",
"date": "July 7, 2021",
"author": "By Nick Hyatt",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2018/11/Nick-Hyatt-Headshot-150x150.jpeg",
"category": "ANNOUNCEMENTS",
"category_link": null,
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/07/stencil-future-feature-image.png",
"content": "Today I’m excited to share some news about Stencil, Ionic’s open source toolchain that generates small, fast, and 100% standards-based Web Components that run in every browser. As you might have noticed, we’ve been actively increasing our investments across the entire Ionic App Platform, including the recent launch of Capacitor 3.0, Ionic Portals, tons of Appflow improvements, and the upcoming Ionic Framework v6."
},
{
"id": 8,
"title": "Announcing the Ionic Framework v6 Beta",
"title_link": "https://ionicframework.com/blog/announcing-the-ionic-framework-v6-beta/",
"date": "June 29, 2021",
"author": "By Liam DeBeasi",
"authorImage": "https://ionicframework.com/blog/wp-content/uploads/2020/01/ZNK4lRAJ_400x400-150x150.jpg",
"category": "ANNOUNCEMENTS",
"category_link": null,
"image": "https://ionicframework.com/blog/wp-content/uploads/2021/06/framework6-feature-image.png",
"content": "Earlier this week I had the privilege of giving the Ionic Framework Update at Ioniconf 2021 where we announced the Ionic Framework v6 beta. Ionic Framework has come far from its roots as an AngularJS-only UI library to a truly cross-platform framework for building Web Native applications. As we look to the future of Ionic Framework, let’s talk about some of the improvements coming in Framework v6 and how you can get access to these improvements today."
}
];

79
03_source/mobile/src/pages/DemoBlogPostUi/style.scss Normal file
View File

@@ -0,0 +1,79 @@
.demo-blog-post-ui {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
* {
/** 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;
}
}