Finish pdf maker.

css/main.css

@@ -52,6 +52,11 @@ table {
     page-break-before: always;
 }
 
+table tbody tr {
+    page-break-inside: avoid!important;
+    vertical-align: top;
+}
+
 table.table th,
 table.table td {
     padding: 0;
@@ -61,14 +66,11 @@ table.table td {
 table thead {
     display: table-header-group;
 }
+
 table.toc-table {
     width: 100%;
 }
 
-table.toc-table tbody tr {
-    page-break-inside: avoid;
-}
-
 table.toc-table .toc-section {
     padding: .4rem 1rem;
 }
@@ -98,7 +100,6 @@ table.toc-table .toc-content {
 
 .toc-container .columns.is-mobile {
     margin-bottom: .75rem;
-    page-break-inside: avoid;
 }
 
 .toc-container .column.is-11,
@@ -134,8 +135,7 @@ h2 {
     text-transform: uppercase;
     font-weight: 300;
     letter-spacing: 0.05rem;
-    page-break-before: always;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 h3.product-name {
@@ -149,10 +149,15 @@ h3.product-name {
 
 .us-container,
 .product-container {
-    page-break-inside: avoid;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
+.us-container,
+.foundations-container {
+    padding: 1rem;
+    text-align: center;
+
+}
 .product-container {
     background-color: #f5f5f5;
 }
@@ -160,7 +165,6 @@ h3.product-name {
 .us-body,
 .product-body {
     padding: 0 1rem;
-    text-align: justify;
 }
 
 .product-body p.product-short-desc {

example.js

@@ -9,8 +9,6 @@ const puppeteer = require('puppeteer');
       path: 'sample.pdf',
       height: '1450',
     });
-    // displayHeaderFooter: true,
-    // footerTemplate: '<div style="width:100%;font-size:11px!important;color:grey!important;text-align:right!important;padding-right:10px!important;" class="pdfheader"><span class="pageNumber"></span></div>',
-    // margin: {bottom: 35}
+    // displayHeaderFooter 
   await browser.close();
 })();

index.html

@@ -35,7 +35,7 @@
       </thead>
       <tbody>
         <tr><td>
-          <div>
+          <div class="us-container">
               <p>
                 Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar la belleza y cuidados personalizados de la piel, con base científica.
               </p>
@@ -48,7 +48,7 @@
           </div>
         </td></tr>
         <tr><td>
-            <div class="columns">
+            <div class="columns foundations-container">
               <div class="column">
                 <image src="images/pure.png" width="124"/>
                 <p>Principios activos seleccionados de máximo grado de pureza.</p>
@@ -58,7 +58,7 @@
                 <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns foundations-container">
               <div class="column">
                 <image src="images/science.png" width="124"/>
                 <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>

js/vademecum.js

@@ -346,7 +346,6 @@ const products = {
       "fullDesc": "Máscara activa. Ayuda a aumentar los mecanismos de defensa de la piel, aportando beneficios en tratamientos de rosácea, acné, cutis graso, manchas cutáneas y pieles desvitalizadas. Aporta ácidos grasos insaturados esenciales, disminuye la inflamación, ayuda a normalizar la piel",
       "application": "Aplicar con la piel limpia, luego de retirar Exfoliating Scrub, percibirá un suave picor durante un minuto al llegar a las zonas más profundas de la piel. Dejar actuar durante 20 minutos, observará al retirar una piel suave, limpia y fresca, aún en las instancias más sensibles. Puede combinarse en métodos sinérgicos con Micropeeling o Peeling Biorregulador",
       "actives": [
-        "Acido Linoleico",
         "Acido Linolénico",
         "Avena Sativa",
         "Malva",
@@ -1193,7 +1192,7 @@ const Product = (product, key) => (
         product.actives &&
           Section(
             'Activos',
-            product.actives.map((a, i) => Tag(a, i, 'is-active')),
+            product.actives.join(', '),
             product.ph && Tag(`PH ${product.ph}`, null, 'is-ph')
           )
       }
@@ -1202,14 +1201,27 @@ const Product = (product, key) => (
 );
 
 const Category = (categoryName, products) => (
-  <div className="category-container">
-    <div className="category" id={mkCategoryTag(categoryName)}>
-      <h2 className="category-name">{categoryName}</h2>
-    </div>
-    {
-      products.map((p, i) => Product(p, i))
-    }
-  </div>
+  <table className="category-container table is-fullwidth">
+    <thead className="category" id={mkCategoryTag(categoryName)}>
+      <tr>
+        <th>
+          <h2 className="category-name">{categoryName}</h2>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        products.map((p, i) => (
+          <tr><td>
+            { Product(p, i) }
+          </td></tr>
+        ))
+      }
+    </tbody>
+    <tfoot><tr><td>
+      <div class="footer-space" height="20px">&nbsp;</div>
+    </td></tr></tfoot>
+  </table>
 );
 
 const ToC = () => (
@@ -1238,30 +1250,7 @@ const ToC = () => (
   </table>
 )
 
-{/* <div className="table-of-content container">
-  <h2>Indice</h2>
-  <div className="toc-container">
-    {
-      categories.map((categoryName, i) => (
-        <div className="columns is-mobile">
-          <div className="column is-11">
-            <a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a>
-            {
-              products[categoryName].map(product => (
-                <div className='toc-content'>
-                  { product.name }
-                </div>
-              ))
-            }
-          </div>
-          <div className="column is-1">
-            { i }
-          </div>
-        </div>
-      ))
-    }
-  </div>
-</div> */}
+
 const Vademecum = () => {
   return categories.map((categoryName, i) => (
     <div key={i}>

lib/vademecum.js

@@ -221,7 +221,7 @@ var products = {
     "shortDesc": "Los ácidos Linoleico y Linolénico, aportan mayor protección a las células de Langerhans, mejorando notablemente la protección de la piel",
     "fullDesc": "Máscara activa. Ayuda a aumentar los mecanismos de defensa de la piel, aportando beneficios en tratamientos de rosácea, acné, cutis graso, manchas cutáneas y pieles desvitalizadas. Aporta ácidos grasos insaturados esenciales, disminuye la inflamación, ayuda a normalizar la piel",
     "application": "Aplicar con la piel limpia, luego de retirar Exfoliating Scrub, percibirá un suave picor durante un minuto al llegar a las zonas más profundas de la piel. Dejar actuar durante 20 minutos, observará al retirar una piel suave, limpia y fresca, aún en las instancias más sensibles. Puede combinarse en métodos sinérgicos con Micropeeling o Peeling Biorregulador",
-    "actives": ["Acido Linoleico", "Acido Linolénico", "Avena Sativa", "Malva", "Matricaria Chamomilla"],
+    "actives": ["Acido Linolénico", "Avena Sativa", "Malva", "Matricaria Chamomilla"],
     "ph": "5,5",
     "variants": [{
       "code": 2009,
@@ -752,22 +752,23 @@ var Product = function Product(product, key) {
     className: "product-body"
   }, dom("p", {
     className: "product-short-desc"
-  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('Activos', product.actives.map(function (a, i) {
-    return Tag(a, i, 'is-active');
-  }), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))));
+  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('Activos', product.actives.join(', '), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))));
 };
 
 var Category = function Category(categoryName, products) {
-  return dom("div", {
-    className: "category-container"
-  }, dom("div", {
+  return dom("table", {
+    className: "category-container table is-fullwidth"
+  }, dom("thead", {
     className: "category",
     id: mkCategoryTag(categoryName)
-  }, dom("h2", {
+  }, dom("tr", null, dom("th", null, dom("h2", {
     className: "category-name"
-  }, categoryName)), products.map(function (p, i) {
-    return Product(p, i);
-  }));
+  }, categoryName)))), dom("tbody", null, products.map(function (p, i) {
+    return dom("tr", null, dom("td", null, Product(p, i)));
+  })), dom("tfoot", null, dom("tr", null, dom("td", null, dom("div", {
+    class: "footer-space",
+    height: "20px"
+  }, "\xA0")))));
 };
 
 var ToC = function ToC() {
@@ -787,33 +788,6 @@ var ToC = function ToC() {
   })));
 };
 
-{
-  /* <div className="table-of-content container">
-   <h2>Indice</h2>
-   <div className="toc-container">
-     {
-       categories.map((categoryName, i) => (
-         <div className="columns is-mobile">
-           <div className="column is-11">
-             <a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a>
-             {
-               products[categoryName].map(product => (
-                 <div className='toc-content'>
-                   { product.name }
-                 </div>
-               ))
-             }
-           </div>
-           <div className="column is-1">
-             { i }
-           </div>
-         </div>
-       ))
-     }
-   </div>
-  </div> */
-}
-
 var Vademecum = function Vademecum() {
   return categories.map(function (categoryName, i) {
     return dom("div", {
@@ -823,4 +797,4 @@ var Vademecum = function Vademecum() {
 };
 
 var domContainer = document.querySelector('#vademecum');
-ReactDOM.render(dom("div", null, ToC(), Vademecum()), domContainer);
+ReactDOM.render(dom("div", null, ToC(), Vademecum()), domContainer);

package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "start": "./node_modules/.bin/babel js/vademecum.js --watch --out-file lib/vademecum.js",
     "build": "./node_modules/.bin/babel js/vademecum.js --out-dir lib",
-    "pdf": "node example.js"
+    "pdf": "npm run build && node example.js"
   },
   "repository": {
     "type": "git",