adicionando input para tamanho da margem dos títulos

Author: bernardoazevedo

app/Http/Controllers/ContentController.php

@@ -35,18 +35,22 @@ public function generatePdf(Request $request){
         }
         $filename = $nameInfo['filename'].'.'.$nameInfo['extension'];
 
+        $cssVariables = [
+            '--titleMargin' => $request->titleMargin.'px',
+        ];
         $cssColors = [
             '--textColor' => $request->textColor,
             '--highlightColor' => $request->highlightColor,
             '--backgroundColor' => $request->backgroundColor,
         ];
         $cssColors = $colorService->generateDarkerColors($cssColors, 2);
+        $cssVariables = array_merge($cssVariables, $cssColors);
 
         $htmlText = $this->markdownToHtml($rawText);
 
         $rawCss = Storage::disk('public')->get('app.css');
 
-        $parsedCss = $this->parseCssVariables($rawCss, $cssColors);
+        $parsedCss = $this->parseCssVariables($rawCss, $cssVariables);
 
         $css = '<style>'. $parsedCss .'</style>';
 

public/assets/css/app.css

@@ -10,6 +10,8 @@
     --backgroundColor: #FFFFFF;
     --backgroundColor0: hsl(from var(--backgroundColor) h s calc(l - 10));
     --backgroundColor1: hsl(from var(--backgroundColor) h s calc(l - 20));
+
+    --titleMargin: 8px;
 }
 
 #htmlText {
@@ -25,31 +27,31 @@
 .parsedown h1 {
     font-size: 34px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 .parsedown h2 {
     font-size: 24px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 .parsedown h3 {
     font-size: 20px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 .parsedown h4 {
     font-size: 18px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 .parsedown h5 {
     font-size: 16px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 .parsedown ul {

public/assets/js/script.js

@@ -40,4 +40,9 @@ $(document).ready(function(){
         let newColor = $(this).val();
         root.style.setProperty('--backgroundColor', newColor);
     });
+
+    $('#titleMargin').on('change', function(){
+        let newMargin = $(this).val();
+        root.style.setProperty('--titleMargin', newMargin+'px');
+    });
 });

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 p-1 w-full h-10 cursor-pointer border border-gray-200 bg-white']) }}>
+<input @disabled($disabled) type="color" {{ $attributes->merge(['class' => 'rounded p-1 w-full h-10 cursor-pointer border border-gray-200 bg-white shadow-sm']) }}>

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

@@ -14,5 +14,9 @@
             <x-color-input-label for="backgroundColor" class="truncate">Background Color</x-color-input-label>
             <x-color-input name="backgroundColor" id="backgroundColor" value="#FFFFFF"></x-color-input>
         </div>
+        <div class="flex flex-col flex-grow">
+            <x-input-label for="titleMargin" class="truncate">Title Margin</x-input-label>
+            <x-text-input name="titleMargin" id="titleMargin" placeholder="4px" type="number"></x-text-input>
+        </div>
     </div>
 </x-section>

storage/app/public/app.css

@@ -9,31 +9,31 @@ body {
 h1 {
     font-size: 34px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 h2 {
     font-size: 24px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 h3 {
     font-size: 20px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 h4 {
     font-size: 18px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 h5 {
     font-size: 16px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: var(--titleMargin);
 }
 
 ul {