add styling locale select & add basic template without styling (#6)

* add styling locale select & add basic template without styling * small optimalisation
codedor · Dec 7, 2023 · c65cb56 · c65cb56
1 parent 68ed67b
commit c65cb56
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 7 deletions.
diff --git a/resources/views/filament/pages/preview.blade.php b/resources/views/filament/pages/preview.blade.php
@@ -1,12 +1,14 @@
 <x-filament::page>
     {{ $record->description }}
 
-    <div class="w-full">
-        <select wire:model.live="currentLocale">
-            @foreach ($locales as $locale)
-                <option value="{{ $locale }}">{{ $locale }}</option>
-            @endforeach
-        </select>
+    <div class="w-full flex">
+        <x-filament::input.wrapper>
+            <x-filament::input.select  wire:model.live="currentLocale">
+                @foreach ($locales as $locale)
+                    <option value="{{ $locale }}">{{ $locale }}</option>
+                @endforeach
+            </x-filament::input.select>
+        </x-filament::input.wrapper>
     </div>
 
     <div class="mt-4 w-full border border-lg bg-white" x-data="{

diff --git a/resources/views/mail/template.blade.php b/resources/views/mail/template.blade.php
@@ -5,9 +5,128 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <meta name="color-scheme" content="light">
         <meta name="supported-color-schemes" content="light">
+
+        <style>
+            @media only screen and (max-width: 600px) {
+                .inner-body {
+                    width: 100% !important;
+                }
+
+                .footer {
+                    width: 100% !important;
+                }
+            }
+
+            /* Base */
+            body {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+
+                hyphens: auto;
+                -moz-hyphens: auto;
+                -ms-word-break: break-all;
+                -webkit-hyphens: auto;
+                -webkit-text-size-adjust: none;
+                word-break: break-all;
+                word-break: break-word;
+            }
+
+            .wrapper,
+            .content {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+
+                -premailer-cellpadding: 0;
+                -premailer-cellspacing: 0;
+                -premailer-width: 100%;
+            }
+
+            /* Body */
+            .inner-body {
+                margin: 0 auto;
+                padding: 0;
+                width: 570px;
+
+                -premailer-cellpadding: 0;
+                -premailer-cellspacing: 0;
+                -premailer-width: 570px;
+            }
+        </style>
     </head>
 
     <body>
-        {{ $body }}
+        <table
+            class="wrapper"
+            width="100%"
+            cellpadding="0"
+            cellspacing="0"
+            role="presentation"
+        >
+            <tr>
+                <td align="center">
+                    <table
+                        class="content"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        role="presentation"
+                    >
+                        <tr>
+                            <td>
+                                <div class="inner-body">
+                                    <!-- Header -->
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td
+                                class="content"
+                                width="100%"
+                                cellpadding="0"
+                                cellspacing="0"
+                            >
+                                <table
+                                    class="inner-body"
+                                    align="center"
+                                    width="640"
+                                    cellpadding="0"
+                                    cellspacing="0"
+                                    role="presentation"
+                                >
+                                    <!-- Body content -->
+                                    <tr>
+                                        <td class="content-cell">
+                                            {{ $body }}
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <table
+                                    class="footer"
+                                    align="center"
+                                    width="570"
+                                    cellpadding="0"
+                                    cellspacing="0"
+                                    role="presentation"
+                                >
+                                    <tr>
+                                        <td align="center">
+                                            <div class="inner-body">
+                                                <!-- Footer -->
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
     </body>
 </html>