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

Commit eb09ff3

Browse files
Jared-GrossJared-Gross
committed
Changes
1 parent fae19fb commit eb09ff3

2 files changed

Lines changed: 60 additions & 27 deletions

File tree

‎src/components/worksheet/block.ts‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -76,33 +76,45 @@ export class Block {
7676
</nav>
7777
</div>
7878
<div id="${id}-content" class="block-content">
79-
<nav class="margin max toolbar round scroll surface-container-high" id="${id}-block-type">
79+
<nav class="margin toolbar round fill center" id="${id}-block-type">
8080
<a data-ui="#${id}-header">
8181
<i>format_h1</i>
82-
<span class="l">Header</span>
82+
<div class="tooltip">
83+
Title
84+
</div>
8385
</a>
8486
<a data-ui="#${id}-paragraph">
8587
<i>text_fields</i>
86-
<span class="l">Text</span>
88+
<div class="tooltip">
89+
Paragraph
90+
</div>
8791
</a>
8892
<a class="active" data-ui="#${id}-question">
8993
<i>help</i>
90-
<span class="l">Question</span>
94+
<div class="tooltip">
95+
Question
96+
</div>
9197
</a>
9298
<a data-ui="#${id}-divider">
9399
<i>horizontal_rule</i>
94-
<span class="l">Divider</span>
100+
<div class="tooltip">
101+
Divider
102+
</div>
95103
</a>
96104
<a data-ui="#${id}-space">
97105
<i>align_space_around</i>
98-
<span class="l">Space</span>
106+
<div class="tooltip">
107+
Blank Space
108+
</div>
99109
</a>
100110
<a data-ui="#${id}-break">
101111
<i>insert_page_break</i>
102-
<span class="l">Break</span>
112+
<div class="tooltip">
113+
Page Break
114+
</div>
103115
</a>
104116
</nav>
105-
<div class="page padding active" id="${id}-question">
117+
<div class="page active" id="${id}-question">
106118
<div class="grid">
107119
<div class="s12 m6 l6 prefix field label border round">
108120
<i>star</i>
@@ -125,11 +137,11 @@ export class Block {
125137
</label>
126138
</div>
127139
128-
<div class="page padding" id="${id}-paragraph">
140+
<div class="page" id="${id}-paragraph">
129141
<div id="${id}-paragraph-container"></div>
130142
</div>
131143
132-
<div class="page padding" id="${id}-header">
144+
<div class="page" id="${id}-header">
133145
<div class="field label suffix border round">
134146
<select id="${id}-header-type">
135147
<option>Header 1</option>
@@ -148,19 +160,18 @@ export class Block {
148160
</div>
149161
</div>
150162
151-
<div class="page padding" id="${id}-divider">
163+
<div class="page" id="${id}-divider">
152164
<hr class="margin">
153165
</div>
154166
155-
<div class="page padding" id="${id}-space">
167+
<div class="page" id="${id}-space">
156168
<div class="field label border round no-margin">
157169
<input type="number" id="${id}-blank-space-size">
158170
<label>Blank Space Size</label>
159171
</div>
160172
</div>
161173
162-
<div class="page padding" id="${id}-break">
163-
<div class="page-break-label">Page Break</div>
174+
<div class="page" id="${id}-break">
164175
</div>
165176
</div>
166177
</div>

‎src/static/css/worksheet.css‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,11 @@
132132
left: 50%;
133133
transform: translate(-50%, -50%);
134134

135-
background-color: var(--surface);
135+
--_blur: 1rem;
136+
-webkit-backdrop-filter: blur(var(--_blur));
137+
backdrop-filter: blur(var(--_blur));
138+
color: var(--on-surface);
139+
136140
border: 0.0175rem solid var(--outline-variant);
137141
border-radius: 0.5rem;
138142
padding: 0 12px;
@@ -143,11 +147,6 @@
143147
white-space: nowrap;
144148
}
145149

146-
.question-space {
147-
border: 1px dashed var(--outline-variant);
148-
border-radius: 0.5rem;
149-
}
150-
151150
.question-space {
152151
position: relative;
153152
/* required for pseudo-elements */
@@ -164,7 +163,11 @@
164163
left: 50%;
165164
transform: translate(-50%, -50%);
166165

167-
background-color: var(--surface);
166+
--_blur: 1rem;
167+
-webkit-backdrop-filter: blur(var(--_blur));
168+
backdrop-filter: blur(var(--_blur));
169+
color: var(--on-surface);
170+
168171
border: 0.0175rem solid var(--outline-variant);
169172
border-radius: 0.5rem;
170173
padding: 0 12px;
@@ -179,12 +182,16 @@
179182
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
180183
content: attr(data-height);
181184
position: absolute;
182-
top: 50%;
185+
top: 25%;
183186
right: 0.75rem;
184187
transform: translateY(-50%);
185188

189+
--_blur: 1rem;
190+
-webkit-backdrop-filter: blur(var(--_blur));
191+
backdrop-filter: blur(var(--_blur));
192+
color: var(--on-surface);
193+
186194
padding: 2px 6px;
187-
background-color: var(--surface);
188195
border: 0.0175rem solid var(--outline-variant);
189196
border-radius: 0.375rem;
190197

@@ -198,10 +205,16 @@
198205
top: 0.5rem;
199206
bottom: 0.5rem;
200207
right: 0.25rem;
201-
border-right: 1px dashed var(--outline-variant);
208+
border-right: 1px solid var(--outline-variant);
202209
pointer-events: none;
203210
}
204211

212+
.blank-space {
213+
position: relative;
214+
/* required for pseudo-elements */
215+
border: 1px dashed var(--outline-variant);
216+
border-radius: 0.5rem;
217+
}
205218

206219
.blank-space::after {
207220
font-family: sui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -211,7 +224,11 @@
211224
left: 50%;
212225
transform: translate(-50%, -50%);
213226

214-
background-color: var(--surface);
227+
--_blur: 1rem;
228+
-webkit-backdrop-filter: blur(var(--_blur));
229+
backdrop-filter: blur(var(--_blur));
230+
color: var(--on-surface);
231+
215232
border: 0.0175rem solid var(--outline-variant);
216233
border-radius: 0.5rem;
217234
padding: 0 12px;
@@ -233,7 +250,12 @@
233250
transform: translateY(-50%);
234251

235252
padding: 2px 6px;
236-
background-color: var(--surface);
253+
254+
--_blur: 1rem;
255+
-webkit-backdrop-filter: blur(var(--_blur));
256+
backdrop-filter: blur(var(--_blur));
257+
color: var(--on-surface);
258+
237259
border: 0.0175rem solid var(--outline-variant);
238260
border-radius: 0.375rem;
239261

@@ -247,7 +269,7 @@
247269
top: 0.5rem;
248270
bottom: 0.5rem;
249271
right: 0.25rem;
250-
border-right: 1px dashed var(--outline-variant);
272+
border-right: 1px solid var(--outline-variant);
251273
pointer-events: none;
252274
}
253275
}

0 commit comments

Comments
 (0)