Skip to content

Commit 4be286b

Browse files
TechQueryTechQuery
committed
[add] Carousel example page
1 parent 35191ff commit 4be286b

File tree

10 files changed

+290
-42
lines changed

10 files changed

+290
-42
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"@nuintun/qrcode": "^2.1.1",
7-
"boot-cell": "^1.0.0-rc.30",
7+
"boot-cell": "^1.0.0-rc.33",
88
"cell-router": "^2.0.0-rc.8",
99
"classnames": "^2.2.6",
1010
"github-web-widget": "^3.0.0-beta.5",
1111
"iterable-observer": "^1.0.0-beta.4",
12+
"koajax": "^0.6.2",
1213
"lodash.groupby": "^4.6.0",
1314
"markdown-ime": "^1.0.3",
1415
"marked": "^1.1.0",
@@ -21,6 +22,7 @@
2122
"web-utility": "^1.5.2"
2223
},
2324
"devDependencies": {
25+
"@octokit/types": "^5.0.1",
2426
"@types/classnames": "^2.2.10",
2527
"@types/lodash.groupby": "^4.6.6",
2628
"husky": "^4.2.5",

‎source/model/index.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
import { History } from 'cell-router/source';
2-
3-
export const history = new History();
1+
import { History } from 'cell-router/source';
2+
import { HTTPClient } from 'koajax';
3+
4+
export const history = new History();
5+
6+
export const github = new HTTPClient({
7+
baseURI: 'https://api.github.com/',
8+
responseType: 'json'
9+
});

‎source/page/Example/Carousel/Feature.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { VNodeChildElement, createCell } from 'web-cell';
2+
import classNames from 'classnames';
3+
import { Image } from 'boot-cell/source/Content/Image';
4+
5+
import style from './index.less';
6+
7+
export interface FeatureProps {
8+
reverse?: boolean;
9+
title: string | VNodeChildElement;
10+
summary: string | VNodeChildElement;
11+
logo: string;
12+
}
13+
14+
export function Feature({ reverse, title, summary, logo }: FeatureProps) {
15+
return (
16+
<div className="row">
17+
<div className={classNames('col-md-7', reverse && 'order-md-2')}>
18+
<h2 className={style['featurette-heading']}>{title}</h2>
19+
<p className="lead">{summary}</p>
20+
</div>
21+
<div className={classNames('col-md-5', reverse && 'order-md-1')}>
22+
<Image fluid style={{ width: '500px' }} src={logo} />
23+
</div>
24+
</div>
25+
);
26+
}

‎source/page/Example/Carousel/data.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
export const headers = [
2+
{ title: 'Home', href: '.' },
3+
{ title: 'Link', href: 'components/navbar' },
4+
{ title: 'Disabled', href: '#', disabled: true }
5+
];
6+
7+
export const banners = [
8+
{
9+
image: 'https://tech-query.me/medias/featureimages/6.jpg',
10+
title: 'Mountain',
11+
detail: 'A description sample'
12+
},
13+
{
14+
image: 'https://tech-query.me/medias/featureimages/7.jpg',
15+
title: 'River',
16+
detail: 'A description sample'
17+
},
18+
{
19+
image: 'https://tech-query.me/medias/featureimages/21.jpg',
20+
title: 'Lake',
21+
detail: 'A description sample'
22+
}
23+
];
24+
25+
export const features = [
26+
{
27+
title: 'The API extends from the Web Components specification',
28+
summary:
29+
'Web Components are included in the HTML 5.3 and DOM 4.1 standard proposals released by W3C in 2018, and the official patch supports mainstream browsers such as IE 11+.',
30+
logo: 'https://github.com/webcomponents.png'
31+
},
32+
{
33+
title: 'The syntax follows TypeScript 3, Decorator proposal and JSX',
34+
summary:
35+
'Declarative component code, concise and elegant, enjoy one-click ECMAScript mature proposal syntax.',
36+
logo:
37+
'https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png'
38+
},
39+
{
40+
title: 'Virtual DOM engine uses SnabbDOM',
41+
summary:
42+
"Support HTML 5, SVG, high performance, strong reliability, the world's largest usage, the same Vue.",
43+
logo: 'https://github.com/snabbdom.png'
44+
}
45+
];

‎source/page/Example/Carousel/index.less‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
:global {
2+
/* Carousel base class */
3+
.carousel {
4+
margin-bottom: 4rem;
5+
}
6+
/* Since positioning the image, we need to help out the caption */
7+
.carousel-caption {
8+
bottom: 3rem;
9+
z-index: 10;
10+
@media (min-width: 40em) {
11+
p {
12+
margin-bottom: 1.25rem;
13+
font-size: 1.25rem;
14+
line-height: 1.4;
15+
}
16+
}
17+
}
18+
/* Declare heights because of positioning of img element */
19+
.carousel-item {
20+
height: 32rem;
21+
& > img {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
min-width: 100%;
26+
height: 32rem;
27+
}
28+
}
29+
}
30+
/* Center align the text within the three columns below the carousel */
31+
.marketing {
32+
:global {
33+
.col-lg-4 p {
34+
margin-right: 0.75rem;
35+
margin-left: 0.75rem;
36+
}
37+
}
38+
}
39+
.featurette-divider {
40+
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
41+
}
42+
/* Thin out the marketing headings */
43+
.featurette-heading {
44+
font-weight: 300;
45+
line-height: 1;
46+
letter-spacing: -0.05rem;
47+
@media (min-width: 40em) {
48+
/* Bump up size of carousel content */
49+
font-size: 50px;
50+
}
51+
@media (min-width: 62em) {
52+
margin-top: 7rem;
53+
}
54+
}

‎source/page/Example/Carousel/index.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { component, mixin, createCell, Fragment } from 'web-cell';
2+
import classNames from 'classnames';
3+
import { ReposListForOrgResponseData } from '@octokit/types';
4+
5+
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
6+
import { Form } from 'boot-cell/source/Form/Form';
7+
import { Field } from 'boot-cell/source/Form/Field';
8+
import { Button } from 'boot-cell/source/Form/Button';
9+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
10+
11+
import { Feature } from './Feature';
12+
import style from './index.less';
13+
14+
import { github } from '../../../model';
15+
import { headers, banners, features } from './data';
16+
17+
interface CarouselPageState {
18+
projects: ReposListForOrgResponseData;
19+
}
20+
21+
@component({
22+
tagName: 'carousel-page',
23+
renderTarget: 'children'
24+
})
25+
export class CarouselPage extends mixin<{}, CarouselPageState>() {
26+
state = {
27+
projects: [] as ReposListForOrgResponseData
28+
};
29+
30+
async connectedCallback() {
31+
super.connectedCallback();
32+
33+
const { body } = await github.get<ReposListForOrgResponseData>(
34+
'orgs/EasyWebApp/repos'
35+
);
36+
37+
await this.setState({
38+
projects: body
39+
.sort(({ updated_at: A }, { updated_at: B }) =>
40+
B.localeCompare(A)
41+
)
42+
.slice(0, 3)
43+
});
44+
}
45+
46+
render(_, { projects }: CarouselPageState) {
47+
return (
48+
<Fragment>
49+
<NavBar brand="Carousel" menu={headers}>
50+
<Form inline className="my-2 my-lg-0">
51+
<Field
52+
type="search"
53+
className="mr-sm-2"
54+
placeholder="Search"
55+
aria-label="Search"
56+
/>
57+
<Button
58+
type="submit"
59+
kind="success"
60+
outline
61+
className="my-2 my-sm-0"
62+
>
63+
Search
64+
</Button>
65+
</Form>
66+
</NavBar>
67+
68+
<CarouselView controls indicators interval={3} list={banners} />
69+
70+
<div className={classNames('container', style.marketing)}>
71+
<div className="row text-center">
72+
{projects.map(({ name, description, html_url }) => (
73+
<div className="col-lg-4 mb-4">
74+
<img
75+
className="rounded-circle"
76+
style={{ width: '8.75rem' }}
77+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
78+
/>
79+
<h2 style={{ fontWeight: 400 }}>{name}</h2>
80+
<p>{description}</p>
81+
<p>
82+
<Button kind="secondary" href={html_url}>
83+
View details »
84+
</Button>
85+
</p>
86+
</div>
87+
))}
88+
</div>
89+
<hr className={style['featurette-divider']} />
90+
91+
{features.map((item, index) => (
92+
<Fragment>
93+
<Feature reverse={!!(index % 2)} {...item} />
94+
<hr className={style['featurette-divider']} />
95+
</Fragment>
96+
))}
97+
</div>
98+
<footer class="container">
99+
<p class="float-right">
100+
<a href="#top">Back to top</a>
101+
</p>
102+
<p>
103+
© 2017-{new Date().getFullYear()} Company, Inc. ·{' '}
104+
<a href="#">Privacy</a> · <a href="#">Terms</a>
105+
</p>
106+
</footer>
107+
</Fragment>
108+
);
109+
}
110+
}

‎source/page/Example/Pricing/data.ts‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎source/page/Example/Pricing/index.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
[
2+
{
3+
"level": "Free",
4+
"amount": 0,
5+
"details": [
6+
"10 users included",
7+
"2 GB of storage",
8+
"Email support",
9+
"Help center access"
10+
],
11+
"action": "Sign up for free"
12+
},
13+
{
14+
"level": "Pro",
15+
"amount": 15,
16+
"details": [
17+
"20 users included",
18+
"10 GB of storage",
19+
"Priority email support",
20+
"Help center access"
21+
],
22+
"action": "Get started"
23+
},
24+
{
25+
"level": "Enterprise",
26+
"amount": 29,
27+
"details": [
28+
"30 users included",
29+
"15 GB of storage",
30+
"Phone and email support",
31+
"Help center access"
32+
],
33+
"action": "Contact us"
34+
}
35+
]

‎source/page/Example/Pricing/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createCell, Fragment } from 'web-cell';
2-
import { NavBar } from 'boot-cell/source/Navigator';
3-
import { Button } from 'boot-cell/source/Form';
2+
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
3+
import { Button } from 'boot-cell/source/Form/Button';
44
import { Card } from 'boot-cell/source/Content/Card';
55

66
import { FooterList } from '../../../component/FooterList';
7-
import { prices } from './data';
7+
import prices from './index.json';
88
import { footers } from '../Product/data';
99

1010
export function PricingPage() {
@@ -17,6 +17,7 @@ export function PricingPage() {
1717
<NavBar
1818
theme="light"
1919
background="light"
20+
menuAlign="end"
2021
brand="Company name"
2122
menu={[
2223
{ title: 'Features' },

‎source/page/Example/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export default [
1111
paths: ['example/product'],
1212
component: async () => (await import('./Product')).ProductPage
1313
},
14+
{
15+
paths: ['example/carousel'],
16+
component: async () => (await import('./Carousel')).CarouselPage
17+
},
1418
{
1519
paths: ['example/offcanvas'],
1620
component: async () => (await import('./Offcanvas')).OffcanvasPage

0 commit comments

Comments
 (0)