aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/page.tsx7
-rw-r--r--src/components/vierkant.tsx34
-rw-r--r--src/global.css26
-rw-r--r--src/pages/home.tsx66
4 files changed, 94 insertions, 39 deletions
diff --git a/src/components/page.tsx b/src/components/page.tsx
index 8fea132..44b00ba 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -7,8 +7,11 @@ var CenteredPageStyle: CSSProperties = {
export class CenteredPage extends Component {
render () {
- return <div style={CenteredPageStyle}>
- <div style={{margin: "0 6px"}}> {this.props.children} </div>
+ return <div className="CenteredPageOuter" style={CenteredPageStyle}>
+ <div className="CenteredPageInner" style={{
+ margin: "0 6px",
+ lineHeight: 0
+ }}> {this.props.children} </div>
</div>;
}
}
diff --git a/src/components/vierkant.tsx b/src/components/vierkant.tsx
index 6140e7a..588d73d 100644
--- a/src/components/vierkant.tsx
+++ b/src/components/vierkant.tsx
@@ -1,20 +1,24 @@
-import { Component, CSSProperties } from "react";
+import { ReactNode } from "react";
-var VierkantStyle: CSSProperties = {
- padding: 24,
- backgroundColor: "var(--background)",
- borderRadius: 8,
- color: "var(--text)",
- margin: 6, // geen margin collapse = 12px marge
- display: "inline-block",
- position: "relative"
+interface VierkantProps {
+ href?: string;
+ width?: string;
+ height?: string;
+ children?: ReactNode;
}
-export class Vierkant extends Component {
- render () {
- return <div style={VierkantStyle}>
- {this.props.children}
- </div>
- }
+export function Vierkant(props: VierkantProps) {
+ return <a style={{
+ padding: 24,
+ backgroundColor: "var(--background)",
+ borderRadius: 8,
+ color: "var(--text)",
+ margin: 6, // geen margin collapse = 12px marge
+ display: "inline-block",
+ position: "relative",
+ boxSizing: "border-box",
+ width: props.width ? props.width : undefined,
+ height: props.height ? props.height : undefined,
+ }} href={props.href}>{props.children}</a>
}
diff --git a/src/global.css b/src/global.css
index 9ef59d4..5787cee 100644
--- a/src/global.css
+++ b/src/global.css
@@ -25,15 +25,27 @@ body {
}
/* font size */
-html {
- font-size: 14px;
-}
+html { font-size: 14px; }
/* link color fix */
-a {
- color: var(--text);
+a { color: var(--text); }
+
+/* centering misschien */
+.CenteredPageInner { text-align: center; }
+.CenteredPageInner > * { text-align: left; }
+
+/* line height reset */
+h1, h2, p, span, td, th {
+ margin: 0;
+ line-height: 1.2;
}
-p {
- margin: 6px 0;
+/* table groottes met percentages werkt nu */
+table { table-layout: fixed; }
+
+/* table styles */
+td, th {
+ padding: 4px;
+ font-size: 15px;
}
+
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 65f9ead..853dede 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -38,33 +38,43 @@ var SquareSize: CSSProperties = {
height: 90
}
+var LeftAlignedTableColumn: CSSProperties = {
+ textAlign: "left",
+ paddingLeft: 16
+}
+
+var RightAlignedTableColumn: CSSProperties = {
+ textAlign: "right",
+ paddingRight: 16
+}
+
function HomePage() {
return (
<div>
<NavBar />
<CenteredPage>
<PageTitle>4 op een rij</PageTitle>
- <a href="/"><Vierkant>
+ <Vierkant href="/">
<VideogameAssetIcon style={GameModeIconStyle}/>
<span style={GameModeTextStyle}>Nieuw spel</span>
<div style={SquareSize}></div>
- </Vierkant></a>
- <a href="/"><Vierkant>
+ </Vierkant>
+ <Vierkant href="/">
<ExtensionIcon style={GameModeIconStyle}/>
<span style={GameModeTextStyle}>Puzzels</span>
<div style={SquareSize}></div>
- </Vierkant></a>
- <a href="/"><Vierkant>
+ </Vierkant>
+ <Vierkant href="/">
<Icon path={mdiRobotExcited} style={GameModeIconStyle}/>
<span style={GameModeTextStyle}>Tegen computer</span>
<div style={SquareSize}></div>
- </Vierkant></a>
- <a href="/" style={{ verticalAlign: "top" }}><Vierkant>
+ </Vierkant>
+ <Vierkant href="/">
<div style={{ position: "relative", width: 280, height: 90 }}>
<div style={{
position: "absolute",
top: 0, left: 0,
- width: 90, height: 90
+ ...SquareSize
}}>
<AccountAvatar size={90} image="url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblogs.agu.org%2Fwildwildscience%2Ffiles%2F2017%2F09%2FCapture-1.png&f=1&nofb=1)"/>
</div>
@@ -75,23 +85,49 @@ function HomePage() {
}}>
<h2 style={{
maxWidth: 178,
- margin: 0,
fontSize: 20,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}>Gebruikersnaam</h2>
- <p>Score: 400</p>
- <p style={{ position: "absolute", bottom: 0, left: 0, margin: 0 }}>
- <span style={{ color: "var(--disk-b-text)" }}>N W</span>
+ <p style={{ marginTop: 6 }}>Score: 400</p>
+ <p style={{ position: "absolute", bottom: 0, left: 0 }}>
+ <span style={{ color: "var(--disk-b-text)" }}>0 W</span>
<span style={{ margin: "0 3px" }}>/</span>
- <span style={{ color: "var(--disk-a-text)" }}>N V</span>
+ <span style={{ color: "var(--disk-a-text)" }}>0 V</span>
<span style={{ margin: "0 3px" }}>/</span>
- <span style={{ opacity: .75 }}>N G</span>
+ <span style={{ opacity: .75 }}>0 G</span>
</p>
</div>
</div>
- </Vierkant></a>
+ </Vierkant>
+ <Vierkant width="calc(100% - 12px)">
+ <h2>Recente partijen</h2>
+ <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
+ <tr>
+ <th style={{ width: "50%" }}>Tegenstander</th>
+ <th style={{ width: "20%" }}>Uitkomst</th>
+ <th style={{ width: "15%" }}>Zetten</th>
+ <th style={{ width: "15%" }}>Datum</th>
+ </tr>
+ <tr>
+ <td style={LeftAlignedTableColumn}>Naam hier</td>
+ <td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
+ <td>7</td>
+ <td style={RightAlignedTableColumn}>Vandaag</td>
+ </tr>
+ <tr>
+ <td style={LeftAlignedTableColumn}>Nog meer namen</td>
+ <td style={{ opacity: .6 }}>Gelijkspel</td>
+ <td>42</td>
+ <td style={RightAlignedTableColumn}>Gisteren</td>
+ </tr>
+ </table>
+ </Vierkant>
+ <Vierkant width="calc(100% - 12px)">
+ <h2>Nieuws ofzo</h2>
+ <p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
+ </Vierkant>
</CenteredPage>
</div>
);