commit f59ffa001ea989f748d46c590c05d51f72c91aa3
parent 30d9b43b8a4c59985bee88291d6261654de1fabe
Author: mokou <mokou@posteo.de>
Date: Thu, 30 Jul 2020 04:59:33 +0200
chore: Lint
Diffstat:
8 files changed, 164 insertions(+), 73 deletions(-)
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ to sync), it's pretty important when you deploy Koro. That being said, it's very
external CouchDB instance. Simply put your connection string in the `KORO_COUCHDB_URL` environment variable. The
easiest way to do this is to create a `.env` file, which will automatically be read by Webpack. It would look like this:
-``` text
+```text
KORO_COUCHDB_URL=https://user:pass@mycouch.com/koro
```
diff --git a/src/App.svelte b/src/App.svelte
@@ -19,7 +19,7 @@
router.listen()
- isDarkMode.subscribe(mode => {
+ isDarkMode.subscribe((mode) => {
if (mode === null && window.matchMedia) {
const matches = window.matchMedia('(prefers-color-scheme: dark)').matches
isDarkMode.set(matches)
@@ -44,36 +44,50 @@
}
</script>
-<div
- class="w-screen"
- class:text-gray-100={$isDarkMode}
->
-<main class="w-full max-w-screen-xl mx-auto px-6 pt-5">
- <svelte:component this={route} bind:params={routeParams} />
+<div class="w-screen" class:text-gray-100={$isDarkMode}>
+ <main class="w-full max-w-screen-xl mx-auto px-6 pt-5">
+ <svelte:component this={route} bind:params={routeParams} />
- <hr class="border-gray-300 mt-5 mb-2 max-w-xl"/>
- <div class="text-center text-sm max-w-xl text-gray-100" class:text-gray-800={!$isDarkMode}>
- koro v{process.version} by
- <a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="https://mokou.org">Marisa</a>
- (<a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="https://git.touhou.cz/mokou/koro">source</a>)
- <br/>
- <span class="text-purple-400 hover:cursor-pointer" class:text-purple-600={!$isDarkMode} on:click={is24Hrs.set(!$is24Hrs)}>
- {#if $is24Hrs}
- toggle AM/PM
- {:else}
- toggle 24-hours
- {/if}
- </span>
- •
- <span class="text-purple-400 hover:cursor-pointer" class:text-purple-600={!$isDarkMode} on:click={isDarkMode.set(!$isDarkMode)}>
- {#if $isDarkMode}
- set light mode
- {:else}
- set dark mode
- {/if}
- </span>
- •
- <a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="/updates">update log</a>
- </div>
-</main>
+ <hr class="border-gray-300 mt-5 mb-2 max-w-xl" />
+ <div
+ class="text-center text-sm max-w-xl text-gray-100"
+ class:text-gray-800={!$isDarkMode}>
+ koro v{process.version} by
+ <a
+ class="text-purple-400"
+ class:text-purple-600={!$isDarkMode}
+ href="https://mokou.org">
+ Marisa
+ </a>
+ (
+ <a
+ class="text-purple-400"
+ class:text-purple-600={!$isDarkMode}
+ href="https://git.touhou.cz/mokou/koro">
+ source
+ </a>
+ )
+ <br />
+ <span
+ class="text-purple-400 hover:cursor-pointer"
+ class:text-purple-600={!$isDarkMode}
+ on:click={is24Hrs.set(!$is24Hrs)}>
+ {#if $is24Hrs}toggle AM/PM{:else}toggle 24-hours{/if}
+ </span>
+ •
+ <span
+ class="text-purple-400 hover:cursor-pointer"
+ class:text-purple-600={!$isDarkMode}
+ on:click={isDarkMode.set(!$isDarkMode)}>
+ {#if $isDarkMode}set light mode{:else}set dark mode{/if}
+ </span>
+ •
+ <a
+ class="text-purple-400"
+ class:text-purple-600={!$isDarkMode}
+ href="/updates">
+ update log
+ </a>
+ </div>
+ </main>
</div>
diff --git a/src/components/DateTimeGrid.svelte b/src/components/DateTimeGrid.svelte
@@ -62,18 +62,30 @@
}
</script>
-<div class="grid grid-cols-4 lg:grid-cols-11 w-full max-w-5xl datetimegrid" class:dark={$isDarkMode}>
+<div
+ class="grid grid-cols-4 lg:grid-cols-11 w-full max-w-5xl datetimegrid"
+ class:dark={$isDarkMode}>
<div
class="block lg:hidden text-xs bg-black text-white"
- on:click={() => (view = view[1] < datesDay1.length ? [view[0] + 1, view[1] + 1] : view)}
- >+30 mins</div>
+ on:click={() => (view = view[1] < datesDay1.length ? [view[0] + 1, view[1] + 1] : view)}>
+ +30 mins
+ </div>
+ <div
+ class="block lg:hidden text-xs bg-black text-white"
+ on:click={() => (view = view[0] !== 0 ? [view[0] - 1, view[1] - 1] : view)}>
+ -30 mins
+ </div>
+ <div class="block lg:hidden text-xs bg-black text-white" on:click={nextDay}>
+ +1 day
+ </div>
<div
class="block lg:hidden text-xs bg-black text-white"
- on:click={() => (view = view[0] !== 0 ? [view[0] - 1, view[1] - 1] : view)}
- >-30 mins</div>
- <div class="block lg:hidden text-xs bg-black text-white" on:click={nextDay}>+1 day</div>
- <div class="block lg:hidden text-xs bg-black text-white" on:click={previousDay}>-1 day</div>
- <div class="text-center hidden lg:block hover:cursor-pointer" on:click={previousDay}>
+ on:click={previousDay}>
+ -1 day
+ </div>
+ <div
+ class="text-center hidden lg:block hover:cursor-pointer"
+ on:click={previousDay}>
{day1.date() === day(startDate).date() ? '' : '▲'}
</div>
<div
@@ -133,7 +145,11 @@
{t.format($is24Hrs ? 'HH:mm' : 'hh:mma')}
</div>
{/each}
- <div class="text-center hidden lg:block hover:cursor-pointer" on:click={nextDay}>▼</div>
+ <div
+ class="text-center hidden lg:block hover:cursor-pointer"
+ on:click={nextDay}>
+ ▼
+ </div>
</div>
<div class="mt-2">
@@ -141,7 +157,9 @@
<ul class="list-disc">
{#each selected as s}
<li>
- <span class="font-bold">{day(s).format(`DD/MM/YYYY ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}</span>
+ <span class="font-bold">
+ {day(s).format(`DD/MM/YYYY ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}
+ </span>
({day(s).fromNow()})
</li>
{/each}
diff --git a/src/components/ResponseGrid.svelte b/src/components/ResponseGrid.svelte
@@ -19,7 +19,7 @@
}, 0)
}
- function updateWindowSize () {
+ function updateWindowSize() {
windowWidth = window.innerWidth
}
@@ -32,7 +32,12 @@
<div class="grid grid-cols-12">
<div class="col-span-2" />
{#each times as t}
- <div class="text-center">{day.utc(t).local().format(`DD/MM ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}</div>
+ <div class="text-center">
+ {day
+ .utc(t)
+ .local()
+ .format(`DD/MM ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}
+ </div>
{/each}
{#if times.length < 10}
{#each new Array(10 - times.length) as a}
@@ -68,7 +73,12 @@
{:else}
<div class="grid grid-cols-2 max-w-lg">
{#each times as t}
- <div class="text-center font-bold py-2">{day.utc(t).local().format(`DD/MM ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}</div>
+ <div class="text-center font-bold py-2">
+ {day
+ .utc(t)
+ .local()
+ .format(`DD/MM ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}
+ </div>
<div
class="py-2 text-center rounded-sm"
class:bg-green-500={reduceStatus('yes', t) === Object.values(responses).length}
diff --git a/src/main.css b/src/main.css
@@ -73,7 +73,7 @@ input.dark,
}
.hover-box {
- transition: .5s transform;
+ transition: 0.5s transform;
border: 1px solid transparent;
}
diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte
@@ -118,17 +118,17 @@
// because syncing the whole DB would be completely overkill, and we only
// really need to know about the documents that we can see.
live = await syncDoc(params.id)
- live.on('change', async change => {
+ live.on('change', async (change) => {
// If a change to the document is detected, pull from the PouchDB, triggering
// a rerender.
const db = await pouch()
if (change.direction === 'pull') {
- getEvent().catch(err => {
+ getEvent().catch((err) => {
error = `Couldn't find the event. You might be offline!`
})
}
})
- live.on('error', err => {
+ live.on('error', (err) => {
console.error(err)
})
})
@@ -165,7 +165,12 @@
{#if !$hasResponded || !$hasResponded[params.id]}
<form class="mt-5 max-w-xl" on:submit|preventDefault={onSubmit}>
- <label for="name" class="font-bold text-gray-300" class:text-gray-800={!$isDarkMode}>Your name</label>
+ <label
+ for="name"
+ class="font-bold text-gray-300"
+ class:text-gray-800={!$isDarkMode}>
+ Your name
+ </label>
<input type="text" class:dark={$isDarkMode} bind:value={name} />
<div class="grid mt-4 grid-cols-3-1">
<div class="text-center">Yes</div>
@@ -193,10 +198,19 @@
on:click={() => toggleNo(t)} />
<div class="ml-3">
<span class="font-bold">
- <span class="text-center block lg:inline">{day.utc(t).local().format('DD/MM/YYYY')}</span>
- <span class="text-center block lg:inline">{day.utc(t).local().format($is24Hrs ? 'HH:mm' : 'hh:mma')}</span>
+ <span class="text-center block lg:inline">
+ {day.utc(t).local().format('DD/MM/YYYY')}
+ </span>
+ <span class="text-center block lg:inline">
+ {day
+ .utc(t)
+ .local()
+ .format($is24Hrs ? 'HH:mm' : 'hh:mma')}
+ </span>
+ </span>
+ <span class="hidden lg:block">
+ ({day.utc(t).local().fromNow()})
</span>
- <span class="hidden lg:block">({day.utc(t).local().fromNow()})</span>
</div>
{/each}
</div>
diff --git a/src/pages/Index.svelte b/src/pages/Index.svelte
@@ -81,7 +81,7 @@
}
onMount(async () => {
- if (!await isOnline()) {
+ if (!(await isOnline())) {
errorFlash = `You're offline! This means you can still create an event, but you'll have to be online before you can share the link with others.`
}
autocomplete({
@@ -117,7 +117,9 @@
</p>
<p class="text-2xl my-4 font-medium max-w-xl leading-normal">
- You can also create a <a class="text-purple-400" href="/poll">regular poll</a>.
+ You can also create a
+ <a class="text-purple-400" href="/poll">regular poll</a>
+ .
</p>
<form class="max-w-xl mt-6" on:submit|preventDefault={submitForm}>
@@ -128,21 +130,35 @@
{errorFlash}
</div>
{/if}
- <label for="name" class="font-bold text-gray-300" class:text-gray-600={!$isDarkMode}>Your event's name</label>
+ <label
+ for="name"
+ class="font-bold text-gray-300"
+ class:text-gray-600={!$isDarkMode}>
+ Your event's name
+ </label>
<input
id="name"
type="text"
bind:value={event.name}
class:dark={$isDarkMode}
placeholder="Raid with the boys" />
- <label for="duration" class="font-bold text-gray-300 inline-block mt-4" class:text-gray-600={!$isDarkMode}>
+ <label
+ for="duration"
+ class="font-bold text-gray-300 inline-block mt-4"
+ class:text-gray-600={!$isDarkMode}>
Duration of the event
</label>
<div id="duration-mount" class="mb-5" class:dark={$isDarkMode} />
- <label class="font-bold text-gray-300" class:text-gray-600={!$isDarkMode}>Event start times</label>
+ <label class="font-bold text-gray-300" class:text-gray-600={!$isDarkMode}>
+ Event start times
+ </label>
</form>
<DateTimeGrid startDate={new Date()} bind:selected={event.times} />
- <button class="btn mt-5" type="submit" on:click|preventDefault={submitForm} disabled={submitting}>
+ <button
+ class="btn mt-5"
+ type="submit"
+ on:click|preventDefault={submitForm}
+ disabled={submitting}>
Create event
</button>
{/if}
diff --git a/src/pages/Log.svelte b/src/pages/Log.svelte
@@ -1,4 +1,5 @@
<script>
+
</script>
<a href="/" class="text-blue-600 mb-3">Back to index</a>
@@ -8,7 +9,10 @@
<section class="max-w-xl mb-3 new">
<h2 class="text-2xl" id="132">Version 1.3.2</h2>
<ul class="list-disc ml-4 pb-2">
- <li>Fixed a clashing color combination on the response grid (white text on yellow is not good!)</li>
+ <li>
+ Fixed a clashing color combination on the response grid (white text on
+ yellow is not good!)
+ </li>
</ul>
</section>
@@ -23,8 +27,8 @@
<h2 class="text-2xl" id="130">Version 1.3.0</h2>
<ul class="list-disc ml-4 pb-2">
<li>
- Added a dark mode! This can be toggled in the site footer, and should automatically set based on your
- browser's or computer's preferences.
+ Added a dark mode! This can be toggled in the site footer, and should
+ automatically set based on your browser's or computer's preferences.
</li>
</ul>
</section>
@@ -33,27 +37,42 @@
<h2 class="text-2xl" id="120">Version 1.2.0</h2>
<ul class="list-disc ml-4 pb-2">
<li>
- Added online-only syncing as a fallback method. Koro usually uses a local, in-browser database to store data before
- it's uploaded to our server database, but doing that can be iffy and straight up not work for some people (due to browsers
- being inconsistent in implementations). If for whatever reason that ends up happening, Koro will now prefer directly
- using our server database. This means that you won't be able to use offline event creation anymore, but I hope this
- doesn't happen to very many people, and it's still better than not being able to use the website at all.
+ Added online-only syncing as a fallback method. Koro usually uses a local,
+ in-browser database to store data before it's uploaded to our server
+ database, but doing that can be iffy and straight up not work for some
+ people (due to browsers being inconsistent in implementations). If for
+ whatever reason that ends up happening, Koro will now prefer directly
+ using our server database. This means that you won't be able to use
+ offline event creation anymore, but I hope this doesn't happen to very
+ many people, and it's still better than not being able to use the website
+ at all.
</li>
<li>
- Koro is now responsive! You can use it on your phone and it won't completely break. The response view has been simplified if you're
- on mobile or have an event with a lot of possible times, too.
+ Koro is now responsive! You can use it on your phone and it won't
+ completely break. The response view has been simplified if you're on
+ mobile or have an event with a lot of possible times, too.
</li>
<li>A notice is now displayed on the index page if you're offline.</li>
- <li>You can now view all possible times in the response grid view, where previously it would only show up to 9.</li>
+ <li>
+ You can now view all possible times in the response grid view, where
+ previously it would only show up to 9.
+ </li>
<li>Added a 'back to index' link for this page.</li>
+ </ul>
</section>
<section class="max-w-xl mb-3">
<h2 class="text-2xl" id="110">Version 1.1.0</h2>
<ul class="list-disc ml-4">
- <li>Added the ability to convert between AM/PM and 24-Hour display. You can toggle this in the site footer.</li>
+ <li>
+ Added the ability to convert between AM/PM and 24-Hour display. You can
+ toggle this in the site footer.
+ </li>
<li>Added this update log!</li>
- <li>Fixed a bug where you could keep scrolling to the right on the time select grid, which made everything bug out.</li>
+ <li>
+ Fixed a bug where you could keep scrolling to the right on the time select
+ grid, which made everything bug out.
+ </li>
</ul>
</section>
