FIX box shadows

old/fix-resume.js

@@ -20,7 +20,8 @@ const getResumeDOMElement = page => {
  * @return {HTMLElement}
  */
 const getPageDOMElement = () => {
-  return document.getElementsByTagName('page')[0];
+  console.dir(document.getElementsByClassName('page'));
+  return document.getElementsByClassName('page')[0];
 };
 
 /**
@@ -151,21 +152,12 @@ const fixBoxShadows = () => {
   });
 };
 
-/**
- * checks if the page contains a resume
- * @return {Boolean} true if page contains resume
- */
-const isResume = () => {
-  console.log(document.getElementsByTagName('page')[0]);
-  if (document.getElementsByTagName('page')[0]) return true;
-  else return false;
-};
-
 /**
  * checks whether font needs to be fixed, and if fixes it
  */
 const checkFont = () => {
   const page = getPageDOMElement();
+  console.dir(page);
   const resume = getResumeDOMElement(page);
   const fixFont = (resume, page) => {
     const elements = getAllDOMElements();
@@ -184,8 +176,6 @@ const checkFont = () => {
  * fixes resume
  */
 export const fixResume = () => {
-  console.log('aaaaaaaaaaaaaa');
-  if (!isResume()) return;
   checkFont();
   fixBoxShadows();
 };

package.json

@@ -13,6 +13,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "chrome-shadow-fixer": "0.0.12",
     "font-awesome": "^4.7.0",
     "material-design-icons": "^3.0.1",
     "material-icons": "^0.1.0",

src/App.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import './fix-resume';
 export default {
   name: 'app'
 };

src/pages/resume.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="page-wrapper">
-    <div class="page">
+<div class="page-wrapper">
+  <div class="page">
     <resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
   </div>
 </div>
@@ -8,20 +8,31 @@
 
 <script>
 import Vue from 'vue';
+// import '../fix-resume';
 import '../components/resume-material-dark.vue';
+// import {fixResume} from '../fix-resume';
+import {fix} from 'chrome-shadow-fixer';
 export default Vue.component('resume', {
-  name: 'app'
+  name: 'app',
+  created: () => {
+    console.log('created');
+  },
+  mounted: () => {
+    // fixResume();
+    console.dir(fix);
+    fix();
+  }
 });
 </script>
 
 <style scoped>
-.page-wrapper{
-    overflow-x: hidden;
-    background: #CCCCCC;
-    margin: 0;
-    padding: 0;
-    -webkit-print-color-adjust: exact;
-    box-sizing: border-box;
+.page-wrapper {
+  overflow-x: hidden;
+  background: #CCCCCC;
+  margin: 0;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+  box-sizing: border-box;
 }
 
 .resume {
@@ -33,7 +44,7 @@ export default Vue.component('resume', {
   background: white;
   position: relative;
   width: 21cm;
-  height: 29.7cm;
+  height: 29.68cm;
   display: block;
   page-break-after: auto;
   overflow: hidden;