Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
ui: kaban task page improvements
+52
-48
+43
packages/client/src/ui.css.ts
+43
packages/client/src/ui.css.ts
···
199
199
},
200
200
});
201
201
202
+
export const detailCardWrapper = style({
203
+
border: `1px solid ${vars.color.border}`,
204
+
borderRadius: vars.radius.lg,
205
+
boxShadow: `0 1px 3px ${vars.color.shadow}`,
206
+
});
207
+
208
+
export const detailCardHeader = style({
209
+
backgroundColor: vars.color.surface,
210
+
borderRadius: `${vars.radius.lg} ${vars.radius.lg} 0 0`,
211
+
paddingBlock: vars.space.md,
212
+
paddingInline: vars.space.md,
213
+
selectors: {
214
+
"&:last-child": {
215
+
borderRadius: vars.radius.lg,
216
+
},
217
+
},
218
+
"@media": {
219
+
[bp.sm]: {
220
+
paddingInline: vars.space.lg,
221
+
},
222
+
},
223
+
});
224
+
225
+
export const detailCardDescription = style({
226
+
fontSize: "0.9375rem",
227
+
lineHeight: 1.7,
228
+
whiteSpace: "pre-wrap",
229
+
paddingBlock: vars.space.md,
230
+
paddingInline: vars.space.md,
231
+
backgroundColor: vars.color.bg,
232
+
borderBlockStart: `1px solid ${vars.color.border}`,
233
+
selectors: {
234
+
"&:last-child": {
235
+
borderRadius: `0 0 ${vars.radius.lg} ${vars.radius.lg}`,
236
+
},
237
+
},
238
+
"@media": {
239
+
[bp.sm]: {
240
+
paddingInline: vars.space.lg,
241
+
},
242
+
},
243
+
});
244
+
202
245
// ---- Buttons ----
203
246
204
247
const btnBase = {
+3
-3
packages/feature-requests/src/ui/pages/feature-request.tsx
+3
-3
packages/feature-requests/src/ui/pages/feature-request.tsx
···
676
676
<p class={ui.muted}>Feature request not found.</p>
677
677
) : (
678
678
<div class={frUi.detailContent}>
679
-
<div class={frUi.detailCardWrapper}>
680
-
<div class={frUi.detailCardHeader}>
679
+
<div class={ui.detailCardWrapper}>
680
+
<div class={ui.detailCardHeader}>
681
681
<RequestCard
682
682
fr={fr}
683
683
hasVoted={votedIds.value.has(fr.id)}
···
735
735
</RequestCard>
736
736
</div>
737
737
738
-
{fr.description && <div class={frUi.descriptionBlock}>{fr.description}</div>}
738
+
{fr.description && <div class={ui.detailCardDescription}>{fr.description}</div>}
739
739
740
740
{data.duplicateOf && (
741
741
<p class={`${ui.muted} ${frUi.duplicateNotice}`}>
+1
-33
packages/feature-requests/src/ui/ui.css.ts
+1
-33
packages/feature-requests/src/ui/ui.css.ts
···
67
67
gap: vars.space.xl,
68
68
});
69
69
70
-
export const detailCardWrapper = style({
71
-
border: `1px solid ${vars.color.border}`,
72
-
borderRadius: vars.radius.lg,
73
-
boxShadow: `0 1px 3px ${vars.color.shadow}`,
74
-
overflow: "hidden",
75
-
});
76
-
77
-
export const detailCardHeader = style({
78
-
backgroundColor: vars.color.surface,
79
-
paddingBlock: vars.space.md,
80
-
paddingInline: vars.space.md,
81
-
"@media": {
82
-
[bp.sm]: {
83
-
paddingInline: vars.space.lg,
84
-
},
85
-
},
86
-
});
87
-
88
-
export const descriptionBlock = style({
89
-
fontSize: "0.9375rem",
90
-
lineHeight: 1.7,
91
-
whiteSpace: "pre-wrap",
92
-
paddingBlock: vars.space.md,
93
-
paddingInline: vars.space.md,
94
-
backgroundColor: vars.color.bg,
95
-
borderBlockStart: `1px solid ${vars.color.border}`,
96
-
"@media": {
97
-
[bp.sm]: {
98
-
paddingInline: vars.space.lg,
99
-
},
100
-
},
101
-
});
102
-
103
70
export const duplicateNotice = style({
104
71
paddingBlock: vars.space.sm,
105
72
paddingInline: vars.space.md,
106
73
backgroundColor: vars.color.bg,
107
74
borderBlockStart: `1px solid ${vars.color.border}`,
75
+
borderRadius: `0 0 ${vars.radius.lg} ${vars.radius.lg}`,
108
76
"@media": {
109
77
[bp.sm]: {
110
78
paddingInline: vars.space.lg,
+5
-5
packages/kanban/src/ui/pages/task.tsx
+5
-5
packages/kanban/src/ui/pages/task.tsx
···
509
509
<p class={ui.muted}>Task not found.</p>
510
510
) : (
511
511
<div class={kbUi.detailContent}>
512
-
<div class={ui.stackLg}>
513
-
<div class={ui.card}>
512
+
<div class={ui.detailCardWrapper}>
513
+
<div class={ui.detailCardHeader}>
514
514
{editing.value ? (
515
515
<div class={ui.formStack}>
516
516
<div>
···
558
558
</div>
559
559
</div>
560
560
) : (
561
-
<>
561
+
<div class={ui.stack}>
562
562
<div class={ui.row}>
563
563
<h2 class={ui.cardTitle}>
564
564
<span class={ui.muted}>#{task.number}</span> {task.title}
···
624
624
)}
625
625
<span class={ui.muted}>{formatDate(task.createdAt, fullDateOpts)}</span>
626
626
</div>
627
-
</>
627
+
</div>
628
628
)}
629
629
</div>
630
630
631
631
{!editing.value && task.description && (
632
-
<div class={kbUi.descriptionBlock}>{task.description}</div>
632
+
<div class={ui.detailCardDescription}>{task.description}</div>
633
633
)}
634
634
</div>
635
635
-7
packages/kanban/src/ui/ui.css.ts
-7
packages/kanban/src/ui/ui.css.ts
···
155
155
gap: vars.space.xl,
156
156
});
157
157
158
-
export const descriptionBlock = style({
159
-
fontSize: "0.9375rem",
160
-
lineHeight: 1.7,
161
-
whiteSpace: "pre-wrap",
162
-
paddingBlockEnd: vars.space.xl,
163
-
borderBlockEnd: `1px solid ${vars.color.border}`,
164
-
});
165
158
166
159
export const titleRow = style({
167
160
display: "flex",