Sfoglia il codice sorgente

Add arrows to ToC links

Tatiana Inama 7 anni fa
parent
commit
60618423b2
7 ha cambiato i file con 19 aggiunte e 6 eliminazioni
  1. 8 3
      css/main.css
  2. BIN
      images/arrow.png
  3. 1 0
      images/arrow.svg
  4. 5 1
      js/vademecum.js
  5. 4 1
      lib/vademecum.js
  6. 1 1
      pdf-maker.js
  7. BIN
      vademecum-mobile.pdf

+ 8 - 3
css/main.css

@@ -68,16 +68,21 @@ table thead {
     display: table-header-group;
 }
 
-
+.toc-goto {
+    position: relative;
+    width: 10px;
+    left: 10px;
+}
 table.toc-table .toc-section {
     padding: .4rem 1rem;
+    text-align: center;
 }
 
 table.toc-table .toc-section a {
     font-weight: 600;
     text-transform: uppercase;
     color: rgba(24, 40, 72, 0.8);
-    font-size: 1.3rem;
+    font-size: 1.5rem;
 }
 
 table.toc-table .toc-content {
@@ -85,7 +90,7 @@ table.toc-table .toc-content {
     color: hsl(0, 0%, 33%);
     letter-spacing: 0.02rem;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: .8rem;
     padding-left: 1rem;
     line-height: 1rem;
 }

BIN
images/arrow.png


File diff suppressed because it is too large
+ 1 - 0
images/arrow.svg


+ 5 - 1
js/vademecum.js

@@ -1234,7 +1234,11 @@ const ToC = () => (
       categories.map((categoryName, i) => (
         <tr><td>
           <div className='toc-section'>
-            <div><a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a></div>
+            <div>
+              <a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName} 
+                <img src="images/arrow.png" className="toc-goto"/>
+              </a>
+            </div>
             {
               products[categoryName].map(product => (
                 <div className='toc-content'>

+ 4 - 1
lib/vademecum.js

@@ -780,7 +780,10 @@ var ToC = function ToC() {
     }, dom("div", null, dom("a", {
       href: "#".concat(mkCategoryTag(categoryName)),
       className: "toc-title"
-    }, categoryName)), products[categoryName].map(function (product) {
+    }, categoryName, dom("img", {
+      src: "images/arrow.png",
+      className: "toc-goto"
+    }))), products[categoryName].map(function (product) {
       return dom("div", {
         className: "toc-content"
       }, product.name);

+ 1 - 1
pdf-maker.js

@@ -6,7 +6,7 @@ const puppeteer = require('puppeteer');
   await page.goto('http://localhost:5500/', {waitUntil: 'networkidle2'});
   //await page.emulateMedia('screen');
   await page.pdf({
-      path: 'vademecum-mobile.pdf',
+      path: 'pdf/vademecum-profesional-mobile.pdf',
       height: '1450',
     });
     // displayHeaderFooter 

BIN
vademecum-mobile.pdf