ADD /

src/App.vue

@@ -1,9 +1,7 @@
 <template>
-  <div id="app">
-      <div class="page">
-        <router-view></router-view>
-      </div>
-  </div>
+<div id="app">
+  <router-view></router-view>
+</div>
 </template>
 
 <script>
@@ -14,34 +12,13 @@ export default {
 </script>
 
 <style>
-
 @import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
 @import '../node_modules/font-awesome/css/font-awesome.css';
 @import '../node_modules/material-design-icons/iconfont/material-icons.css';
-#app {
-    overflow-x: hidden;
-    background: #CCCCCC;
-    margin: 0;
-    padding: 0;
-    -webkit-print-color-adjust: exact;
-    box-sizing: border-box;
-}
-.resume{
-  height: 100%;
-  width: 100%;
-}
-.page {
-    background: white;
-    position: relative;
-    width: 21cm;
-    height: 29.7cm;
-    display: block;
-    page-break-after: auto;
-    overflow: hidden;
-}
-body{
-    padding: 0;
-    margin: 0;
-    overflow-x: hidden;
+
+body {
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
 }
 </style>

src/pages/home.vue

@@ -0,0 +1,53 @@
+<template>
+<div class="home">
+  <a href="https://github.com/salomonelli/best-resume-ever" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+  <h3 class="title">best-resume-ever</h3>
+  <div class="previews">
+    <div class="preview">
+      <router-link v-bind:to="'/resume/material-dark'">
+        <img src="../assets/preview/resume-material-dark.png" />
+        <span>material-dark</span>
+      </router-link>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+export default Vue.component('resume', {
+  name: 'app'
+});
+</script>
+
+<style scoped>
+.home {
+  font-family: 'Roboto' !important;
+}
+
+.title {
+  font-weight: normal;
+  text-align: center;
+  width: 100%;
+}
+
+.previews{
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.preview{
+  width: 200px;
+}
+
+.preview img{
+  width: 100%;
+}
+
+.preview span{
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+}
+</style>

src/pages/resume.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
+  <div class="page-wrapper">
+    <div class="page">
     <resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
   </div>
+</div>
 </template>
 
 <script>
@@ -11,3 +13,29 @@ export default Vue.component('resume', {
   name: 'app'
 });
 </script>
+
+<style scoped>
+.page-wrapper{
+    overflow-x: hidden;
+    background: #CCCCCC;
+    margin: 0;
+    padding: 0;
+    -webkit-print-color-adjust: exact;
+    box-sizing: border-box;
+}
+
+.resume {
+  height: 100%;
+  width: 100%;
+}
+
+.page {
+  background: white;
+  position: relative;
+  width: 21cm;
+  height: 29.7cm;
+  display: block;
+  page-break-after: auto;
+  overflow: hidden;
+}
+</style>

src/router/index.js

@@ -1,16 +1,16 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import ResumeMaterialDark from '@/components/resume-material-dark';
 import Resume from '@/pages/resume';
+import Home from '@/pages/home';
 
 Vue.use(Router);
 
 export default new Router({
   routes: [
     {
-      path: '/resume-material-dark',
-      name: 'resume-material-dark',
-      component: ResumeMaterialDark
+      path: '/',
+      name: 'home',
+      component: Home
     },
     {
       path: '/resume/:resumeid',

static/javascript.js

@@ -1,196 +0,0 @@
-/**
- * gets all DOM-elements on page
- * @return {HTMLElement[]} DOM-elements
- */
-const getAllDOMElements = () => {
-  return document.getElementsByTagName('*');
-};
-
-/**
- * gets DOM-element of #resumeX
- * @param {HTMLElement} page
- * @return {HTMLElement}
- */
-const getResumeDOMElement = page => {
-  return page.children[0];
-};
-
-/**
- * returns DOM-element of <page></page>
- * @return {HTMLElement}
- */
-const getPageDOMElement = () => {
-  return document.getElementsByTagName('page')[0];
-};
-
-/**
- * checks whether auto-font adjustment is enabled for resume
- * @param  {HTMLElement} resume
- * @return {boolean}
- */
-const autoFontEnabled = resume => {
-  return resume.hasAttribute('autofont');
-};
-
-/**
- * checks whether content is greater than page
- * @param  {HTMLElement} resume
- * @param  {HTMLElement} page
- * @return {boolean}        false if content fits to page
- */
-const contentIsGreaterThanPage = (resume, page) => {
-  const pageHeight = page.offsetHeight;
-  const resumeHeight = resume.offsetHeight;
-  if (pageHeight < resumeHeight) return true;
-  else return false;
-};
-
-/**
- * gets font size of DOM-elemnt
- * @param  {HTMLElement} element
- * @return {number}         font size of element
- */
-const getFontSizeOfElement = element => {
-  const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
-  return parseFloat(style);
-};
-
-/**
- * calculates new font size of all DOM-elements
- * @param {HTMLElement[]}
- */
-const calcNewFontSizes = elements => {
-  return elements
-    .map(el => getFontSizeOfElement(el) * 0.99);
-};
-
-/**
- * checks if DOM-element has box-shadow
- * @param  {HTMLElement}  element
- * @return {string} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
- */
-const hasBoxShadow = element => {
-  const style = window
-    .getComputedStyle(element, null)
-    .getPropertyValue('box-shadow');
-  if (style !== 'none') return style;
-  else return '';
-};
-
-/**
- * gets absolute position of element
- * @param  {HTMLElement} element
- * @return {{}}
- */
-const getAbsolutePositionOfElement = element => {
-  return {
-    top: element.getBoundingClientRect().top,
-    left: element.getBoundingClientRect().left
-  };
-};
-
-/**
- * gets border radius of element
- * @param  {HTMLElement} element
- * @return {string}         e.g. '50%'
- */
-const getBorderRadiusOfElement = element => {
-  return window
-    .getComputedStyle(element, null)
-    .getPropertyValue('border-radius');
-};
-
-/**
- * adds new box shadow
- * @param {HTMLElement} element
- * @param {{}} position  e.g. { left: 10, top: 100}
- * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
- */
-const addNewBoxShadow = (element, position, boxShadow) => {
-  let div = document.createElement('div');
-  div.style.height = element.offsetHeight;
-  div.style.width = element.offsetWidth;
-  div.style.borderRadius = getBorderRadiusOfElement(element);
-  div.style.position = 'absolute';
-  div.style.boxShadow = boxShadow;
-  div.style.webkitPrintColorAdjust = 'exact';
-  div.style.webkitFilter = 'opacity(1)';
-  div.style.top = position.top;
-  div.style.left = position.left;
-  document.getElementsByTagName('body')[0].appendChild(div);
-};
-
-/**
- * gets all elements with shadows
- * @param {HTMLElement[]} elements on page
- * @return {HTMLElement[]} elements with shadows
- */
-const getElementsWithShadows = elements => {
-  const ar = [].slice.call(elements);
-  return ar
-    .filter(el => hasBoxShadow(el) !== '')
-    .map(el => {
-      return {
-        element: el,
-        shadow: hasBoxShadow(el)
-      };
-    });
-};
-
-/**
- * fixes shadows, since normal box-shadow cannot be printed in chrome,
- * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome
- */
-const fixBoxShadows = () => {
-  const elements = getAllDOMElements();
-  const elementsWithShadow = getElementsWithShadows(elements);
-  elementsWithShadow.forEach(element => {
-    const position = getAbsolutePositionOfElement(element.element);
-    element.element.style.boxShadow = 'none';
-    addNewBoxShadow(element.element, position, element.shadow);
-  });
-};
-
-/**
- * checks if the page contains a resume
- * @return {Boolean} true if page contains resume
- */
-const isResume = () => {
-  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();
-  const resume = getResumeDOMElement(page);
-  const fixFont = function(resume, page) {
-    const elements = getAllDOMElements();
-    const elementsAr = [].slice.call(elements);
-    const newFontSizes = calcNewFontSizes(elementsAr);
-    elementsAr.forEach((el, i) => el.style.fontSize = newFontSizes[i] + 'px');
-    if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
-  };
-  if (
-    autoFontEnabled(resume) &&
-    contentIsGreaterThanPage(resume, page)
-  ) fixFont(resume, page);
-};
-
-const isElectron = () => {
-  return window && window.process && window.process.type;
-}
-
-/**
- * fixes resume
- */
-const fixResume = () => {
-  if (!isResume()) return;
-  checkFont();
-  //if (isElectron())
-  fixBoxShadows();
-};
-
-fixResume();