aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/gameSettings.tsx60
-rw-r--r--components/navbar.tsx42
-rw-r--r--styles/gameSettings.css25
-rw-r--r--styles/navbar.css25
-rw-r--r--styles/notifications.css5
5 files changed, 67 insertions, 90 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index bb01284..13462be 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -1,5 +1,5 @@
import axios from 'axios';
-import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
import { ruleset, userPreferences } from '../api/api';
import { DialogBox } from './dialogBox';
@@ -71,24 +71,15 @@ function GameSettingsSection(props: {
id={props.id}
className='pad-m editableRulesSection'
>
- <span
- style={{
- verticalAlign: 'top',
- fontSize: 14,
- fontWeight: 600,
- }}
- >
+ <span className='valigntop nosel'>
{props.title}
</span>
- <CheckBox
- state={props.state}
- id={`${props.id}_enabled`}
- style={{
- verticalAlign: 'top',
- float: 'right',
- margin: -3,
- }}
- />
+ <div className='checkboxWrapper valigntop floatr'>
+ <CheckBox
+ state={props.state}
+ id={props.id + '_enabled'}
+ />
+ </div>
<div>{props.children}</div>
</Vierkant>;
}
@@ -96,19 +87,10 @@ function GameSettingsSection(props: {
function GameRule(props: {
title: string;
description: string;
- style?: CSSProperties;
}) {
- return <div
- style={{
- backgroundColor: 'var(--page-background)',
- borderRadius: 8,
- padding: '16px 0',
- textAlign: 'center',
- ...props.style,
- }}
- >
- <h1 style={{ color: 'var(--disk-a)', fontSize: 42 }}>{props.title}</h1>
- <p style={{ color: 'var(--text-alt)', maxWidth: 250, margin: '0 auto' }}>{props.description}</p>
+ return <div className='gamerule pad-m round-t center bg-900'>
+ <h1>{props.title}</h1>
+ <p>{props.description}</p>
</div>;
}
@@ -161,28 +143,16 @@ export function EditGameSettings(props: editGameSettingsProps) {
/>
</div>
<CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} />
- <span
- className='valignsup'
- style={{
- marginLeft: 4,
- }}
- >
+ <span className='valignsup'>
Timer gebruiken voor bijde spelers
</span>
</GameSettingsSection>
- {false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
- <div
- style={{
- display: 'grid',
- gridTemplateColumns: '1fr 1fr',
- gridGap: 16,
- margin: '16px 0',
- }}
- >
+ {true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
+ <div className='sidebyside'>
<GameRule title='+2' description='Extra kolommen' />
<GameRule title='+4' description='Extra kolommen' />
</div>
- <GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' />
+ <GameRule title='Gravity' description='De zwaartekracht draait soms' />
<GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' />
</GameSettingsSection>}
<GameSettingsSection
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7f6e694..5ce43bb 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -54,25 +54,7 @@ export function NavBar() {
})();
}, []);
- return <div
- className='navbar bg-800'
- style={{
- width: 48,
- height: '100%',
-
- lineHeight: 0,
-
- display: 'inline-block',
-
- position: 'fixed',
- top: 0,
- left: 0,
-
- overflow: 'visible',
- whiteSpace: 'nowrap',
- zIndex: 2,
- }}
- >
+ return <div className='navbar bg-800 h100vh dispinbl t0 l0 posfix'>
<div className='item'>
<Logo />
</div>
@@ -90,29 +72,13 @@ export function NavBar() {
</a>
<div className='bg-800 bottomArea'>
- {loggedIn && <a
- className='item'
- style={{
- overflow: 'visible',
- position: 'relative',
- }}
- >
+ {loggedIn && <a className='notifications item posrel'>
<div
- style={{ cursor: 'pointer' }}
+ className='iconWrapper'
onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)}
>
<NotificationsIcon />
- {gotNotifications && <div
- style={{
- backgroundColor: 'var(--disk-a)',
- width: 8,
- height: 8,
- borderRadius: 4,
- position: 'absolute',
- top: 2,
- right: 2,
- }}
- />}
+ {gotNotifications && <div className='notificationDot posabs' />}
</div>
<NotificationsArea
visible={notificationsAreaVisible}
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
index d9ba262..3c45fb4 100644
--- a/styles/gameSettings.css
+++ b/styles/gameSettings.css
@@ -29,7 +29,7 @@
}
.editGameSettings .editableRules {
- margin-top: var(--spacing-large);
+ margin: var(--spacing-large) 0;
max-height: 500px;
overflow-y: scroll;
}
@@ -43,11 +43,14 @@
html.dark .editGameSettings .editableRules .editableRulesSection {
background-color: var(--gray-800);
}
-
-.editGameSettings .button {
- line-height: normal;
+.editGameSettings .editableRules .editableRulesSection:last-child {
+ margin-bottom: 0;
}
+.editGameSettings .button { line-height: normal; }
+
+.editGameSettings .checkboxWrapper { margin: -3px; }
+
.editGameSettings .editableRules .editableRulesSection .timeControls {
margin: var(--spacing-medium);
margin-left: 0;
@@ -56,7 +59,19 @@ html.dark .editGameSettings .editableRules .editableRulesSection {
.editGameSettings .editableRules .editableRulesSection .timeControls input {
background-color: var(--background);
-
width: calc(100% - 2 * var(--spacing-medium));
}
+.editGameSettings .editableRules .gamerule {
+ margin-top: var(--spacing-medium);
+}
+
+.editGameSettings .editableRules .gamerule h1 {
+ color: var(--accent);
+ font-size: 2.5rem;
+}
+
+#timelimit .valignsup {
+ margin-left: var(--spacing-small);
+}
+
diff --git a/styles/navbar.css b/styles/navbar.css
index 5866b8f..baf9fd6 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -9,3 +9,28 @@
bottom: -4px;
left: 0;
}
+
+.navbar {
+ width: 48px;
+ line-height: 0;
+ overflow: visible;
+ white-space: nowrap;
+ z-index: 2;
+}
+
+.navbar .bottomArea .item.notifications {
+ overflow: visible;
+}
+
+.navbar .bottomArea .item.notifications > .iconWrapper {
+ cursor: pointer;
+}
+
+.notifications .notificationDot {
+ background-color: var(--accent);
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ top: 2px;
+ right: 2px;
+}
diff --git a/styles/notifications.css b/styles/notifications.css
index ec47836..db1598d 100644
--- a/styles/notifications.css
+++ b/styles/notifications.css
@@ -1,4 +1,5 @@
-.notificationsArea {
+/* a tags are here because of css specificity */
+a.notificationsArea {
left: calc(48px + var(--spacing-medium));
top: 92px;
transform: translateY(-100%);
@@ -7,7 +8,7 @@
height: 450px;
}
-.notificationsArea .tuitje {
+a.notificationsArea .tuitje {
left: var(--spacing-medium);
bottom: 86px;
transform: translate(-100%, 100%) rotate(90deg);