Skip to content

Commit e64b775

Browse files
andreiaandreia
authored
Merge pull request #28 from TappNetwork/json_types_update
Update JSON types preview
2 parents 6aa46e9 + 6a3ba91 commit e64b775

8 files changed

Lines changed: 742 additions & 105 deletions

File tree

‎resources/css/filament-library.css‎

Lines changed: 194 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,8 @@
3030
width: 100% !important;
3131
}
3232

33-
/* Dark mode support for file preview */
34-
@media (prefers-color-scheme: dark) {
35-
.filament-library-unpreviewable-message {
36-
color: #9ca3af; /* text-gray-400 equivalent for dark mode */
37-
}
33+
.dark .filament-library-unpreviewable-message {
34+
color: #9ca3af;
3835
}
3936

4037
/* ==========================================================================
@@ -78,14 +75,12 @@
7875
color: #6b7280;
7976
}
8077

81-
@media (prefers-color-scheme: dark) {
82-
.filament-library-audio-preview {
83-
background-color: #1f2937;
84-
}
78+
.dark .filament-library-audio-preview {
79+
background-color: #1f2937;
80+
}
8581

86-
.filament-library-audio-preview-label {
87-
color: #9ca3af;
88-
}
82+
.dark .filament-library-audio-preview-label {
83+
color: #9ca3af;
8984
}
9085

9186
/* Markdown Prose */
@@ -104,30 +99,176 @@
10499
margin-top: 1.5rem;
105100
margin-bottom: 0.75rem;
106101
font-weight: 600;
102+
color: #111827;
103+
}
104+
105+
.filament-library-prose h1 {
106+
font-size: 1.5rem;
107+
}
108+
109+
.filament-library-prose h1:first-child {
110+
margin-top: 0;
111+
}
112+
113+
.filament-library-prose h2 {
114+
font-size: 1.25rem;
115+
}
116+
117+
.filament-library-prose h3 {
118+
font-size: 1.125rem;
119+
}
120+
121+
.filament-library-prose p {
122+
margin-bottom: 1rem;
123+
line-height: 1.625;
124+
color: #374151;
125+
}
126+
127+
.filament-library-prose p:last-child {
128+
margin-bottom: 0;
107129
}
108130

109131
.filament-library-prose ul,
110132
.filament-library-prose ol {
111-
margin: 0.75rem 0;
133+
margin: 0 0 1rem;
112134
padding-left: 1.5rem;
135+
color: #374151;
136+
}
137+
138+
.filament-library-prose ul {
139+
list-style-type: disc;
140+
}
141+
142+
.filament-library-prose ol {
143+
list-style-type: decimal;
144+
}
145+
146+
.filament-library-prose li {
147+
line-height: 1.625;
148+
}
149+
150+
.filament-library-prose li + li {
151+
margin-top: 0.25rem;
152+
}
153+
154+
.filament-library-prose a {
155+
font-weight: 500;
156+
color: var(--color-primary-600, #d97706);
157+
text-decoration: underline;
158+
}
159+
160+
.filament-library-prose strong {
161+
font-weight: 600;
162+
color: #111827;
163+
}
164+
165+
.filament-library-prose blockquote {
166+
margin: 0 0 1rem;
167+
padding-left: 1rem;
168+
border-left: 4px solid #e5e7eb;
169+
color: #4b5563;
170+
font-style: italic;
171+
}
172+
173+
.filament-library-prose code {
174+
border-radius: 0.25rem;
175+
background-color: #f3f4f6;
176+
padding: 0.125rem 0.375rem;
177+
font-size: 0.875rem;
178+
color: #111827;
113179
}
114180

115181
.filament-library-prose pre {
116182
overflow-x: auto;
183+
margin-bottom: 1rem;
117184
padding: 1rem;
118-
border-radius: 0.375rem;
185+
border-radius: 0.5rem;
119186
background-color: #f3f4f6;
187+
font-size: 0.875rem;
188+
color: #111827;
189+
}
190+
191+
.filament-library-prose pre code {
192+
background-color: transparent;
193+
padding: 0;
194+
}
195+
196+
.filament-library-prose hr {
197+
margin: 1.5rem 0;
198+
border-color: #e5e7eb;
199+
}
200+
201+
.filament-library-prose table {
202+
width: 100%;
203+
margin-bottom: 1rem;
204+
border-collapse: collapse;
205+
font-size: 0.875rem;
206+
}
207+
208+
.filament-library-prose th {
209+
border: 1px solid #e5e7eb;
210+
background-color: #f9fafb;
211+
padding: 0.5rem 0.75rem;
212+
text-align: start;
213+
font-weight: 600;
214+
}
215+
216+
.filament-library-prose td {
217+
border: 1px solid #e5e7eb;
218+
padding: 0.5rem 0.75rem;
219+
}
220+
221+
.dark .filament-library-prose {
222+
background-color: #111827;
223+
color: #f3f4f6;
224+
}
225+
226+
.dark .filament-library-prose h1,
227+
.dark .filament-library-prose h2,
228+
.dark .filament-library-prose h3 {
229+
color: #ffffff;
120230
}
121231

122-
@media (prefers-color-scheme: dark) {
123-
.filament-library-prose {
124-
background-color: #111827;
125-
color: #f3f4f6;
126-
}
232+
.dark .filament-library-prose p,
233+
.dark .filament-library-prose ul,
234+
.dark .filament-library-prose ol {
235+
color: #d1d5db;
236+
}
237+
238+
.dark .filament-library-prose a {
239+
color: var(--color-primary-400, #fbbf24);
240+
}
241+
242+
.dark .filament-library-prose strong {
243+
color: #ffffff;
244+
}
245+
246+
.dark .filament-library-prose blockquote {
247+
border-left-color: rgb(255 255 255 / 0.2);
248+
color: #9ca3af;
249+
}
250+
251+
.dark .filament-library-prose code {
252+
background-color: rgb(255 255 255 / 0.1);
253+
color: #f3f4f6;
254+
}
127255

128-
.filament-library-prose pre {
129-
background-color: #1f2937;
130-
}
256+
.dark .filament-library-prose pre {
257+
background-color: rgb(255 255 255 / 0.1);
258+
color: #f3f4f6;
259+
}
260+
261+
.dark .filament-library-prose hr {
262+
border-color: rgb(255 255 255 / 0.1);
263+
}
264+
265+
.dark .filament-library-prose th {
266+
border-color: rgb(255 255 255 / 0.1);
267+
background-color: rgb(255 255 255 / 0.05);
268+
}
269+
270+
.dark .filament-library-prose td {
271+
border-color: rgb(255 255 255 / 0.1);
131272
}
132273

133274
/* JSON Structured Previews */
@@ -262,45 +403,43 @@
262403
color: #4b5563;
263404
}
264405

265-
@media (prefers-color-scheme: dark) {
266-
.filament-library-json-preview {
267-
background-color: #111827;
268-
color: #f3f4f6;
269-
}
406+
.dark .filament-library-json-preview {
407+
background-color: #111827;
408+
color: #f3f4f6;
409+
}
270410

271-
.filament-library-quiz-question {
272-
border-bottom-color: #374151;
273-
}
411+
.dark .filament-library-quiz-question {
412+
border-bottom-color: #374151;
413+
}
274414

275-
.filament-library-quiz-option {
276-
background-color: #1f2937;
277-
border-color: #374151;
278-
}
415+
.dark .filament-library-quiz-option {
416+
background-color: #1f2937;
417+
border-color: #374151;
418+
}
279419

280-
.filament-library-quiz-option-correct {
281-
background-color: #14532d;
282-
border-color: #166534;
283-
}
420+
.dark .filament-library-quiz-option-correct {
421+
background-color: #14532d;
422+
border-color: #166534;
423+
}
284424

285-
.filament-library-flashcard {
286-
border-color: #374151;
287-
}
425+
.dark .filament-library-flashcard {
426+
border-color: #374151;
427+
}
288428

289-
.filament-library-flashcard-front {
290-
background-color: #1f2937;
291-
border-bottom-color: #374151;
292-
}
429+
.dark .filament-library-flashcard-front {
430+
background-color: #1f2937;
431+
border-bottom-color: #374151;
432+
}
293433

294-
.filament-library-mindmap-label {
295-
background-color: #1e3a5f;
296-
border-color: #1d4ed8;
297-
}
434+
.dark .filament-library-mindmap-label {
435+
background-color: #1e3a5f;
436+
border-color: #1d4ed8;
437+
}
298438

299-
.filament-library-json-tree-key {
300-
color: #d1d5db;
301-
}
439+
.dark .filament-library-json-tree-key {
440+
color: #d1d5db;
441+
}
302442

303-
.filament-library-json-tree-value {
304-
color: #9ca3af;
305-
}
443+
.dark .filament-library-json-tree-value {
444+
color: #9ca3af;
306445
}

‎src/Resources/views/infolists/components/previews/json-flashcards.blade.php‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
$cards = is_array($data['cards'] ?? null) ? $data['cards'] : [];
66
@endphp
77

8-
<div class="filament-library-json-preview filament-library-json-flashcards">
8+
<div class="filament-library-json-flashcards rounded-lg bg-white p-6 text-gray-950 dark:bg-gray-900 dark:text-white">
99
@if($title)
10-
<h2 class="filament-library-json-title">{{ $title }}</h2>
10+
<h2 class="mb-4 text-xl font-semibold text-gray-950 dark:text-white">{{ $title }}</h2>
1111
@endif
1212

13-
<div class="filament-library-flashcards-grid">
13+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
1414
@forelse($cards as $index => $card)
1515
@if(! is_array($card))
1616
@continue
@@ -21,18 +21,28 @@
2121
$back = $card['back'] ?? $card['definition'] ?? $card['answer'] ?? '';
2222
@endphp
2323

24-
<div class="filament-library-flashcard">
25-
<div class="filament-library-flashcard-front">
26-
<span class="filament-library-flashcard-label">Front</span>
27-
<div>{{ $front }}</div>
24+
<div class="flex min-h-48 flex-col overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
25+
<div class="flex flex-1 flex-col border-b border-gray-200 bg-gray-50/80 p-4 dark:border-white/10 dark:bg-white/5">
26+
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
27+
{{ __('Front') }}
28+
</span>
29+
<div class="mt-1 flex flex-1 items-start text-sm leading-relaxed text-gray-800 dark:text-gray-200">
30+
{{ $front }}
31+
</div>
2832
</div>
29-
<div class="filament-library-flashcard-back">
30-
<span class="filament-library-flashcard-label">Back</span>
31-
<div>{{ $back }}</div>
33+
<div class="flex flex-1 flex-col p-4">
34+
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
35+
{{ __('Back') }}
36+
</span>
37+
<div class="mt-1 flex flex-1 items-start text-sm leading-relaxed text-gray-800 dark:text-gray-200">
38+
{{ $back }}
39+
</div>
3240
</div>
3341
</div>
3442
@empty
35-
<p class="filament-library-json-empty">No flashcards found in this file.</p>
43+
<p class="col-span-full text-sm text-gray-500 dark:text-gray-400">
44+
{{ __('No flashcards found in this file.') }}
45+
</p>
3646
@endforelse
3747
</div>
3848
</div>

0 commit comments

Comments
 (0)