aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/ui.tsx19
-rw-r--r--pages/_app.tsx1
-rw-r--r--pages/index.tsx6
-rw-r--r--pages/search.tsx56
-rw-r--r--styles/global.css18
-rw-r--r--styles/search.css12
-rw-r--r--styles/utility.css11
7 files changed, 50 insertions, 73 deletions
diff --git a/components/ui.tsx b/components/ui.tsx
index e2d19ad..60b80f4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -12,14 +12,11 @@ export function Vierkant(props: {
children?: ReactNode;
className?: string;
id?: string;
- fullwidth?: boolean;
onclick?: () => void;
}) {
return <a
href={props.href}
- className={['bg-800', 'round-l', 'pad-l', 'vierkant', props.className, props.fullwidth && 'fullwidth'].join(
- ' ',
- )}
+ className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
id={props.id}
onClick={props.onclick}
>
@@ -98,6 +95,7 @@ export function Input(props: {
dark?: boolean;
autocomplete?: string;
autofocus?: boolean;
+ className?: string;
}) {
return <input
id={props.id}
@@ -107,20 +105,9 @@ export function Input(props: {
placeholder={props.label}
spellCheck={false}
defaultValue={props.value ? String(props.value) : ''}
- className={props.dark ? 'dark' : 'light'}
+ className={"input" + " " + (props.dark ? 'dark' : 'light') + " " + props.className}
autoComplete={props.autocomplete}
autoFocus={props.autofocus}
- style={{
- padding: 12,
- border: 0,
- width: 'calc(100% - 24px)',
- fontSize: 14,
- backgroundColor: 'var(--page-background)',
- color: 'var(--text-alt)',
- borderRadius: 8,
- fontFamily: 'Inter',
- ...props.style,
- }}
/>;
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 290e687..3f66711 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,6 +12,7 @@ import '../styles/ui.css';
import '../styles/utility.css';
import '../styles/index.css';
+import '../styles/search.css';
export default function VierOpEenRijWebsite({ Component, pageProps }) {
return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 3d9da21..b5f4b50 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -107,17 +107,17 @@ export default function HomePage() {
<Icon path={mdiRobotExcited} className='icon' />
<span className='text'>Tegen computer</span>
</Vierkant>}
- <Vierkant className='loginOrRegisterBox'>
+ <Vierkant className='loginOrRegisterBox pad-l'>
{loggedIn
? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
: <LoginOrRegisterBox />}
</Vierkant>
</div>
{loggedIn
- && <Vierkant fullwidth>
+ && <Vierkant className="fullwidth pad-l">
<RecentGames games={gameInfo?.games} />
</Vierkant>}
- <Vierkant fullwidth>
+ <Vierkant className="fullwidth pad-l">
<h2>Nieuws ofzo</h2>
<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
</Vierkant>
diff --git a/pages/search.tsx b/pages/search.tsx
index 2b8668a..90f1f67 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,32 +24,21 @@ function search(callback: (results: Array<userInfo>) => void) {
}
function SearchResults(props: { userList: Array<userInfo>; }) {
- return <div>
+ return <div className="results">
{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
</div>;
}
function SearchResult(props: { user: userInfo; }) {
return <Vierkant
- style={{
- padding: 12,
- }}
- fullwidth
+ className="result pad-m fullwidth"
href={'/user?id=' + props.user.id}
>
- <div style={{ position: 'relative' }}>
+ <div className="inner posrel">
<AccountAvatar size={48} id={props.user.id} />
- <div
- style={{
- position: 'absolute',
- top: 0,
- right: 0,
- bottom: 0,
- left: 48 + 12,
- }}
- >
- <b>{props.user.username}</b>
- <p>{props.user.status}</p>
+ <div className="userInfo posabs v0 r0">
+ <b className="username">{props.user.username}</b>
+ <p className="status">{props.user.status}</p>
</div>
</div>
</Vierkant>;
@@ -58,40 +47,22 @@ function SearchResult(props: { user: userInfo; }) {
function SearchBar(props: {
searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
}) {
- return <Vierkant
- fullwidth
- style={{
- padding: 8,
- marginBottom: 24,
- }}
- >
+ return <Vierkant className="pad-m fullwidth searchBar">
<form onSubmit={props.searchFunction}>
<Input
id='searchBar'
label='Zoeken voor gebruikers...'
autocomplete='off'
- dark
autofocus
- style={{
- backgroundColor: 'var(--background)',
- color: 'var(--text)',
- padding: 14,
- fontSize: 16,
- width: 'calc(100% - 48px - 14px * 2)',
- }}
+ className="pad-m"
/>
<Button
- style={{
- padding: 12,
- float: 'right',
- display: 'inline-block',
- borderRadius: 4,
- }}
+ className="pad-m dispinbl valigntop"
onclick={props.searchFunction}
>
<SearchOutlinedIcon />
</Button>
- <input type='submit' style={{ display: 'none' }} />
+ <input type='submit' className="dispnone" />
</form>
</Vierkant>;
}
@@ -112,12 +83,7 @@ export default function HomePage() {
<SearchBar searchFunction={getSearchResults} />
<SearchResults userList={results} />
{searched && results.length == 0 && <h1
- style={{
- opacity: .6,
- color: 'var(--text)',
- textAlign: 'center',
- margin: '24px 32px',
- }}
+ className="noresults center subtile"
>
Geen zoekresultaten gevonden
</h1>}
diff --git a/styles/global.css b/styles/global.css
index 3c28cfc..b6ed028 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -116,14 +116,20 @@ h1, h2, h3, p, b, i, span, td, th {
table { table-layout: fixed; }
/* table styles */
-td, th {
- padding: 4px;
- font-size: 15px;
+td, th { padding: 4px; }
+
+input {
+ color: var(--foreground);
+ background-color: transparent;
+ font-family: inherit;
+ border: 0;
+ font-size: 1rem; /* why? */
}
input::placeholder {
font-style: italic;
- opacity: .8;
+ opacity: 1;
+ color: var(--gray-600);
}
/* remove chrome's ugly :focus outline */
@@ -135,10 +141,6 @@ input::placeholder {
/* material-ui default state */
svg.MuiSvgIcon-root { transition: none !important; }
-input::placeholder { opacity: .75; }
-input.dark::placeholder { color: var(--text); }
-input.light::placeholder { color: var(--text-alt); }
-
/* editable field status */
*[contenteditable] { border-color: var(--background-alt); }
*[contenteditable="true"]:focus { border-color: var(--disk-a); }
diff --git a/styles/search.css b/styles/search.css
new file mode 100644
index 0000000..06a3918
--- /dev/null
+++ b/styles/search.css
@@ -0,0 +1,12 @@
+.searchBar input {
+ width: calc(100% - 2 * var(--spacing-medium) - 48px);
+ margin: 2px 0;
+}
+
+.results .result .inner .userInfo {
+ left: calc(48px + var(--spacing-medium));
+}
+
+h1.noresults {
+ margin: 24px 32px;
+}
diff --git a/styles/utility.css b/styles/utility.css
index 4331d3a..783b168 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -28,8 +28,17 @@
.a0 { top: 0; bottom: 0; left: 0; right: 0; }
+.dispnone { display: none; }
+.dispinbl { display: inline-block; }
+.dispbl { display: block; }
+
+.valigntop { vertical-align: top; }
+.valignsup { vertical-align: super; }
+
+.center { text-align: center; }
+
.subtile {
- color: var(--gray-300);
+ color: var(--gray-600);
font-style: italic;
}