Skip to content

Commit 32739b2

Browse files
microbit-robertmicrobit-robert
authored
Scale design to maximise available screen space (#945)
1 parent 3861862 commit 32739b2

File tree

16 files changed

+210
-66
lines changed

16 files changed

+210
-66
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ _steps:
3434
install_dependencies: &install_dependencies
3535
run: npm ci --cache .npm-cache && sudo npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && sudo npm i -g @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
3636
install_theme: &install_theme
37-
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].154
37+
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].180
3838
update_version: &update_version
3939
run: npm run ci:update-version
4040
build: &build

‎src/deployment/default/common-sizes.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
const commonSizes = {
7+
px: "1px",
8+
0.5: "0.11rem",
9+
1: "0.22rem",
10+
1.5: "0.33rem",
11+
2: "0.44rem",
12+
2.5: "0.55rem",
13+
3: "0.66rem",
14+
3.5: "0.77rem",
15+
4: "0.88rem",
16+
5: "1.1rem",
17+
6: "1.32rem",
18+
7: "1.54rem",
19+
8: "1.76rem",
20+
9: "1.98rem",
21+
10: "2.2rem",
22+
12: "2.64rem",
23+
14: "3.08rem",
24+
16: "3.52rem",
25+
20: "4.4rem",
26+
24: "5.28rem",
27+
28: "6.16rem",
28+
32: "7.04rem",
29+
36: "7.92rem",
30+
40: "8.8rem",
31+
44: "9.68rem",
32+
48: "10.56rem",
33+
52: "11.44rem",
34+
56: "12.32rem",
35+
60: "13.2rem",
36+
64: "14.08rem",
37+
72: "15.84rem",
38+
80: "17.6rem",
39+
96: "21.12rem",
40+
};
41+
42+
export default commonSizes;

‎src/deployment/default/components/text.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
const Text = {
7+
sizes: {
8+
sm: {
9+
fontSize: "sm",
10+
},
11+
md: {
12+
fontSize: "md",
13+
},
14+
},
15+
defaultProps: {
16+
size: "md",
17+
},
18+
};
19+
20+
export default Text;

‎src/deployment/default/font-sizes.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
const fontSizes = {
7+
xs: "0.75rem",
8+
sm: "0.875rem",
9+
md: "0.9rem",
10+
lg: "1.012rem",
11+
xl: "1.125rem",
12+
"2xl": "1.35rem",
13+
"3xl": "1.687rem",
14+
"4xl": "2.025rem",
15+
"5xl": "2.7rem",
16+
"6xl": "3.375rem",
17+
"7xl": "4.05rem",
18+
"8xl": "5.4rem",
19+
"9xl": "7.2rem",
20+
};
21+
22+
export default fontSizes;

‎src/deployment/default/sizes.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
import commonSizes from "./common-sizes";
7+
8+
const sizes = {
9+
...commonSizes,
10+
max: "max-content",
11+
min: "min-content",
12+
full: "100%",
13+
"3xs": "14rem",
14+
"2xs": "16rem",
15+
xs: "20rem",
16+
sm: "24rem",
17+
md: "28rem",
18+
lg: "32rem",
19+
xl: "36rem",
20+
"2xl": "42rem",
21+
"3xl": "48rem",
22+
"4xl": "56rem",
23+
"5xl": "64rem",
24+
"6xl": "72rem",
25+
"7xl": "80rem",
26+
"8xl": "90rem",
27+
container: {
28+
sm: "640px",
29+
md: "768px",
30+
lg: "1024px",
31+
xl: "1280px",
32+
},
33+
};
34+
35+
export default sizes;

‎src/deployment/default/space.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
import commonSizes from "./common-sizes";
7+
8+
const space = {
9+
...commonSizes,
10+
};
11+
12+
export default space;

‎src/deployment/default/theme.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,29 @@
66
import { extendTheme, withDefaultVariant } from "@chakra-ui/react";
77

88
import fonts from "./fonts";
9+
import fontSizes from "./font-sizes";
910
import radii from "./radii";
1011
import colors from "./colors";
12+
import sizes from "./sizes";
13+
import space from "./space";
1114
import Button from "./components/button";
1215
import Tabs from "./components/tabs";
1316
import Alert from "./components/alert";
17+
import Text from "./components/text";
1418

1519
// See https://chakra-ui.com/docs/theming/customize-theme
1620
const overrides = {
1721
fonts,
22+
fontSizes,
23+
sizes,
24+
space,
1825
radii,
1926
colors,
2027
components: {
2128
Alert,
2229
Button,
2330
Tabs,
31+
Text,
2432
},
2533
};
2634

‎src/deployment/misc.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66

77
// Miscellaneous items that haven't been properly integrated into the branding.
88
export const backgroundColorTerm = "#333333";
9-
export const defaultCodeFontSizePt = 16;
10-
export const topBarHeight = "4.25rem";
9+
export const defaultCodeFontSizePt = 14;
10+
export const topBarHeight = "4rem";

‎src/documentation/common/CodeEmbed.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ const CodePopUp = ({
237237
return (
238238
<Portal>
239239
<Code
240+
fontSize="md"
240241
zIndex={zIndexCodePopUp}
241242
concise={concise}
242243
full={full}

‎src/project/ProjectAreaNav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ProjectAreaNav = (props: BoxProps) => {
1515
<NewButton mode="button" />
1616
<OpenButton mode="button" />
1717
<Box>
18-
<ResetButton mode="button" mt={5} color="#ae1f1f" />
18+
<ResetButton mode="button" mt={5} colorScheme="red" />
1919
</Box>
2020
</VStack>
2121
</Flex>

‎src/serial/SerialArea.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,6 @@ const SerialArea = ({
8282
</TerminalContext>
8383
);
8484
};
85-
SerialArea.compactSize = 48;
85+
SerialArea.compactSize = 43.19;
8686

8787
export default SerialArea;

‎src/settings/LanguageDialog.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,9 @@ const LanguageCard = ({ language, onChooseLanguage }: LanguageCardProps) => {
9595
return (
9696
<Button
9797
padding={3}
98-
variant="outline"
98+
variant="language"
9999
alignItems="stretch"
100100
borderRadius="xl"
101-
colorScheme="gray"
102-
textColor="brand.500"
103101
onClick={() => onChooseLanguage(language.id)}
104102
height="auto"
105103
data-testid={language.id}

‎src/simulator/ButtonsModule.tsx

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,26 @@ const ButtonsModule = ({
4141
</>
4242
)}
4343
</VStack>
44-
<SensorInput
45-
type="button"
46-
sensorId="buttonA"
47-
label="A"
48-
state={state}
49-
onValueChange={onValueChange}
50-
running={running}
51-
minimised={minimised}
52-
/>
53-
<SensorInput
54-
type="button"
55-
sensorId="buttonB"
56-
label="B"
57-
state={state}
58-
onValueChange={onValueChange}
59-
running={running}
60-
minimised={minimised}
61-
/>
44+
<HStack spacing={2}>
45+
<SensorInput
46+
type="button"
47+
sensorId="buttonA"
48+
label="A"
49+
state={state}
50+
onValueChange={onValueChange}
51+
running={running}
52+
minimised={minimised}
53+
/>
54+
<SensorInput
55+
type="button"
56+
sensorId="buttonB"
57+
label="B"
58+
state={state}
59+
onValueChange={onValueChange}
60+
running={running}
61+
minimised={minimised}
62+
/>
63+
</HStack>
6264
</HStack>
6365
);
6466
};

‎src/simulator/PinsModule.tsx

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -45,43 +45,45 @@ const PinsModule = ({
4545
</>
4646
)}
4747
</VStack>
48-
<SensorInput
49-
type="pin"
50-
sensorId="pin0"
51-
label="0"
52-
state={state}
53-
onValueChange={onValueChange}
54-
running={simState}
55-
minimised={minimised}
56-
/>
57-
<SensorInput
58-
type="pin"
59-
sensorId="pin1"
60-
label="1"
61-
state={state}
62-
onValueChange={onValueChange}
63-
running={simState}
64-
minimised={minimised}
65-
/>
66-
<SensorInput
67-
type="pin"
68-
sensorId="pin2"
69-
label="2"
70-
state={state}
71-
onValueChange={onValueChange}
72-
running={simState}
73-
minimised={minimised}
74-
/>
75-
<SensorInput
76-
type="pin"
77-
sensorId="pinLogo"
78-
label={touchLogoLabel}
79-
logo={brand.squareLogo}
80-
state={state}
81-
onValueChange={onValueChange}
82-
running={simState}
83-
minimised={minimised}
84-
/>
48+
<HStack spacing={2}>
49+
<SensorInput
50+
type="pin"
51+
sensorId="pin0"
52+
label="0"
53+
state={state}
54+
onValueChange={onValueChange}
55+
running={simState}
56+
minimised={minimised}
57+
/>
58+
<SensorInput
59+
type="pin"
60+
sensorId="pin1"
61+
label="1"
62+
state={state}
63+
onValueChange={onValueChange}
64+
running={simState}
65+
minimised={minimised}
66+
/>
67+
<SensorInput
68+
type="pin"
69+
sensorId="pin2"
70+
label="2"
71+
state={state}
72+
onValueChange={onValueChange}
73+
running={simState}
74+
minimised={minimised}
75+
/>
76+
<SensorInput
77+
type="pin"
78+
sensorId="pinLogo"
79+
label={touchLogoLabel}
80+
logo={brand.squareLogo}
81+
state={state}
82+
onValueChange={onValueChange}
83+
running={simState}
84+
minimised={minimised}
85+
/>
86+
</HStack>
8587
</HStack>
8688
);
8789
};

‎src/workbench/SideBarHeader.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,9 @@ const SideBarHeader = ({
183183
backgroundColor="brand.500"
184184
boxShadow="0px 4px 16px #00000033"
185185
zIndex={zIndexSidebarHeader}
186-
height={searchAvailable && searchModal.isOpen ? "5.5rem" : topBarHeight}
186+
height={
187+
searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
188+
}
187189
alignItems="center"
188190
justifyContent="space-between"
189191
pr={4}
@@ -197,7 +199,7 @@ const SideBarHeader = ({
197199
rel="noopener noreferrer"
198200
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
199201
>
200-
<HStack spacing={3.5} pl={4} pr={4}>
202+
<HStack spacing="0.875rem" px="1rem">
201203
<Box width="3.56875rem" color="white" role="img" ref={faceLogoRef}>
202204
{brand.squareLogo}
203205
</Box>

‎src/workbench/Workbench.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import SideBar from "./SideBar";
3232
import { useSelection } from "./use-selection";
3333

3434
const minimums: [number, number] = [380, 580];
35-
const simulatorMinimums: [number, number] = [300, 300];
35+
const simulatorMinimums: [number, number] = [275, 0];
3636

3737
/**
3838
* The main app layout with resizable panels.

0 commit comments

Comments
 (0)