Skip to content

Commit cd25620

Browse files
microbit-gracemicrobit-robertmicrobit-matt-hillsdon
authored
Update homepage and add resource pages (#253)
In the long run we'll likely consider sourcing the content from elsewhere. --------- Co-authored-by: Robert Knight <[email protected]> Co-authored-by: Matt Hillsdon <[email protected]>
1 parent 6f803b7 commit cd25620

28 files changed

+1543
-377
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/FrontPageContentTile.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
-->
66

77
<div
8-
class="flex flex-col flex-wrap items-center border-gray-200 border border-solid bg-white rounded-3xl p-6 shadow-md max-w-88">
8+
class="flex flex-col flex-wrap border-gray-200 border border-solid bg-white rounded-xl shadow-md max-w-88 h-full">
99
<slot />
1010
</div>

‎src/components/ResourcePageLayout.svelte‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!--
2+
(c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
3+
4+
SPDX-License-Identifier: MIT
5+
-->
6+
7+
<style>
8+
/* Styling slot elements */
9+
.slot :global(h2) {
10+
font-size: 1.8rem;
11+
line-height: 2rem;
12+
font-weight: bold;
13+
margin-top: 2rem;
14+
}
15+
.slot :global(h2):first-child {
16+
margin-top: 0;
17+
}
18+
.slot :global(h3) {
19+
font-size: 1.2rem;
20+
line-height: 2rem;
21+
font-weight: bold;
22+
margin-top: 1.5rem;
23+
}
24+
25+
.slot :global(li) {
26+
margin-top: 0.5em;
27+
}
28+
29+
.slot :global(p) {
30+
margin-top: 1em;
31+
}
32+
33+
.slot :global(img) {
34+
margin-top: 1em;
35+
}
36+
</style>
37+
38+
<script lang="ts">
39+
import ChevronArror from 'virtual:icons/ri/arrow-drop-right-line';
40+
import { t } from '../i18n';
41+
import { Paths, navigate } from '../router/paths';
42+
import StartResumeActions from './StartResumeActions.svelte';
43+
44+
export let title: string;
45+
export let videoId: string;
46+
export let videoTitleId: string;
47+
48+
const handleBreadcrumbClick = (e: Event) => {
49+
e.preventDefault();
50+
navigate(Paths.HOME);
51+
};
52+
</script>
53+
54+
<main class="h-full flex flex-col items-center bg-backgrounddark">
55+
<div class="flex flex-col max-w-1084px lg:w-3/4 md:w-4/5 p-10 gap-5">
56+
<div class="flex flex-col gap-5">
57+
<div class="flex flex-row">
58+
<a
59+
class="text-lg hover:underline"
60+
href={Paths.HOME}
61+
on:click={handleBreadcrumbClick}>Home</a>
62+
<ChevronArror class="h-full text-2xl" />
63+
<p class="text-lg">
64+
{title}
65+
</p>
66+
</div>
67+
<h1 class="text-4xl font-bold">{title}</h1>
68+
</div>
69+
<div class="flex flex-col items-center justify-center gap-5">
70+
<iframe
71+
class="lg:w-3/4 md:w-full h-auto aspect-video"
72+
style="aspect-ratio: 16/9"
73+
title={$t(videoTitleId)}
74+
src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0`}
75+
allow="encrypted-media"
76+
frameBorder="0"
77+
allowFullScreen>
78+
</iframe>
79+
</div>
80+
<div class="w-full bg-backgroundlight p-30px rounded-lg shadow-xl">
81+
<div class="flex flex-col lg:max-w-3/4 slot">
82+
<slot />
83+
<StartResumeActions class="mt-8" />
84+
</div>
85+
</div>
86+
</div>
87+
</main>

‎src/components/StandardButton.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,10 @@
2121

2222
<script lang="ts" context="module">
2323
export type ButtonVariant = 'secondary' | 'primary' | 'warning' | 'link';
24+
export type ButtonSize = 'small' | 'normal' | 'large';
2425
</script>
2526

2627
<script lang="ts">
27-
type ButtonSize = 'small' | 'normal' | 'large';
28-
2928
export let type: ButtonVariant = 'secondary';
3029
export let onClick: ((e: Event) => void) | undefined = undefined;
3130
export let disabled = false;

‎src/components/StartResumeActions.svelte‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!--
2+
(c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
3+
4+
SPDX-License-Identifier: MIT
5+
-->
6+
7+
<script lang="ts">
8+
import { get } from 'svelte/store';
9+
import HtmlFormattedMessage, {
10+
linkWithProps,
11+
} from '../components/HtmlFormattedMessage.svelte';
12+
import StandardButton, { ButtonSize } from '../components/StandardButton.svelte';
13+
import StandardDialog from '../components/dialogs/StandardDialog.svelte';
14+
import { t } from '../i18n';
15+
import { Paths, navigate } from '../router/paths';
16+
import { gestures } from '../script/stores/Stores';
17+
import { startConnectionProcess } from '../script/stores/connectDialogStore';
18+
import { clearGestures } from '../script/stores/mlStore';
19+
import {
20+
compatibility,
21+
isCompatibilityWarningDialogOpen,
22+
state,
23+
} from '../script/stores/uiStore';
24+
25+
export let buttonSize: ButtonSize = 'normal';
26+
27+
$: hasExistingSession = $gestures.some(g => g.name || g.recordings.length);
28+
let showDataLossWarning = false;
29+
30+
const { bluetooth, usb } = get(compatibility);
31+
const isIncompatible = !bluetooth && !usb;
32+
const openCompatibityWarningDialog = () => isCompatibilityWarningDialogOpen.set(true);
33+
34+
const onClickStartNewSession = () => {
35+
if (isIncompatible) {
36+
openCompatibityWarningDialog();
37+
return;
38+
}
39+
if (hasExistingSession) {
40+
showDataLossWarning = true;
41+
} else {
42+
handleNewSession();
43+
}
44+
};
45+
46+
const handleNewSession = () => {
47+
clearGestures();
48+
if ($state.isInputConnected) {
49+
navigate(Paths.DATA);
50+
} else {
51+
showDataLossWarning = false;
52+
startConnectionProcess();
53+
}
54+
};
55+
</script>
56+
57+
<div class="{$$restProps.class || ''} flex items-center gap-x-5">
58+
{#if hasExistingSession}
59+
<StandardButton size={buttonSize} type="primary" onClick={() => navigate(Paths.DATA)}
60+
>{$t('footer.resume')}</StandardButton>
61+
{/if}
62+
<StandardButton
63+
size={buttonSize}
64+
type={hasExistingSession ? 'secondary' : 'primary'}
65+
onClick={onClickStartNewSession}>{$t('footer.start')}</StandardButton>
66+
</div>
67+
68+
<StandardDialog
69+
isOpen={showDataLossWarning}
70+
onClose={() => (showDataLossWarning = false)}
71+
class="w-150 space-y-5">
72+
<svelte:fragment slot="heading">
73+
{$t('content.index.dataWarning.title')}
74+
</svelte:fragment>
75+
<svelte:fragment slot="body">
76+
<div slot="body" class="space-y-5">
77+
<p>{$t('content.index.dataWarning.subtitleOne')}</p>
78+
<p>
79+
<HtmlFormattedMessage
80+
id="content.index.dataWarning.subtitleTwo"
81+
options={{
82+
values: {
83+
link: linkWithProps({
84+
href:
85+
'data:application/json;charset=utf-8,' +
86+
encodeURIComponent(JSON.stringify(get(gestures), null, 2)),
87+
download: 'dataset.json',
88+
}),
89+
},
90+
}} />
91+
</p>
92+
<div class="flex justify-end items-center gap-x-5">
93+
<StandardButton onClick={handleNewSession} type="primary"
94+
>{$t('footer.start')}</StandardButton>
95+
</div>
96+
</div>
97+
</svelte:fragment>
98+
</StandardDialog>

‎src/components/TrainModelFirstTitle.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<script lang="ts">
88
import { t } from '../i18n';
9-
import testModelImage from '../imgs/TestModel.svg';
9+
import testModelImage from '../imgs/test_model_black.svg';
1010
import StandardButton from './StandardButton.svelte';
1111
import TrainingButton from '../pages/training/TrainingButton.svelte';
1212
import { Paths, navigate } from '../router/paths';

‎src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
-->
66

77
<script lang="ts">
8+
import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
89
import microbitImage from '../../../imgs/stylised-microbit-black.svg';
9-
import computerImage from '../../../imgs/stylised_computer.svg';
1010
import usbCableImage from '../../../imgs/stylised-usb-cable.svg';
11-
import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
11+
import computerImage from '../../../imgs/stylised_computer_w_bluetooth.svg';
12+
import { state } from '../../../script/stores/uiStore';
1213
import WhatYouWillNeedDialog from '../WhatYouWillNeedDialog.svelte';
13-
import { get } from 'svelte/store';
14-
import { compatibility, state } from '../../../script/stores/uiStore';
1514
1615
export let onNextClick: () => void;
1716
export let onStartRadioClick: (() => void) | undefined;
@@ -36,17 +35,13 @@
3635
subtitleId: 'connectMB.bluetoothStart.requirements4.subtitle',
3736
},
3837
];
39-
40-
const { usb } = get(compatibility);
4138
</script>
4239

4340
<WhatYouWillNeedDialog
4441
{items}
4542
headingId={$state.reconnectState.reconnectFailed
4643
? 'reconnectFailed.bluetoothHeading'
47-
: usb
48-
? 'connectMB.bluetoothStart.heading'
49-
: 'connectMB.radioStart.heading'}
44+
: 'connectMB.bluetoothStart.heading'}
5045
switchTextId="connectMB.bluetoothStart.switchRadio"
5146
onSwitchClick={onStartRadioClick}
5247
{onNextClick} />

0 commit comments

Comments
 (0)