passando botão de download para uma barra inferior

Author: bernardoazevedo

resources/views/components/color-input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) type="color" {{ $attributes->merge(['class' => 'float-right rounded-md p-1 w-full h-10 cursor-pointer border border-gray-200 bg-white']) }}>
+<input @disabled($disabled) type="color" {{ $attributes->merge(['class' => 'float-right rounded p-1 w-full h-10 cursor-pointer border border-gray-200 bg-white']) }}>

resources/views/components/primary-button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

resources/views/components/section.blade.php

@@ -1,3 +1,3 @@
-<section {{ $attributes->merge(['class' => 'shadow divide-y-2 bg-white']) }}>
+<section {{ $attributes->merge(['class' => 'shadow divide-y-2 bg-white rounded']) }}>
     {{ $slot }}
 </section>

resources/views/components/text-input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm']) }}>
+<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded shadow-sm']) }}>

resources/views/content/partials/parsed-content.blade.php

@@ -1,7 +1,7 @@
 <x-section class="col-span-5 order-2 lg:col-span-2 lg:order-3 flex flex-col">
     <header class="text-lg font-medium px-4 py-2">Preview Content</header>
 
-    <div id="htmlText" class="parsedown flex flex-col gap-y-2 sm:w-auto p-4 h-max grow">
+    <div id="htmlText" class="parsedown flex flex-col gap-y-2 sm:w-auto p-4 h-max grow rounded-b">
         Formatted content will appear here
     </div>
 </x-section>

resources/views/content/partials/style-editor.blade.php

@@ -15,12 +15,4 @@
             <x-color-input name="backgroundColor" id="backgroundColor" value="#FFFFFF"></x-color-input>
         </div>
     </div>
-
-    <div class="flex gap-3 flex-wrap sm:w-auto p-4">
-        <div class="flex flex-col flex-grow">
-            <x-input-label for="filename">Filename</x-input-label>
-            <x-text-input name="filename" id="filename" class="w-full"></x-text-input>
-        </div>
-        <x-primary-button class="max-w-fit">Generate PDF</x-primary-button>
-    </div>
 </x-section>

resources/views/content/partials/write-content.blade.php

@@ -3,7 +3,7 @@
 
     <div class="grow-wrap dont-break-out">
         <textarea id="text" name="text" type="text" rows="27" cols=""
-            class="p-4 border-none focus:border-gray-400 focus:ring-gray-400 block w-full"
+            class="p-4 border-none focus:border-gray-400 focus:ring-gray-400 block w-full rounded-b"
             required autofocus autocomplete="text" placeholder="Type here"
             onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
     </div>

resources/views/editor.blade.php

@@ -1,12 +1,9 @@
 <x-app-layout>
     <div class="mx-auto space-y-6 py-4">
-        <form action="/generatePdf" method="post">
-            @csrf
-            <div class="grid gap-4 grid-cols-5">
-                @include('content.partials.style-editor')
-                @include('content.partials.write-content')
-                @include('content.partials.parsed-content')
-            </div>
-        </form>
+        <div class="grid gap-4 grid-cols-5">
+            @include('content.partials.style-editor')
+            @include('content.partials.write-content')
+            @include('content.partials.parsed-content')
+        </div>
     </div>
 </x-app-layout>

resources/views/layouts/app.blade.php

@@ -18,7 +18,7 @@
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100">
+        <div class="min-h-screen bg-gray-100 mb-16">
 
             @include('layouts.navigation')
 
@@ -31,10 +31,16 @@
                 </header>
             @endisset
 
-            <!-- Page Content -->
-            <main>
-                {{ $slot }}
-            </main>
+            <form action="/generatePdf" method="post">
+                @csrf
+
+                <!-- Page Content -->
+                <main>
+                    {{ $slot }}
+                </main>
+
+                @include('layouts.footer')
+            </form>
         </div>
     </body>
 

resources/views/layouts/footer.blade.php

@@ -0,0 +1,7 @@
+<footer class="bg-white border-t border-gray-200 shadow fixed bottom-0 w-full">
+    <div class="flex gap-2 flex-wrap sm:w-auto p-3 justify-center">
+        <x-text-input name="filename" id="filename" placeholder="Filename" class="grow max-w-md h-10"></x-text-input>
+
+        <x-primary-button class="max-w-fit h-10">Generate PDF</x-primary-button>
+    </div>
+</footer>