Skip to content

Commit 5fc6d19

Browse files
elv1s42elv1s42
committed
ui changes
1 parent a0a5854 commit 5fc6d19

11 files changed

+141
-100
lines changed

‎components/HeroSection.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ export const HeroSection = (props: any) => {
3030
<Button secondary filled lg className="bac-col-blue-grey-900" onClick={handleCopyClick}
3131
startIcon={<img src="img/chevron-right.svg" alt=">" className="hei-100 wid-full" />}
3232
endIcon={<img id="copy-icon" src={isCopied ? "img/copied.svg" : "img/copy.svg"} alt={isCopied ? "copied" : "copy"} className="hei-100 wid-full" />}
33-
buttonText={<span key="text" className="fon-siz-xl md-fon-siz-lg fon-wei-bold fon-fam-code col-blue-grey-200"><span className="hljs-name">npm</span> install <span className="hljs-attr">cssville</span></span>} />
33+
buttonText={
34+
<span key="text" className="fon-siz-xl md-fon-siz-lg fon-wei-bold fon-fam-code col-blue-grey-200">
35+
<span className="hljs-name">npm</span> install <span className="hljs-attr">cssville</span>
36+
</span>} />
3437
</Stack>
3538
</Stack>
3639
</Stack>

‎components/Logo.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import React from 'react';
22

33
export const Logo = (props: any) => {
44
return (
5-
<div className={`dis-flex ali-ite-center jus-con-center ${props.className}`}>
6-
<a href="/" className="dis-flex tex-dec-none col-green-500">
7-
<img src="/img/cssville.svg" alt="logo" className="hei-32px wid-32px" />
8-
<div className="dis-flex ali-ite-center jus-con-center md-dis-none pad-lef-3">
9-
<span className="fon-wei-900 fon-siz-x-large fon-fam-code">cssville</span>
10-
</div>
5+
<div className={`dis-flex fle-dir-column ali-ite-center ${props.className}`}>
6+
<a href="/" className="dis-flex tex-dec-none col-green-500 ali-ite-center jus-con-center">
7+
<img src="/img/cssville.svg" alt="logo" className="hei-7 wid-7 mar-rig-3" />
8+
<span className="fon-wei-900 fon-siz-x-large fon-fam-code md-dis-none">cssville</span>
119
</a>
1210
</div>
1311
);

‎components/Table.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { ReactNode } from 'react';
2+
3+
interface TableProps<T> {
4+
headers: string[];
5+
data: T[];
6+
renderRow: (item: T, index: number) => ReactNode;
7+
}
8+
9+
const Table = <T,>({ headers, data, renderRow }: TableProps<T>) => {
10+
return (
11+
<table className="mar-y-4 wid-full bor-col-collapse bor-1">
12+
<thead>
13+
<tr className="bac-col-grey-100">
14+
{headers.map((header, index) => (
15+
<th key={index} className="pad-4 tex-ali-start">
16+
{header}
17+
</th>
18+
))}
19+
</tr>
20+
</thead>
21+
<tbody>
22+
{data.map((item, index) => renderRow(item, index))}
23+
</tbody>
24+
</table>
25+
);
26+
};
27+
28+
export default Table;

‎components/pages/NotFoundSection.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@ import { Stack } from 'cssville-ui/build/components/ui/simple/Stack';
55
import { Section } from "cssville-ui/build/components/ui/simple/Section";
66

77
export function NotFoundSection(props: any) {
8-
return <Section lg className="fle-gro-1">
9-
<Display className="bor-bot-1 wid-full mar-bot-6">{props.title}</Display>
10-
<Stack column md className="wid-full">
11-
<Text>The page you are looking for can not be found</Text>
12-
<Stack row>
13-
<Button primary href="/" tag="a">Home</Button>
14-
<Button secondary href="/docs" tag="a">Docs</Button>
8+
const title = props.title ? props.title : "404"
9+
return (
10+
<Section lg className="fle-gro-1">
11+
<Display className="bor-bot-1 wid-full mar-bot-6">{title}</Display>
12+
<Stack column md className="wid-full">
13+
<Text>The page you are looking for can not be found</Text>
14+
<Stack row>
15+
<Button primary href="/" tag="a">Home</Button>
16+
<Button secondary href="/docs" tag="a">Docs</Button>
17+
</Stack>
1518
</Stack>
16-
</Stack>
17-
</Section>;
19+
</Section>
20+
);
1821
}

‎components/pages/docs/ClassPage.tsx

Lines changed: 41 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,36 @@ import { Title } from 'cssville-ui/build/components/ui/simple/Typography';
77
import { Chip } from 'cssville-ui/build/components/ui/simple/Chip';
88
import { getClasses } from '../../utils';
99
import { NotFoundSection } from "../NotFoundSection";
10+
import { CssClassData } from "cssville-generators/build/data/cssClassData";
11+
import Table from "../../Table";
1012

13+
const renderRowPrefixes = (cssClassData: CssClassData, index: number) => (
14+
<tr key={index}>
15+
<td className="pad-3 bor-bot-1"><Chip noBorder>{cssClassData.className}-*</Chip></td>
16+
<td className="pad-3 bor-bot-1">
17+
{cssClassData.cssProperties.map((p, i) => (
18+
<React.Fragment key={i}>
19+
<Chip noBorder>{p}</Chip>
20+
{i < cssClassData.cssProperties.length - 1 && <span>, </span>}
21+
</React.Fragment>
22+
))}
23+
</td>
24+
</tr>
25+
);
26+
27+
const renderRowSuffixes = (key: string, values: string[]) => (
28+
<tr key={key}>
29+
<td className="pad-3 bor-bot-1"><Chip noBorder>*-{key}</Chip></td>
30+
<td className="pad-3 bor-bot-1">
31+
{values.map((p, i) => (
32+
<React.Fragment key={i}>
33+
<Chip noBorder>{p}</Chip>
34+
{i < values.length - 1 && <span>, </span>}
35+
</React.Fragment>
36+
))}
37+
</td>
38+
</tr>
39+
);
1140

1241
export const ClassPage = (props) => {
1342
const name = useLoaderData();
@@ -26,63 +55,18 @@ export const ClassPage = (props) => {
2655
<NotFoundSection />
2756
:
2857
<>
29-
<Title xl>CSS classes and properties</Title>
30-
<table style={{ borderCollapse: "collapse" }} className="mar-y-4 wid-full">
31-
<thead>
32-
<tr className="bac-col-grey-100">
33-
<th className="pad-3 bor-1">Class name property</th>
34-
<th className="pad-3 bor-1">CSS properties</th>
35-
</tr>
36-
</thead>
37-
<tbody>
38-
{
39-
generator.cssData.map((cssClassData, i) =>
40-
<tr key={i}>
41-
<td className="pad-3 bor-1"><Chip>{cssClassData.className}-*</Chip></td>
42-
<td className="pad-3 bor-1">
43-
{cssClassData.cssProperties.map(
44-
(p, i) =>
45-
<React.Fragment key={i}>
46-
<Chip>{p}</Chip>
47-
{i < cssClassData.cssProperties.length - 1 && <span>, </span>}
48-
</React.Fragment>
49-
)}
50-
</td>
51-
</tr>
52-
)
53-
}
54-
</tbody>
55-
</table>
56-
<Title xl>CSS property values</Title>
57-
<table style={{ borderCollapse: "collapse" }} className="mar-y-4">
58-
<thead>
59-
<tr className="bac-col-grey-100">
60-
<th className="pad-3 bor-1">Class name value</th>
61-
<th className="pad-3 bor-1">CSS value</th>
62-
</tr>
63-
</thead>
64-
<tbody>
65-
{
66-
Array.from(generator.cssData[0].postfixValuesMap.keys()).map(key => {
67-
var values = generator.cssData[0].postfixValuesMap.get(key);
68-
return (
69-
<tr key={key}>
70-
<td className="pad-3 bor-1"><Chip>{key}</Chip></td>
71-
<td className="pad-3 bor-1">
72-
{values.map(
73-
(p, i) =>
74-
<React.Fragment key={i}>
75-
<Chip>{p}</Chip>
76-
{i < values.length - 1 && <span>, </span>}
77-
</React.Fragment>
78-
)}
79-
</td>
80-
</tr>
81-
)
82-
})
83-
}
84-
</tbody>
85-
</table>
58+
<Title xl>CSS class prefixes and related properties</Title>
59+
<Table<CssClassData>
60+
headers={["Class name prefix", "CSS properties"]}
61+
data={generator.cssData as CssClassData[]}
62+
renderRow={renderRowPrefixes}
63+
/>
64+
<Title xl>CSS class suffixes and property values</Title>
65+
<Table<[string, string[]]>
66+
headers={["Class name suffix", "CSS properties value"]}
67+
data={Array.from(generator.cssData[0].postfixValuesMap.entries())}
68+
renderRow={([key, values]) => renderRowSuffixes(key, values)}
69+
/>
8670
{
8771
generator.cssData.map(cssClassData =>
8872
<div key={cssClassData.className}>

‎components/pages/docs/DocsLayout.tsx

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,47 @@ import { LeftMenu } from "./LeftMenu";
77
import { Outlet, useMatches, useLocation } from "react-router-dom";
88
import { IGenerator } from "cssville-generators/build/IGenerator";
99
import { Cssville } from "cssville-generators/build/cssville";
10+
import { NotFoundSection } from "../NotFoundSection";
1011

1112

1213
export const DocsLayout = () => {
14+
let loc = useLocation();
1315
const matches = useMatches()
1416
const match = matches[matches.length - 1]
15-
const activeCategory = match.handle['category']
16-
let title = match.handle['title']
17-
let activeItem = match.handle['item']
1817

19-
if(title === ""){
20-
let loc = useLocation();
18+
let activeCategory = ""
19+
let title = ""
20+
let activeItem = ""
21+
22+
const handle = match.handle;
23+
if (handle != undefined) {
24+
activeCategory = handle['category']
25+
title = handle['title']
26+
activeItem = handle['item']
27+
}
28+
29+
if (title === "") {
2130
const parts = loc.pathname.split("/")
2231
const gen = parts[parts.length - 1]
2332
var generator: IGenerator = Cssville.generators.find(g => g.name === gen)
24-
if(generator !== undefined){
33+
if (generator !== undefined) {
2534
title = generator.name
2635
activeItem = generator.name
2736
}
2837
}
2938

3039
return (
3140
<Section lg noPadding>
32-
<Stack noGap row fullWidth className="pad-x-4 pos-relative">
41+
<Stack noGap fullWidth row className="pad-x-4">
3342
<LeftMenu activeItem={activeItem} activeCategory={activeCategory} />
34-
<Stack xl fullWidth>
35-
<Stack xs fullWidth className="pad-x-7">
36-
<Display className="bor-bot-1 wid-full mar-bot-6">{title}</Display>
37-
<Outlet />
43+
<Stack xl fullWidth className="min-hei-100vh">
44+
<Stack xs fullWidth className="pad-x-7 fle-gro-1">
45+
{title === ""
46+
? <NotFoundSection />
47+
: <>
48+
<Display className="bor-bot-1 wid-full mar-bot-6">{title}</Display>
49+
<Outlet />
50+
</>}
3851
</Stack>
3952
<Footer />
4053
</Stack>

‎components/pages/docs/LeftMenu.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,24 @@ import { Text } from 'cssville-ui/build/components/ui/simple/Typography';
33
import { Stack } from "cssville-ui/build/components/ui/simple/Stack";
44
import { MenuItems } from './../../../data/pagesData';
55
import { Logo } from "../../Logo";
6+
import { Link } from "react-router-dom";
67

78
const MenuItem = ({ href, item, category, activeCategory, activeItem }) => {
89
const isActive = category === activeCategory && item === activeItem;
910
const activeLinkClasses = isActive ? "bor-lef-col-blue-300" : "bor-lef-col-blue-100";
1011
const activeTextClasses = isActive ? "bac-col-blue-100-hover bac-col-blue-100 fon-wei-600" : "bac-col-blue-50-hover";
1112
return (
12-
<a href={href} key={item} className={`${activeLinkClasses} bor-lef-col-blue-300-hover bor-lef-sty-solid bor-lef-wid-2px wid-full box-siz-border-box tex-dec-none col-text`}>
13-
<Text className={`${activeTextClasses} mar-lef-3 bor-rad-3 pad-lef-4 pad-x-3 pad-y-2`}>
13+
<Link to={href} key={item} className={`${activeLinkClasses} bor-lef-col-blue-300-hover bor-lef-sty-solid bor-lef-wid-2px wid-full box-siz-border-box tex-dec-none col-text`}>
14+
<Text className={`${activeTextClasses} mar-lef-4 bor-rad-3 pad-x-4 pad-y-2`}>
1415
{item}
1516
</Text>
16-
</a>
17+
</Link>
1718
);
1819
};
1920

2021
export const LeftMenu = ({ activeItem, activeCategory }) => {
2122
return (
22-
<Stack noGap className="max-wid-xs min-wid-1/4 pad-rig-5 pad-bot-6 max-hei-100vh ove-auto pos-sticky top-0 bor-rig-1">
23+
<Stack noGap className="min-wid-1/4 max-wid-xs pad-rig-5 pad-bot-6 max-hei-100vh ove-y-auto pos-sticky top-0 bor-rig-1">
2324
<Logo className="pad-y-6" />
2425
{MenuItems.map(i => (
2526
<Stack noGap key={i.category}>

‎index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import hljs from 'highlight.js';
44
import "cssville-ui/cssville-ui.bundle.css"
55
import "cssville/cssville.css";
66
import "./site.css";
7-
import { BrowserRouter, createBrowserRouter, Route, RouterProvider } from "react-router-dom";
7+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
88
import { Routes } from "./data/pagesData";
99

1010

‎site.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
:root {
22
--cssville-primary-font-family: "Poppins",sans-serif;
3-
scrollbar-color: #c4c4c4 transparent;
3+
scrollbar-color: #c4c4c4 #f3f3f3;
44
scrollbar-width: thin;
55
}
66

77
html, body * {
8-
scrollbar-color: #c4c4c4 transparent;
8+
scrollbar-color: #c4c4c4 #f3f3f3;
99
scrollbar-width: thin;
10-
}
10+
}

0 commit comments

Comments
 (0)