cleanup

app/Filament/Resources/TicketResource/Pages/ViewTicket.php

@@ -4,8 +4,8 @@
 
 namespace App\Filament\Resources\TicketResource\Pages;
 
-use App\Filament\Resources\InterventionResource\Actions\ToggleStatusAction;
 use App\Filament\Resources\TicketResource;
+use App\Filament\Resources\TicketResource\Actions\ToggleStatusAction;
 use Filament\Resources\Pages\ViewRecord;
 
 class ViewTicket extends ViewRecord

app/Models/User.php

@@ -36,7 +36,7 @@ class User extends Authenticatable implements FilamentUser
         'phone',
         'organization_id',
         'source_of_information',
-        'created_by'
+        'created_by',
     ];
 
     /**

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
     plugins: {
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },

resources/css/app.css

@@ -1,2 +1,3 @@
 @import '../../vendor/filament/filament/resources/css/app.css';
+@import './tiptap.css';
 @import "./typography.css";

resources/css/tiptap.css

@@ -0,0 +1,256 @@
+.prose {
+    .filament-tiptap-hurdle {
+        width: 100%;
+        max-width: 100vw;
+        padding-block: 1rem;
+        background-color: theme('colors.gray.100');
+        position: relative;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 100%;
+            top: 0;
+            bottom: 0;
+            background-color: inherit;
+        }
+
+        &::before {
+            left: -100%;
+        }
+
+        &::after {
+            right: -100%;
+        }
+
+        &[data-color="gray_light"] {
+            color: theme('colors.gray.900');
+            background-color: theme('colors.gray.300');
+        }
+
+        &[data-color="gray"] {
+            color: white;
+            background-color: theme('colors.gray.500');
+        }
+
+        &[data-color="gray_dark"] {
+            color: white;
+            background-color: theme('colors.gray.800');
+        }
+
+        &[data-color="primary"] {
+            color: theme('colors.gray.900');
+            background-color: theme('colors.primary.500');
+        }
+
+        &[data-color="secondary"] {
+            color: theme('colors.gray.900');
+            background-color: theme('colors.warning.500');
+        }
+
+        &[data-color="tertiary"] {
+            color: white;
+            background-color: theme('colors.success.500');
+        }
+
+        &[data-color="accent"] {
+            color: white;
+            background-color: theme('colors.danger.500');
+        }
+    }
+
+    .filament-tiptap-grid,
+    .filament-tiptap-grid-builder {
+        display: grid;
+        gap: 1rem;
+        box-sizing: border-box;
+
+        .filament-tiptap-grid__column,
+        .filament-tiptap-grid-builder__column {
+            box-sizing: border-box;
+            border-style: dashed;
+            border-width: 1px;
+            border-color: theme("colors.gray.400");
+            padding: 0.5rem;
+            border-radius: theme("borderRadius.DEFAULT");
+
+            > * + * {
+                margin-block-start: 1rem;
+            }
+        }
+
+        &.ProseMirror-selectednode {
+            border-radius: theme("borderRadius.DEFAULT");
+            outline-offset: 2px;
+            outline: theme("colors.gray.900") dashed 2px;
+        }
+    }
+
+    .filament-tiptap-grid[type^="asymetric"] {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+
+    @media (max-width: theme('screens.sm')) {
+        .filament-tiptap-grid-builder[data-stack-at="sm"] {
+            grid-template-columns: 1fr !important;
+
+            .filament-tiptap-grid-builder__column {
+                grid-column: span 1 !important;
+            }
+        }
+    }
+
+    @media (max-width: theme('screens.md')) {
+        .filament-tiptap-grid-builder[data-stack-at="md"] {
+            grid-template-columns: 1fr !important;
+
+            .filament-tiptap-grid-builder__column {
+                grid-column: span 1 !important;
+            }
+        }
+    }
+
+    @media (max-width: theme('screens.lg')) {
+        .filament-tiptap-grid-builder[data-stack-at="lg"] {
+            grid-template-columns: 1fr !important;
+
+            .filament-tiptap-grid-builder__column {
+                grid-column: span 1 !important;
+            }
+        }
+    }
+
+    .filament-tiptap-grid[type="asymetric-right-thirds"] {
+        @screen md {
+            grid-template-columns: 1fr 2fr;
+        }
+    }
+
+    .filament-tiptap-grid[type="asymetric-left-thirds"] {
+        @screen md {
+            grid-template-columns: 2fr 1fr;
+        }
+    }
+
+    .filament-tiptap-grid[type="asymetric-right-fourths"] {
+        @screen md {
+            grid-template-columns: 1fr 3fr;
+        }
+    }
+
+    .filament-tiptap-grid[type="asymetric-left-fourths"] {
+        @screen md {
+            grid-template-columns: 3fr 1fr;
+        }
+    }
+
+    .filament-tiptap-grid[type="responsive"] {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+
+        &[cols="2"] {
+            @screen md {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        &[cols="3"] {
+            @screen md {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        &[cols="4"] {
+            @screen md {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            @screen lg {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
+
+        &[cols="5"] {
+            @screen md {
+                grid-template-columns: repeat(5, 1fr);
+            }
+        }
+    }
+
+    .filament-tiptap-grid[type="fixed"] {
+        &[cols="2"] {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        &[cols="3"] {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        &[cols="4"] {
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        &[cols="5"] {
+            grid-template-columns: repeat(5, 1fr);
+        }
+    }
+
+    [data-youtube-video],
+    [data-vimeo-video],
+    [data-native-video] {
+        border: dashed 1px transparent;
+
+        &.ProseMirror-selectednode {
+            border-radius: theme("borderRadius.DEFAULT");
+            outline-offset: 2px;
+            outline: theme("colors.gray.900") dashed 2px;
+        }
+
+        iframe,
+        video {
+            pointer-events: none;
+        }
+    }
+
+    div[data-type="details"] {
+        box-sizing: border-box;
+        border-style: dashed;
+        border-width: 1px;
+        border-color: theme("colors.gray.400");
+        border-radius: theme("borderRadius.DEFAULT");
+        position: relative;
+
+        button {
+            position: absolute;
+            z-index: 1;
+            top: 0.125rem;
+            right: 0.25rem;
+            color: theme("colors.gray.400");
+        }
+
+        summary {
+            padding: 0.375rem 0.5rem;
+            font-weight: 700;
+            border-bottom-style: solid;
+            border-bottom-width: 1px;
+            border-bottom-color: theme("colors.gray.200");
+
+            &::marker {
+                content: "";
+                display: none;
+            }
+        }
+
+        div[data-type="details-content"] {
+            padding: 0.5rem;
+            height: auto;
+
+            > * + * {
+                margin-block-start: 1rem;
+            }
+        }
+    }
+}