Skip to content

Commit 9e7cc3f

Browse files
donkerdonker
committed
Improve cosmetics using css modules
1 parent dcd31d3 commit 9e7cc3f

10 files changed

Lines changed: 1418 additions & 193 deletions

File tree

‎Client/Js/LpManager/Common/mytypes.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.module.css" {
2+
const classes: { [key: string]: string };
3+
export default classes;
4+
}

‎Client/Js/LpManager/Components/Packs/PackageTable.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export default class PackageTable extends React.Component<
6565
var rows = this.state.packageVersions.map((pv) => (
6666
<PackageVersionRow
6767
key={pv.PackageVersionId}
68+
contextLocale={this.props.module.locale}
69+
resources={this.props.module.resources}
6870
baseServicepath={this.props.module.service.baseServicepath}
6971
locale={this.props.locale}
7072
packageVersion={pv}
@@ -78,8 +80,9 @@ export default class PackageTable extends React.Component<
7880
<table className="table">
7981
<thead>
8082
<tr>
81-
<th>Version</th>
82-
<th>Stats</th>
83+
<th>{this.props.module.resources.Version}</th>
84+
<th>{this.props.module.resources.Stats}</th>
85+
<th>{this.props.module.resources.Released}</th>
8386
<th></th>
8487
</tr>
8588
</thead>

‎Client/Js/LpManager/Components/Packs/PackageVersionRow.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { IPackageVersion } from "../../Models/IPackageVersion";
33
import { IPackageVersionLocaleTextCount } from "../../Models/IPackageVersionLocaleTextCount";
44

55
interface IPackageVersionRowProps {
6+
contextLocale: string;
7+
resources: any;
68
baseServicepath: string;
79
locale: string;
810
packageVersion: IPackageVersion;
@@ -21,15 +23,17 @@ const PackageVersionRow: React.FC<IPackageVersionRowProps> = (props) => {
2123
%)
2224
</span>
2325
) : null;
26+
const date = new Date(props.packageVersion.ReleaseDate);
2427
return (
2528
<tr>
2629
<td>{props.packageVersion.Version}</td>
2730
<td>{textStat}</td>
31+
<td>{new Intl.DateTimeFormat(props.contextLocale).format(date)}</td>
2832
<td>
2933
<a
3034
href={`${props.baseServicepath}Packs/Get?packageName=${props.packageVersion.PackageName}&version=${props.packageVersion.Version}&locale=${props.locale}`}
3135
>
32-
link
36+
{props.resources.Download}
3337
</a>
3438
</td>
3539
</tr>

‎Client/Js/LpManager/Components/Packs/PacksPage.tsx‎

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22
import { IAppModule } from "../../Models/IAppModule";
33
import PackageTable from "./PackageTable";
4+
import styles from "./styles.module.css";
45

56
interface IPacksPageProps {
67
module: IAppModule;
@@ -47,50 +48,57 @@ export default class PacksPage extends React.Component<
4748
public render(): JSX.Element {
4849
return (
4950
<div>
50-
<div>
51-
<select
52-
value={this.state.selectedGenLocale}
53-
onChange={(e) =>
54-
this.setState({
55-
selectedGenLocale: e.target.value,
56-
selectedLocale: this.findBestLocale(e.target.value),
57-
})
58-
}
59-
>
60-
{this.props.genlocales.map((l) => (
61-
<option value={l.Key} key={l.Key}>
62-
{l.Value}
63-
</option>
64-
))}
65-
</select>
66-
</div>
67-
<div>
68-
<select
69-
value={this.state.selectedLocale}
70-
onChange={(e) => this.setState({ selectedLocale: e.target.value })}
71-
>
72-
{this.props.locales
73-
.filter((l) => l.Key.startsWith(this.state.selectedGenLocale))
74-
.map((l) => (
51+
<div className={styles.page}>
52+
<div className={styles.dddiv}>
53+
<div>{this.props.module.resources.Language}</div>
54+
<select
55+
value={this.state.selectedGenLocale}
56+
onChange={(e) =>
57+
this.setState({
58+
selectedGenLocale: e.target.value,
59+
selectedLocale: this.findBestLocale(e.target.value),
60+
})
61+
}
62+
>
63+
{this.props.genlocales.map((l) => (
7564
<option value={l.Key} key={l.Key}>
7665
{l.Value}
7766
</option>
7867
))}
79-
</select>
80-
</div>
81-
<div>
82-
<select
83-
value={this.state.selectedPackage}
84-
onChange={(e) =>
85-
this.setState({ selectedPackage: parseInt(e.target.value) })
86-
}
87-
>
88-
{this.props.packages.map((p) => (
89-
<option value={p.Key} key={p.Key}>
90-
{p.Value}
91-
</option>
92-
))}
93-
</select>
68+
</select>
69+
</div>
70+
<div className={styles.dddiv}>
71+
<div>{this.props.module.resources.Region}</div>
72+
<select
73+
value={this.state.selectedLocale}
74+
onChange={(e) =>
75+
this.setState({ selectedLocale: e.target.value })
76+
}
77+
>
78+
{this.props.locales
79+
.filter((l) => l.Key.startsWith(this.state.selectedGenLocale))
80+
.map((l) => (
81+
<option value={l.Key} key={l.Key}>
82+
{l.Value}
83+
</option>
84+
))}
85+
</select>
86+
</div>
87+
<div className={styles.dddiv}>
88+
<div>{this.props.module.resources.Package}</div>
89+
<select
90+
value={this.state.selectedPackage}
91+
onChange={(e) =>
92+
this.setState({ selectedPackage: parseInt(e.target.value) })
93+
}
94+
>
95+
{this.props.packages.map((p) => (
96+
<option value={p.Key} key={p.Key}>
97+
{p.Value}
98+
</option>
99+
))}
100+
</select>
101+
</div>
94102
</div>
95103
<PackageTable
96104
module={this.props.module}

‎Client/Js/LpManager/Components/Packs/styles.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.page {
2+
width: 100%;
3+
display: flex;
4+
flex-direction: row;
5+
justify-content: flex-start;
6+
padding-bottom: 30px;
7+
}
8+
9+
.dddiv {
10+
margin-right: 20px;
11+
}
12+
13+
.dddiv select {
14+
background-color: #0563af;
15+
color: white;
16+
padding: 12px;
17+
width: 250px;
18+
border: none;
19+
font-size: 20px;
20+
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
21+
-webkit-appearance: button;
22+
appearance: button;
23+
outline: none;
24+
}
25+
26+
.dddiv:hover::before {
27+
color: rgba(255, 255, 255, 0.6);
28+
background-color: rgba(255, 255, 255, 0.2);
29+
}
30+
31+
.dddiv select option {
32+
padding: 30px;
33+
}
34+
35+
.dddiv div {
36+
font-size: larger;
37+
font-weight: bold;
38+
padding-bottom: 20px;
39+
}

0 commit comments

Comments
 (0)