forked from
nonbinary.computer/weaver
atproto blogging
more styling fixes, getting things consistent between view & edit
+47
-27
+22
-14
crates/weaver-app/assets/styling/record-view.css
+22
-14
crates/weaver-app/assets/styling/record-view.css
···
73
73
display: flex;
74
74
gap: 0;
75
75
border-bottom: 1px solid var(--color-border);
76
-
margin-bottom: 1.5rem;
77
76
margin-top: 1.5rem;
78
77
align-items: center;
79
78
}
···
166
165
display: flex;
167
166
flex-direction: column;
168
167
align-items: flex-start;
168
+
border-left: 1px dashed var(--color-subtle);
169
169
}
170
170
171
171
.record-field {
···
173
173
flex-direction: column;
174
174
padding: 0rem 0 0rem 1rem;
175
175
padding-right: 1rem;
176
+
margin-left: -1px;
176
177
border-left: 2px solid var(--color-secondary);
177
178
border-bottom: 1px dashed var(--color-subtle);
178
179
z-index: 1;
···
229
230
}
230
231
231
232
.record-section {
232
-
padding-left: 1.5rem;
233
+
position: relative;
234
+
margin-left: 1.5rem;
235
+
border-left: 1px dashed var(--color-border);
236
+
}
237
+
238
+
.section-content .record-section {
239
+
position: relative;
240
+
border-left: 1px dashed var(--color-border);
241
+
}
242
+
243
+
.array-item .record-section {
233
244
position: relative;
234
245
border-left: 1px dashed var(--color-border);
235
246
}
···
242
253
padding-left: 1rem;
243
254
padding-top: 0.5rem;
244
255
padding-bottom: 0.25rem;
256
+
margin-left: -1px;
245
257
border-left: 2px solid var(--color-primary);
246
258
border-bottom: 1px dashed var(--color-muted);
247
-
margin-left: -1.55rem;
248
259
}
249
260
250
261
.section-content .section-label {
···
254
265
font-weight: 600;
255
266
padding-left: 1rem;
256
267
padding-top: 0.5rem;
257
-
margin-left: -0.02rem;
268
+
margin-left: -1px;
258
269
border-left: 2px solid var(--color-secondary);
259
270
}
260
271
···
263
274
flex-direction: column;
264
275
align-items: flex-start;
265
276
padding-right: 1rem;
266
-
margin-left: -0.02rem;
267
277
}
268
278
269
279
.section-content .record-field {
···
425
435
font-family: var(--font-mono);
426
436
font-size: 0.9rem;
427
437
padding: 1rem;
428
-
background: var(--color-background-alt, rgba(0, 0, 0, 0.2));
438
+
background: var(--color-surface, rgba(0, 0, 0, 0.2));
429
439
border: 1px solid var(--color-border);
430
440
color: var(--color-text);
431
441
resize: vertical;
···
442
452
font-family: var(--font-mono);
443
453
font-size: 0.85rem;
444
454
padding: 1rem;
445
-
background: var(--color-background-alt, rgba(0, 0, 0, 0.2));
455
+
background: var(--color-surface, rgba(0, 0, 0, 0.2));
446
456
border: 1px solid var(--color-border);
447
457
overflow-y: auto;
448
458
align-self: flex-start;
···
450
460
451
461
.parse-error,
452
462
.validation-errors {
453
-
color: var(--color-error, #ff6b6b);
463
+
color: var(--color-error);
454
464
margin-top: 0.5rem;
455
465
}
456
466
457
467
.parse-success,
458
468
.validation-success {
459
-
color: var(--color-success, #51cf66);
469
+
color: var(--color-success);
460
470
}
461
471
462
472
.validation-errors h4 {
···
468
478
469
479
.validation-errors .error {
470
480
padding: 0.25rem 0;
471
-
border-left: 2px solid var(--color-error, #ff6b6b);
481
+
border-left: 2px solid var(--color-error);
472
482
padding-left: 0.5rem;
473
483
margin: 0.25rem 0;
474
484
}
···
481
491
}
482
492
483
493
.array-item .section-header {
484
-
margin-left: -1.53rem;
485
494
}
486
495
.array-item .section-content .record-field {
487
-
margin-left: 0rem;
488
496
}
489
497
490
498
.array-item .record-field {
491
-
margin-left: -1.5rem;
492
499
}
493
500
494
501
.array-length {
···
502
509
width: 100%;
503
510
display: flex;
504
511
flex-direction: column;
505
-
margin-left: 1.49rem;
512
+
margin-left: 1.48rem;
506
513
}
507
514
508
515
/* Pretty Editor Input Fields */
···
601
608
align-items: center;
602
609
padding: 0.75rem 0 0rem 0rem;
603
610
margin-bottom: 1rem;
611
+
margin-left: 1.5rem;
604
612
border-left: 1px solid var(--color-border);
605
613
}
606
614
+25
-13
crates/weaver-app/src/views/record.rs
+25
-13
crates/weaver-app/src/views/record.rs
···
274
274
div { class: "section-content",
275
275
for (idx, item) in arr.iter().enumerate() {
276
276
{
277
-
let item_path = format!("{}[{}]", path, idx);
277
+
let item_path = format!("{}[{}]", label, idx);
278
278
let is_object = matches!(item, Data::Object(_));
279
279
280
280
if is_object {
281
281
rsx! {
282
+
283
+
div {
284
+
class: "array-item",
282
285
div { class: "record-section",
283
286
div { class: "section-label", "{item_path}" }
284
287
div { class: "section-content",
···
289
292
}
290
293
}
291
294
}
295
+
}
292
296
}
293
297
} else {
298
+
294
299
rsx! {
300
+
301
+
div {
302
+
class: "array-item",
295
303
DataView {
296
304
data: item.clone(),
297
305
path: item_path,
298
306
did: did.clone()
299
307
}
308
+
}
300
309
}
301
310
}
302
311
}
···
307
316
}
308
317
Data::Object(obj) => {
309
318
let is_root = path.is_empty();
310
-
let is_array_item = path.contains('[');
319
+
let is_array_item = path.split('.').last().unwrap_or(&path).contains('[');
311
320
312
321
if is_root || is_array_item {
313
322
// Root object or array item: just render children (array items already wrapped)
314
323
rsx! {
315
-
for (key, value) in obj.iter() {
316
-
{
317
-
let new_path = if is_root {
318
-
key.to_string()
319
-
} else {
320
-
format!("{}.{}", path, key)
321
-
};
322
-
let did_clone = did.clone();
323
-
rsx! {
324
-
DataView { data: value.clone(), path: new_path, did: did_clone }
324
+
div { class: if !is_root { "record-section" } else {""},
325
+
for (key, value) in obj.iter() {
326
+
{
327
+
let new_path = if is_root {
328
+
key.to_string()
329
+
} else {
330
+
format!("{}.{}", path, key)
331
+
};
332
+
let did_clone = did.clone();
333
+
rsx! {
334
+
DataView { data: value.clone(), path: new_path, did: did_clone }
335
+
}
325
336
}
326
337
}
327
338
}
···
330
341
// Nested object (not array item): wrap in section
331
342
let label = path.split('.').last().unwrap_or(&path);
332
343
rsx! {
344
+
345
+
div { class: "section-label", "{label}" }
333
346
div { class: "record-section",
334
-
div { class: "section-label", "{label}" }
335
347
div { class: "section-content",
336
348
for (key, value) in obj.iter() {
337
349
{