Skip to content

Update JSON types preview #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andreia wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update JSON types preview #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 194 additions & 55 deletions resources/css/filament-library.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,8 @@
width: 100% !important;
}

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

/* ==========================================================================
Expand Down Expand Up @@ -78,14 +75,12 @@
color: #6b7280;
}

@media (prefers-color-scheme: dark) {
.filament-library-audio-preview {
background-color: #1f2937;
}
.dark .filament-library-audio-preview {
background-color: #1f2937;
}

.filament-library-audio-preview-label {
color: #9ca3af;
}
.dark .filament-library-audio-preview-label {
color: #9ca3af;
}

/* Markdown Prose */
Expand All @@ -104,30 +99,176 @@
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 600;
color: #111827;
}

.filament-library-prose h1 {
font-size: 1.5rem;
}

.filament-library-prose h1:first-child {
margin-top: 0;
}

.filament-library-prose h2 {
font-size: 1.25rem;
}

.filament-library-prose h3 {
font-size: 1.125rem;
}

.filament-library-prose p {
margin-bottom: 1rem;
line-height: 1.625;
color: #374151;
}

.filament-library-prose p:last-child {
margin-bottom: 0;
}

.filament-library-prose ul,
.filament-library-prose ol {
margin: 0.75rem 0;
margin: 0 0 1rem;
padding-left: 1.5rem;
color: #374151;
}

.filament-library-prose ul {
list-style-type: disc;
}

.filament-library-prose ol {
list-style-type: decimal;
}

.filament-library-prose li {
line-height: 1.625;
}

.filament-library-prose li + li {
margin-top: 0.25rem;
}

.filament-library-prose a {
font-weight: 500;
color: var(--color-primary-600, #d97706);
text-decoration: underline;
}

.filament-library-prose strong {
font-weight: 600;
color: #111827;
}

.filament-library-prose blockquote {
margin: 0 0 1rem;
padding-left: 1rem;
border-left: 4px solid #e5e7eb;
color: #4b5563;
font-style: italic;
}

.filament-library-prose code {
border-radius: 0.25rem;
background-color: #f3f4f6;
padding: 0.125rem 0.375rem;
font-size: 0.875rem;
color: #111827;
}

.filament-library-prose pre {
overflow-x: auto;
margin-bottom: 1rem;
padding: 1rem;
border-radius: 0.375rem;
border-radius: 0.5rem;
background-color: #f3f4f6;
font-size: 0.875rem;
color: #111827;
}

.filament-library-prose pre code {
background-color: transparent;
padding: 0;
}

.filament-library-prose hr {
margin: 1.5rem 0;
border-color: #e5e7eb;
}

.filament-library-prose table {
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
font-size: 0.875rem;
}

.filament-library-prose th {
border: 1px solid #e5e7eb;
background-color: #f9fafb;
padding: 0.5rem 0.75rem;
text-align: start;
font-weight: 600;
}

.filament-library-prose td {
border: 1px solid #e5e7eb;
padding: 0.5rem 0.75rem;
}

.dark .filament-library-prose {
background-color: #111827;
color: #f3f4f6;
}

.dark .filament-library-prose h1,
.dark .filament-library-prose h2,
.dark .filament-library-prose h3 {
color: #ffffff;
}

@media (prefers-color-scheme: dark) {
.filament-library-prose {
background-color: #111827;
color: #f3f4f6;
}
.dark .filament-library-prose p,
.dark .filament-library-prose ul,
.dark .filament-library-prose ol {
color: #d1d5db;
}

.dark .filament-library-prose a {
color: var(--color-primary-400, #fbbf24);
}

.dark .filament-library-prose strong {
color: #ffffff;
}

.dark .filament-library-prose blockquote {
border-left-color: rgb(255 255 255 / 0.2);
color: #9ca3af;
}

.dark .filament-library-prose code {
background-color: rgb(255 255 255 / 0.1);
color: #f3f4f6;
}

.filament-library-prose pre {
background-color: #1f2937;
}
.dark .filament-library-prose pre {
background-color: rgb(255 255 255 / 0.1);
color: #f3f4f6;
}

.dark .filament-library-prose hr {
border-color: rgb(255 255 255 / 0.1);
}

.dark .filament-library-prose th {
border-color: rgb(255 255 255 / 0.1);
background-color: rgb(255 255 255 / 0.05);
}

.dark .filament-library-prose td {
border-color: rgb(255 255 255 / 0.1);
}

/* JSON Structured Previews */
Expand Down Expand Up @@ -262,45 +403,43 @@
color: #4b5563;
}

@media (prefers-color-scheme: dark) {
.filament-library-json-preview {
background-color: #111827;
color: #f3f4f6;
}
.dark .filament-library-json-preview {
background-color: #111827;
color: #f3f4f6;
}

.filament-library-quiz-question {
border-bottom-color: #374151;
}
.dark .filament-library-quiz-question {
border-bottom-color: #374151;
}

.filament-library-quiz-option {
background-color: #1f2937;
border-color: #374151;
}
.dark .filament-library-quiz-option {
background-color: #1f2937;
border-color: #374151;
}

.filament-library-quiz-option-correct {
background-color: #14532d;
border-color: #166534;
}
.dark .filament-library-quiz-option-correct {
background-color: #14532d;
border-color: #166534;
}

.filament-library-flashcard {
border-color: #374151;
}
.dark .filament-library-flashcard {
border-color: #374151;
}

.filament-library-flashcard-front {
background-color: #1f2937;
border-bottom-color: #374151;
}
.dark .filament-library-flashcard-front {
background-color: #1f2937;
border-bottom-color: #374151;
}

.filament-library-mindmap-label {
background-color: #1e3a5f;
border-color: #1d4ed8;
}
.dark .filament-library-mindmap-label {
background-color: #1e3a5f;
border-color: #1d4ed8;
}

.filament-library-json-tree-key {
color: #d1d5db;
}
.dark .filament-library-json-tree-key {
color: #d1d5db;
}

.filament-library-json-tree-value {
color: #9ca3af;
}
.dark .filament-library-json-tree-value {
color: #9ca3af;
}
32 changes: 21 additions & 11 deletions src/Resources/views/infolists/components/previews/json-flashcards.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
$cards = is_array($data['cards'] ?? null) ? $data['cards'] : [];
@endphp

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

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

<div class="filament-library-flashcard">
<div class="filament-library-flashcard-front">
<span class="filament-library-flashcard-label">Front</span>
<div>{{ $front }}</div>
<div class="flex min-h-48 flex-col overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
<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">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
{{ __('Front') }}
</span>
<div class="mt-1 flex flex-1 items-start text-sm leading-relaxed text-gray-800 dark:text-gray-200">
{{ $front }}
</div>
</div>
<div class="filament-library-flashcard-back">
<span class="filament-library-flashcard-label">Back</span>
<div>{{ $back }}</div>
<div class="flex flex-1 flex-col p-4">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
{{ __('Back') }}
</span>
<div class="mt-1 flex flex-1 items-start text-sm leading-relaxed text-gray-800 dark:text-gray-200">
{{ $back }}
</div>
</div>
</div>
@empty
<p class="filament-library-json-empty">No flashcards found in this file.</p>
<p class="col-span-full text-sm text-gray-500 dark:text-gray-400">
{{ __('No flashcards found in this file.') }}
</p>
@endforelse
</div>
</div>
Loading