adicionando edição de margem entre elementos

Author: bernardoazevedo

app/Http/Controllers/ContentController.php

@@ -36,6 +36,7 @@ public function generatePdf(Request $request){
         $filename = $nameInfo['filename'].'.'.$nameInfo['extension'];
 
         $cssVariables = [
+            '--marginHeight' => $request->marginHeight.'px',
             '--titleMargin' => $request->titleMargin.'px',
         ];
         $cssColors = [
@@ -48,7 +49,7 @@ public function generatePdf(Request $request){
 
         $htmlText = $this->markdownToHtml($rawText);
 
-        $rawCss = Storage::disk('public')->get('app.css');
+        $rawCss = Storage::disk('public')->get('pdf.css');
 
         $parsedCss = $this->parseCssVariables($rawCss, $cssVariables);
 

public/assets/css/app.css

@@ -11,7 +11,7 @@
     --backgroundColor0: hsl(from var(--backgroundColor) h s calc(l - 10));
     --backgroundColor1: hsl(from var(--backgroundColor) h s calc(l - 20));
 
-    --titleMargin: 8px;
+    --marginHeight: 8px;
 }
 
 #htmlText {
@@ -27,41 +27,43 @@
 .parsedown h1 {
     font-size: 34px;
     font-weight: bold;
-    margin-top: var(--titleMargin);
+    margin-top: var(--titleMargin) !important;
 }
 
 .parsedown h2 {
     font-size: 24px;
     font-weight: bold;
-    margin-top: var(--titleMargin);
+    margin-top: var(--titleMargin) !important;
 }
 
 .parsedown h3 {
     font-size: 20px;
     font-weight: bold;
-    margin-top: var(--titleMargin);
+    margin-top: var(--titleMargin) !important;
 }
 
 .parsedown h4 {
     font-size: 18px;
     font-weight: bold;
-    margin-top: var(--titleMargin);
+    margin-top: var(--titleMargin) !important;
 }
 
 .parsedown h5 {
     font-size: 16px;
     font-weight: bold;
-    margin-top: var(--titleMargin);
+    margin-top: var(--titleMargin) !important;
 }
 
 .parsedown ul {
     list-style-type: circle;
     list-style-position: inside;
+    margin-top: var(--marginHeight) !important;
 }
 
 .parsedown ol {
     list-style-type: decimal;
     list-style-position: inside;
+    margin-top: var(--marginHeight) !important;
 }
 
 .parsedown a {
@@ -83,6 +85,7 @@
     margin: 4px 0px 16px 0px;
     text-wrap: wrap;
     overflow-wrap: break-word;
+    margin-top: var(--marginHeight) !important;
 }
 
 .parsedown code {
@@ -121,6 +124,7 @@ table {
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
+    margin-top: var(--marginHeight) !important;
 }
 
 th,
@@ -135,7 +139,6 @@ th {
 
 blockquote {
     font-size: 16px;
-    margin: 16px auto;
     font-style: italic;
     color: var(--textColor);
     padding: 16px;
@@ -145,6 +148,7 @@ blockquote {
     line-height: 1.6;
     position: relative;
     background: var(--backgroundColor0);
+    margin-top: var(--marginHeight) !important;
 }
 
 

public/assets/js/script.js

@@ -42,7 +42,12 @@ $(document).ready(function(){
     });
 
     $('#titleMargin').on('change', function(){
-        let newMargin = $(this).val();
-        root.style.setProperty('--titleMargin', newMargin+'px');
+        let newTitleMargin = $(this).val();
+        root.style.setProperty('--titleMargin', newTitleMargin+'px');
+    });
+
+    $('#marginHeight').on('change', function(){
+        let newMarginHeight = $(this).val();
+        root.style.setProperty('--marginHeight', newMarginHeight+'px');
     });
 });

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

@@ -18,5 +18,9 @@
             <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 class="flex flex-col flex-grow">
+            <x-input-label for="marginHeight" class="truncate">Margin Between Elements</x-input-label>
+            <x-text-input name="marginHeight" id="marginHeight" placeholder="4px" type="number"></x-text-input>
+        </div>
     </div>
 </x-section>

storage/app/public/app.css storage/app/public/pdf.cssstorage/app/public/app.css renamed to storage/app/public/pdf.css

@@ -39,11 +39,13 @@ h5 {
 ul {
     list-style-type: circle;
     list-style-position: inside;
+    margin-top: var(--marginHeight);
 }
 
 ol {
     list-style-type: decimal;
     list-style-position: inside;
+    margin-top: var(--marginHeight);
 }
 
 a {
@@ -65,6 +67,7 @@ pre {
     margin: 4px 0px 16px 0px;
     text-wrap: wrap;
     overflow-wrap: break-word;
+    margin-top: var(--marginHeight);
 }
 
 code {
@@ -81,6 +84,7 @@ table {
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
+    margin-top: var(--marginHeight);
 }
 
 th,
@@ -105,4 +109,5 @@ blockquote {
     line-height: 1.6;
     position: relative;
     background: var(--backgroundColor0);
+    margin-top: var(--marginHeight);
 }