adds print styles for Data Appendix

Datawheel · Aug 7, 2020 · 3e9a2ee · 3e9a2ee
1 parent 6c7d3ab
commit 3e9a2ee
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/packages/cms/src/api/pdfRoute.js b/packages/cms/src/api/pdfRoute.js
@@ -5,17 +5,17 @@ const style = `
   .container {
     color: #444;
     font-family: 'Helvetica', 'Arial', sans-serif;
-    font-size: 8px;
+    font-size: 7px;
     text-align: center;
     width: 100%;
   }
   .pageNumber,
   .totalPages,
   .title {
-    font-size: 8px;
+    font-size: 7px;
   }
   .url {
-    font-size: 6px;
+    font-size: 5px;
   }
 </style>
 `;

diff --git a/packages/cms/src/components/Profile.css b/packages/cms/src/components/Profile.css
@@ -28,6 +28,9 @@
         flex: none;
       }
     }
+    & .cp-var-reset-button {
+      display: none;
+    }
   }
   & .cp-section-heading {
     margin: 0 0 var(--gutter-md);
@@ -66,7 +69,10 @@
     break-inside: avoid;
   }
   & .cp-viz-container {
-    margin-top: var(--gutter-lg);
+    margin-top: var(--gutter-md);
+    &.cp-table-viz-container {
+      margin: 0;
+    }
     & .cp-viz.header {
       position: relative;
     }
@@ -82,6 +88,19 @@
       }
     }
   }
+  & .rt-table {
+    @mixin font-xxs;
+    overflow: visible;
+    width: 100%;
+    & .cp-table-header-button, & .rt-td {
+      overflow: visible;
+      position: static;
+      white-space: normal;
+    }
+    & .rt-tbody {
+      max-height: none;
+    }
+  }
 }
 
 .cp.cp-print {

diff --git a/packages/cms/src/components/ProfileRenderer.jsx b/packages/cms/src/components/ProfileRenderer.jsx
@@ -256,10 +256,10 @@ class ProfileRenderer extends Component {
         profile_id: 1,
         selectors: [],
         short: "",
-        slug: "labels",
+        slug: "data-appendix",
         stats: [],
         subtitles: [],
-        title: "<p>Appendix</p>",
+        title: "<p>Data Appendix</p>",
         type: "Grouping",
         visualizations: []
       };
@@ -274,7 +274,7 @@ class ProfileRenderer extends Component {
           stats: [],
           subtitles: [],
           position: "default",
-          type: "Default",
+          type: "SingleColumn",
           configOverride: {type: "Table", showPagination: false, minRows: 0}
         }]);
       groupedSections.push([[groupingStubSection], ...printSections]);

diff --git a/packages/cms/src/components/Viz/Table.jsx b/packages/cms/src/components/Viz/Table.jsx
@@ -100,6 +100,7 @@ class Table extends Component {
   // render ungrouped column
   renderColumn = (obj, config) => {
     const {data, headerFormat, cellFormat} = config;
+    const {print} = this.context;
     const col = typeof obj === "string" ? obj : obj.key;
     const onClick = typeof obj === "object" ? obj.onClick : undefined;
     const title = headerFormat ? headerFormat(col) : col;
@@ -141,8 +142,8 @@ class Table extends Component {
       </button>,
       id: col,
       accessor: d => d[col],
-      minWidth,
-      maxWidth: minWidth < 100 ? minWidth : undefined,
+      minWidth: print ? undefined : minWidth,
+      maxWidth: minWidth < 100 && !print ? minWidth : undefined,
       Cell: cell => {
         const html = formatValue(cell, cell.value);
         return <span className={`cp-table-cell-inner cp-table-cell-inner-${onClick ? "clickable" : "static"}`} onClick={onClick ? onClick.bind(this, cell.original) : undefined} dangerouslySetInnerHTML={{__html: html}} />;
@@ -181,6 +182,8 @@ class Table extends Component {
       <div className="cp-table-wrapper" ref={this.viz}>
         {tableStructure.length
           ? <ReactTable
+            resizable={!print}
+            sortable={!print}
             loadingText={t("CMS.Table.Loading")}
             nextText={t("CMS.Table.Next")}
             noDataText={t("CMS.Table.No rows found")}
@@ -202,7 +205,8 @@ class Table extends Component {
 }
 
 Table.contextTypes = {
-  d3plus: PropTypes.object
+  d3plus: PropTypes.object,
+  print: PropTypes.bool
 };
 
 Table.defaultProps = {