Skip to content
This repository was archived by the owner on Jan 16, 2026. It is now read-only.

Commit f2f9767

Browse files
Jared-GrossJared-Gross
committed
Worksheet improvements and toastui css
1 parent cfbab18 commit f2f9767

9 files changed

Lines changed: 136 additions & 188 deletions

File tree

‎src/components/worksheet/block.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ export class Block {
326326
this.paragraphEditor = new Editor({
327327
el: paragraphEl,
328328
previewStyle: "vertical",
329-
height: "250px",
329+
height: "500px",
330330
initialEditType: "wysiwyg",
331331
usageStatistics: true,
332332
});

‎src/components/worksheet/preview.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ export class Preview {
1515

1616
const headerElement = document.createElement("div");
1717
headerElement.innerHTML = `
18-
<nav class="row bottom-align">
19-
<span>${escapeHtml(this.worksheet.topic)}</span>
20-
<h6 class="max center-align">${escapeHtml(this.worksheet.name)}</h6>
21-
<span>Due: ${escapeHtml(this.worksheet.date)}</span>
22-
</nav>
18+
<div class="padding bottom-align">
19+
<div class="left absolute">${escapeHtml(this.worksheet.topic)}</div>
20+
<h6 class="center absolute">${escapeHtml(this.worksheet.name)}</h6>
21+
<div class="right absolute">Due: ${escapeHtml(this.worksheet.date)}</div>
22+
</div>
2323
<hr>
2424
<nav class="row">
2525
<div class="worksheet-notes max padding small-text no-line">
@@ -28,9 +28,10 @@ export class Preview {
2828
<div class="max">Name <hr></div>
2929
</nav>
3030
<hr>
31+
${this.worksheet.getTotalPoints() > 0 ? `
3132
<nav class="row right-align">
3233
<div class="extra extra-margin"><h6>/ ${escapeHtml(String(this.worksheet.getTotalPoints()))} pts</h6></div>
33-
</nav>
34+
</nav>` : ``}
3435
`.trim();
3536

3637
this.container.append(headerElement);

‎src/pages/lesson/lesson.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Editor from "@toast-ui/editor";
88
import Viewer from "@toast-ui/editor/dist/toastui-editor-viewer";
99
import type { AssessmentRow } from "@models/assessment-row";
1010
import "@static/css/lesson.css";
11+
import "@static/css/toastui-editor.css";
1112
import "flatpickr/dist/themes/dark.css";
1213
import flatpickr from "flatpickr";
1314
import "@toast-ui/editor/dist/toastui-editor.css";

‎src/pages/worksheet/worksheet.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ <h6>Teacher Notes</h6>
217217
<div id="preview-pane"></div>
218218
</div>
219219
</div>
220-
<div class="min extra-margin transparent fixed bottom right hide-on-print" id="add-blocks">
220+
<div class="min extra-margin transparent fixed bottom right hide-on-print" id="add-blocks" style="z-index: 9999 !important;">
221221
<button class="extra circle medium-elevate">
222222
<i>add</i>
223223
</button>

‎src/pages/worksheet/worksheet.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import "@utils/firebase";
33
import "katex/dist/katex.min.css";
44
import "@static/css/style.css";
55
import "@static/css/worksheet.css";
6+
import "@static/css/toastui-editor.css";
67
import "beercss";
78
import "material-dynamic-colors";
89
import "@toast-ui/editor/dist/toastui-editor.css";
@@ -615,7 +616,6 @@ document.addEventListener("DOMContentLoaded", async () => {
615616
// Initialize UI
616617
// -----------------------------
617618
setupEditorPreviewToggle();
618-
// setupWorksheetEditorPane();
619619

620620
// -----------------------------
621621
// Load worksheet from API

‎src/static/css/lesson.css‎

Lines changed: 8 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,30 @@
22
font-family: 'Latin Modern Roman';
33
font-weight: normal;
44
font-style: normal;
5-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmroman10-regular.woff') format('woff');
5+
src: url('../fonts/lmroman10-regular.woff') format('woff');
66
}
77

88
@font-face {
99
font-family: 'Latin Modern Roman';
1010
font-weight: bold;
1111
font-style: normal;
12-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmroman10-bold.woff') format('woff');
12+
src: url('../fonts/lmroman10-bold.woff') format('woff');
1313
}
1414

1515
@font-face {
1616
font-family: 'Latin Modern Roman';
1717
font-weight: normal;
1818
font-style: italic;
19-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmroman10-italic.woff') format('woff');
19+
src: url('../fonts/lmroman10-italic.woff') format('woff');
2020
}
2121

2222
@font-face {
2323
font-family: 'Latin Modern Roman';
2424
font-weight: bold;
2525
font-style: italic;
26-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmroman10-bolditalic.woff') format('woff');
26+
src: url('../fonts/lmroman10-bolditalic.woff') format('woff');
2727
}
2828

29-
@font-face {
30-
font-family: 'Latin Modern Mono';
31-
font-weight: normal;
32-
font-style: normal;
33-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmmono10-regular.woff') format('woff');
34-
}
35-
36-
@font-face {
37-
font-family: 'Latin Modern Mono';
38-
font-weight: normal;
39-
font-style: italic;
40-
src: url('https://cdn.rawgit.com/AndrewBelt/WiTeX/master/fonts/lmmono10-italic.woff') format('woff');
41-
}
4229

4330
html,
4431
body {
@@ -47,6 +34,10 @@ body {
4734
padding: 0;
4835
}
4936

37+
#preview-pane .toastui-editor-contents {
38+
font-family: 'Latin Modern Roman', serif;
39+
}
40+
5041
@media (min-width: 601px) {
5142
main {
5243
flex: 1;
@@ -106,78 +97,6 @@ body {
10697
}
10798
}
10899

109-
#preview-pane .toastui-editor-contents {
110-
font-family: 'Latin Modern Roman', serif;
111-
}
112-
113-
.toastui-editor-ww-container {
114-
background-color: var(--container) !important;
115-
}
116-
117-
.toastui-editor-contents h1,
118-
.toastui-editor-contents h2,
119-
.toastui-editor-contents h3,
120-
.toastui-editor-contents h4,
121-
.toastui-editor-contents h5,
122-
.toastui-editor-contents h6,
123-
.toastui-editor-contents li,
124-
.toastui-editor-ww-container .toastui-editor-contents td p,
125-
.toastui-editor-ww-container .toastui-editor-contents p,
126-
.scroll>table,
127-
table :is(thead,
128-
tbody,
129-
tfoot,
130-
tr,
131-
td),
132-
.toastui-editor-contents p {
133-
color: var(--on-background) !important;
134-
}
135-
136-
.toastui-editor-contents table th {
137-
background-color: var(--surface-container-high) !important;
138-
}
139-
140-
#preview-pane .toastui-editor-contents table th {
141-
background-color: #555 !important;
142-
}
143-
144-
.toastui-editor-defaultUI-toolbar {
145-
background-color: var(--surface-container-highest) !important;
146-
border-top-right-radius: 1.5em !important;
147-
border-top-left-radius: 1.5em !important;
148-
}
149-
150-
.toastui-editor-defaultUI {
151-
border-color: var(--outline) !important;
152-
border-radius: 1.5em !important;
153-
}
154-
155-
.toastui-editor-mode-switch {
156-
border-top: none !important;
157-
background-color: var(--fill) !important;
158-
}
159-
160-
.toastui-editor-mode-switch .tab-item {
161-
background-color: var(--fill) !important;
162-
color: var(--on-primary) !important;
163-
}
164-
165-
.toastui-editor-mode-switch .tab-item {
166-
background-color: var(--surface-container) !important;
167-
color: var(--on-surface-container) !important;
168-
border: none !important;
169-
border-radius: 1.5em !important;
170-
margin: .125rem !important;
171-
}
172-
173-
.toastui-editor-mode-switch .tab-item:hover {
174-
background: var(--active) !important;
175-
}
176-
177-
.toastui-editor-mode-switch .tab-item.active {
178-
background-color: var(--secondary-container) !important;
179-
color: var(--on-secondary-container) !important;
180-
}
181100

182101
@media print {
183102
body {

‎src/static/css/toastui-editor.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.toastui-editor-ww-container {
2+
background-color: var(--container) !important;
3+
border-radius: 0 !important;
4+
}
5+
6+
.toastui-editor-ww-code-block pre,
7+
.lang-math,
8+
.toastui-editor-md-code-block-line-background {
9+
background-color: var(--surface-container) !important;
10+
color: var(--on-surface) !important;
11+
}
12+
13+
.toastui-editor-contents .toastui-editor-ww-code-block:after {
14+
background-color: color-mix(in srgb,
15+
var(--surface-container-high) 60%,
16+
transparent) !important;
17+
color: var(--on-surface) !important;
18+
}
19+
20+
.toastui-editor-defaultUI-toolbar button {
21+
border-color: var(--outline) !important;
22+
}
23+
24+
.toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
25+
background-color: var(--surface-container-high) !important;
26+
}
27+
28+
.toastui-editor-dropdown-toolbar {
29+
background-color: var(--surface-container-highest) !important;
30+
border-color: var(--outline) !important;
31+
}
32+
33+
34+
.toastui-editor-contents h1,
35+
.toastui-editor-contents h2,
36+
.toastui-editor-contents h3,
37+
.toastui-editor-contents h4,
38+
.toastui-editor-contents h5,
39+
.toastui-editor-contents h6,
40+
.toastui-editor-contents li,
41+
.toastui-editor-ww-container .toastui-editor-contents td p,
42+
.toastui-editor-ww-container .toastui-editor-contents p,
43+
.scroll>table,
44+
table :is(thead,
45+
tbody,
46+
tfoot,
47+
tr,
48+
td),
49+
.toastui-editor-contents p,
50+
.ProseMirror {
51+
color: var(--on-background) !important;
52+
}
53+
54+
.toastui-editor-contents table th {
55+
background-color: var(--surface-container-high) !important;
56+
}
57+
58+
#preview-pane .toastui-editor-contents table th {
59+
background-color: #555 !important;
60+
}
61+
62+
.toastui-editor-defaultUI-toolbar {
63+
background-color: var(--surface-container-highest) !important;
64+
border-top-right-radius: 1.5em !important;
65+
border-top-left-radius: 1.5em !important;
66+
}
67+
68+
.toastui-editor-defaultUI {
69+
border-color: var(--outline) !important;
70+
border-radius: 1.5em !important;
71+
}
72+
73+
.toastui-editor-mode-switch {
74+
border-top: none !important;
75+
background-color: var(--fill) !important;
76+
}
77+
78+
.toastui-editor-mode-switch .tab-item {
79+
background-color: var(--fill) !important;
80+
color: var(--on-primary) !important;
81+
}
82+
83+
.toastui-editor-mode-switch .tab-item {
84+
background-color: var(--surface-container) !important;
85+
color: var(--on-surface-container) !important;
86+
border: none !important;
87+
border-radius: 1.5em !important;
88+
margin: .125rem !important;
89+
}
90+
91+
.toastui-editor-mode-switch .tab-item:hover {
92+
background: var(--active) !important;
93+
}
94+
95+
.toastui-editor-mode-switch .tab-item.active {
96+
background-color: var(--secondary-container) !important;
97+
color: var(--on-secondary-container) !important;
98+
}

‎src/static/css/worksheet.css‎

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -347,78 +347,6 @@ body {
347347
}
348348
}
349349

350-
#preview-pane .toastui-editor-contents {
351-
font-family: 'Latin Modern Roman', serif;
352-
}
353-
354-
.toastui-editor-ww-container {
355-
background-color: var(--container) !important;
356-
}
357-
358-
.toastui-editor-contents h1,
359-
.toastui-editor-contents h2,
360-
.toastui-editor-contents h3,
361-
.toastui-editor-contents h4,
362-
.toastui-editor-contents h5,
363-
.toastui-editor-contents h6,
364-
.toastui-editor-contents li,
365-
.toastui-editor-ww-container .toastui-editor-contents td p,
366-
.toastui-editor-ww-container .toastui-editor-contents p,
367-
.scroll>table,
368-
table :is(thead,
369-
tbody,
370-
tfoot,
371-
tr,
372-
td),
373-
.toastui-editor-contents p {
374-
color: var(--on-background) !important;
375-
}
376-
377-
.toastui-editor-contents table th {
378-
background-color: var(--surface-container-high) !important;
379-
}
380-
381-
#preview-pane .toastui-editor-contents table th {
382-
background-color: #555 !important;
383-
}
384-
385-
.toastui-editor-defaultUI-toolbar {
386-
background-color: var(--surface-container-highest) !important;
387-
border-top-right-radius: 1.5em !important;
388-
border-top-left-radius: 1.5em !important;
389-
}
390-
391-
.toastui-editor-defaultUI {
392-
border-color: var(--outline) !important;
393-
border-radius: 1.5em !important;
394-
}
395-
396-
.toastui-editor-mode-switch {
397-
border-top: none !important;
398-
background-color: var(--fill) !important;
399-
}
400-
401-
.toastui-editor-mode-switch .tab-item {
402-
background-color: var(--fill) !important;
403-
color: var(--on-primary) !important;
404-
}
405-
406-
.toastui-editor-mode-switch .tab-item {
407-
background-color: var(--surface-container) !important;
408-
color: var(--on-surface-container) !important;
409-
border: none !important;
410-
border-radius: 1.5em !important;
411-
margin: .125rem !important;
412-
}
413-
414-
.toastui-editor-mode-switch .tab-item:hover {
415-
background: var(--active) !important;
416-
}
417-
418-
.toastui-editor-mode-switch .tab-item.active {
419-
background-color: var(--secondary-container) !important;
420-
color: var(--on-secondary-container) !important;
421-
}
422350

423351
article .handle {
424352
opacity: 0;

0 commit comments

Comments
 (0)