Skip to content

Commit 18fb8f7

Browse files
jacobp100jacobp100
committed
.
1 parent cfc330a commit 18fb8f7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+964
-668
lines changed

‎assets/technicalc/computation-critical.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ if (location.search.length > 1) {
55
const container = document.getElementById("computation");
66
container.removeAttribute("hidden");
77

8-
const loadHtml = fetch(
9-
require.resolve("/assets/technicalc/computation.html")
10-
).then((res) => res.text());
8+
const loadHtml = fetch("/computation").then((res) => res.text());
119

1210
const loadStyles = new Promise((res) => {
1311
const styles = document.createElement("link");
@@ -26,6 +24,7 @@ if (location.search.length > 1) {
2624

2725
document.addEventListener("click", (e) => {
2826
const { target } = e;
27+
console.log({ target });
2928
if (target.classList.contains(className("computation__close"))) {
3029
container.setAttribute("hidden", "");
3130
} else if (

‎assets/technicalc/computation.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@
8080

8181
.computation__open-in-app,
8282
.computation__toggle-display-mode {
83-
display: block;
83+
/* Flex to force horizontal direction, so hidden content does not expand button height */
84+
display: flex;
85+
align-items: center;
8486
padding: 6px 32px;
8587
border: 0;
8688
font: inherit;
@@ -103,8 +105,7 @@
103105
color: #ccc;
104106
}
105107

106-
.computation__toggle-display-mode-icon svg {
107-
vertical-align: middle;
108+
.computation__toggle-display-mode-icon {
108109
width: 1rem;
109110
height: 1rem;
110111
pointer-events: none;

‎assets/technicalc/computation.html

-244
This file was deleted.

‎assets/technicalc/computation.tsx

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { A, classNames, InlineSvg } from "../../core";
2+
3+
export const fragment = true;
4+
5+
const noop = () => {};
6+
7+
export default () => (
8+
<>
9+
<div>
10+
<button className={classNames("computation__close")}>Close</button>
11+
<h3 className={classNames("computation__header")}>Computation</h3>
12+
</div>
13+
14+
<div className={classNames("computation__maths-container")}>
15+
<div className={classNames("computation__input computation--loading")} />
16+
<div className={classNames("computation__result computation--loading")} />
17+
<div className={classNames("computation__spinner")}>
18+
<InlineSvg src="/assets/technicalc/loading.svg" />
19+
</div>
20+
<button className={classNames("computation__toggle-display-mode")}>
21+
<InlineSvg
22+
src="/assets/technicalc/ellipsis.svg"
23+
className="computation__toggle-display-mode-icon"
24+
/>
25+
Display Mode
26+
</button>
27+
</div>
28+
29+
<div className={classNames("computation__form-container")}>
30+
<form className={classNames("computation__form")}>
31+
<div
32+
className={classNames(
33+
"computation__radio-options computation__radio-options--check-ring"
34+
)}
35+
>
36+
<label className={classNames("computation__radio-option")}>
37+
<input
38+
type="radio"
39+
name="style"
40+
value="natural-mixed"
41+
onChange={noop}
42+
/>
43+
<span>
44+
<InlineSvg src="/assets/technicalc/style-natural-mixed.svg" />
45+
</span>
46+
<span
47+
className={classNames("computation__radio-option-label-hidden")}
48+
>
49+
Natural (Mixed Fractions)
50+
</span>
51+
</label>
52+
<label className={classNames("computation__radio-option")}>
53+
<input type="radio" name="style" value="natural" onChange={noop} />
54+
<span>
55+
<InlineSvg src="/assets/technicalc/style-natural.svg" />
56+
</span>
57+
<span
58+
className={classNames("computation__radio-option-label-hidden")}
59+
>
60+
Natural
61+
</span>
62+
</label>
63+
<label className={classNames("computation__radio-option")}>
64+
<input
65+
type="radio"
66+
name="style"
67+
value="decimal"
68+
checked
69+
onChange={noop}
70+
/>
71+
<span>
72+
<InlineSvg src="/assets/technicalc/style-decimal.svg" />
73+
</span>
74+
<span
75+
className={classNames("computation__radio-option-label-hidden")}
76+
>
77+
Decimal
78+
</span>
79+
</label>
80+
<label className={classNames("computation__radio-option")}>
81+
<input
82+
type="radio"
83+
name="style"
84+
value="engineering"
85+
onChange={noop}
86+
/>
87+
<span>
88+
<InlineSvg src="/assets/technicalc/style-engineering.svg" />
89+
</span>
90+
<span
91+
className={classNames("computation__radio-option-label-hidden")}
92+
>
93+
Engineering
94+
</span>
95+
</label>
96+
</div>
97+
98+
<label className={classNames("computation__checkbox")}>
99+
<input type="checkbox" name="digitGrouping" checked onChange={noop} />
100+
Digit Grouping
101+
</label>
102+
103+
<label className={classNames("computation__slider")}>
104+
Decimal Places
105+
<input
106+
type="range"
107+
name="precision"
108+
min="0"
109+
max="12"
110+
value="8"
111+
onChange={noop}
112+
/>
113+
</label>
114+
115+
<div className={classNames("computation__radio-options")}>
116+
<span className={classNames("computation__radio-option-title")}>
117+
Base
118+
</span>
119+
<label className={classNames("computation__radio-option")}>
120+
<input type="radio" name="base" value="2" onChange={noop} />
121+
<span>2</span>
122+
</label>
123+
<label className={classNames("computation__radio-option")}>
124+
<input type="radio" name="base" value="8" onChange={noop} />
125+
<span>8</span>
126+
</label>
127+
<label className={classNames("computation__radio-option")}>
128+
<input
129+
type="radio"
130+
name="base"
131+
value="10"
132+
checked
133+
onChange={noop}
134+
/>
135+
<span>10</span>
136+
</label>
137+
<label className={classNames("computation__radio-option")}>
138+
<input type="radio" name="base" value="16" onChange={noop} />
139+
<span>16</span>
140+
</label>
141+
</div>
142+
</form>
143+
</div>
144+
145+
<div className={classNames("computation__footer")}>
146+
<p className={classNames("computation__footer-copy")}>
147+
This equation was created with TechniCalc. <strong>Scroll down</strong>{" "}
148+
to learn more.
149+
</p>
150+
<A href="#" className="computation__open-in-app">
151+
Open in App
152+
</A>
153+
</div>
154+
</>
155+
);

‎assets/technicalc/ellipsis.svg

+5
Loading

‎assets/technicalc/loading.svg

+130
Loading

‎assets/technicalc/style-decimal.svg

+3
Loading

‎assets/technicalc/style-engineering.svg

+3
Loading

0 commit comments

Comments
 (0)