Increase dimensions of exported table

lieuzhenghong · Jul 23, 2017 · 9bf8b36 · 9bf8b36
1 parent 5af2fd3
commit 9bf8b36
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 29 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -94,16 +94,21 @@
         </div>
           <div class = 'component'>
             <div class = 'col export-text'>
-              <div v-if='(index+1) % 8 == 2 || (index+1) % 8 == 1'>No.</div>
-              {{label.title}}
-              <br/>
-              <span class='.editable' v-on:click='toggle_defect(label)'>
+              <div v-if='(index+1) % 8 == 2 || (index+1) % 8 == 1'>
+                No.
+                <hr/>
+              </div>
+              <div class='label-title'> {{label.title}} </div>
+              <div class='editable defect-icon' v-on:click='toggle_defect(label)'>
                 <img v-bind:src='defect_src(label)' width='32px'>
-              </span>
+              </div>
             </div>
 
             <div class = 'col export-img'> 
-              <div v-if='(index+1) % 8 == 2 || (index+1) % 8 == 1'>Photo description</div>
+              <div v-if='(index+1) % 8 == 2 || (index+1) % 8 == 1'>
+                Photo description
+                <hr/>
+              </div>
               <img width='400px' height='300px'
                 v-bind:src='label.image_src'
               />

diff --git a/dist/renderer.js b/dist/renderer.js
@@ -7258,7 +7258,6 @@ let vue = new __WEBPACK_IMPORTED_MODULE_7_vue__["a" /* default */]({
   methods: {
     sort_data: function(sort_by) {
       this.labels = this.labels.sort( (a,b) => {
-        console.log('hi');
         if (typeof a[sort_by] === 'number') {
           return (a[sort_by] - b[sort_by]);
         }
@@ -7522,10 +7521,11 @@ function upload_plan(file_list) {
         "<input name='floor' type='number' placeholder='Floor'/>",
       ].join(''),
       callback: (data) => {
+        console.log(data);
         globals.CVS.image = img
-        if (data === undefined) {
-          globals.BUILDING = A;
-          globals.FLOOR = 1;
+        if (data === undefined || data === false) {
+          globals.BUILDING = 'A';
+          globals.FLOOR = '1';
         }
         else {
           globals.BUILDING = data.letter;
@@ -17331,7 +17331,7 @@ exports = module.exports = __webpack_require__(11)(undefined);
 
 
 // module
-exports.push([module.i, ".page-2 {\n  text-align: center;\n}\n\n.A4-wrapper {\n  margin: 0 auto;\n  border: 1px solid black;\n  text-align: center;\n  width: 21cm;\n}\n\n.export-table {\n  margin: 0 auto;\n  width: 16cm;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.export-table .export-title header{\n  display: block;\n  width: 16cm;\n  text-align: left;\n  font-size: 1.5rem;\n  font-weight: 700;\n  padding: 10px;\n}\n\n.export-table .component {\n  max-width: 7.9cm;\n  max-height: 6cm;\n  display: flex;\n  flex-wrap: wrap;\n  border: 1px solid black;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  justify-content: space-around;\n}\n\n.component:nth-of-type(10n+2), .component:nth-of-type(10n+3) {\n  max-height: 6.5cm;\n}\n \n\n.export-table.component .title-bar {\n  width: 100%; \n}\n\n.export-table .component .col {\n  min-width: 1.5cm;\n}\n\n\n.export-table .component .export-text {\n  max-width: 1.5cm;\n  text-align: center;\n}\n\n.component:nth-of-type(10n+2) .export-text, .component:nth-of-type(10n+3) .export-text {\n}\n\n\n.export-table .component .export-img {\n  justify-content: space-between;\n  max-width: 6.5cm;\n}\n\n.export-table .component .export-textarea {\n  width: 100%;\n  text-align: center;\n}\n\n.export-table .component textarea {\n  width: 7.5cm;\n  max-height: 1.5cm;\n  resize: none;\n  border: none;\n  font-size: 12px;\n}\n\n.export-table .component textarea:hover {\n  background-color: rgba(240, 240, 240, 1);\n  border: 1px solid black;\n}\n\n.export-table .component .col img {\n  max-width: 6.0cm;\n  max-height: 4.5cm;\n}\n\n.page-break {\n  height: 50px;\n  width: 100%;\n  break-after: always;\n}\n", ""]);
+exports.push([module.i, ".page-2 {\n  text-align: center;\n}\n\n.A4-wrapper {\n  margin: 0 auto;\n  border: 1px solid black;\n  text-align: center;\n  width: 21cm;\n}\n\n.export-table {\n  margin: 0 auto;\n  width: 20cm;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.export-table .export-title header{\n  display: block;\n  width: 16cm;\n  text-align: left;\n  font-size: 1.5rem;\n  font-weight: 700;\n  padding: 10px;\n}\n\n.export-table .component {\n  max-width: 10cm;\n  max-height: 7cm;\n  display: flex;\n  flex-wrap: wrap;\n  border: 1px solid black;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  justify-content: space-between;\n}\n\n.component:nth-of-type(10n+2), .component:nth-of-type(10n+3) {\n  max-height: 7.5cm;\n}\n \n\n.export-table.component .title-bar {\n  width: 100%; \n}\n\n.export-table .component .col {\n  min-width: 1.5cm;\n}\n\n\n.export-table .component .export-text {\n  max-width: 1.5cm;\n  text-align: center;\n  border-right: 1px solid black;\n  border-bottom: 1px solid black;\n  position: relative;\n}\n\n.export-table .component .export-text .label-title {\n  position: relative;\n  top: 20%;\n}\n\n.export-table .component .export-text .defect-icon {\n  position: relative;\n  top: 60%;\n}\n\n.export-table .component .export-img {\n  justify-content: space-between;\n  max-width: 8.3cm;\n  width: 8.3cm;\n}\n\n.export-table .component .export-textarea {\n  width: 100%;\n  text-align: center;\n}\n\n.export-table .component textarea {\n  width: 90%;\n  max-height: 1.5cm;\n  resize: none;\n  border: none;\n  font-size: 12px;\n  font-family: sans-serif;\n}\n\n.export-table .component textarea:hover {\n  background-color: rgba(240, 240, 240, 1);\n  border: 1px solid black;\n}\n\n.export-table .component .col img {\n  max-width: 7.5cm;\n  max-height: 5.6cm;\n}\n\n.page-break {\n  height: 50px;\n  width: 100%;\n  break-after: always;\n}\n", ""]);
 
 // exports
 

diff --git a/src/index.js b/src/index.js
@@ -339,10 +339,11 @@ function upload_plan(file_list) {
         "<input name='floor' type='number' placeholder='Floor'/>",
       ].join(''),
       callback: (data) => {
+        console.log(data);
         globals.CVS.image = img
-        if (data === undefined) {
-          globals.BUILDING = A;
-          globals.FLOOR = 1;
+        if (data === undefined || data === false) {
+          globals.BUILDING = 'A';
+          globals.FLOOR = '1';
         }
         else {
           globals.BUILDING = data.letter;

diff --git a/src/styles/export-table.css b/src/styles/export-table.css
@@ -11,34 +11,34 @@
 
 .export-table {
   margin: 0 auto;
-  width: 16cm;
+  width: 20cm;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .export-table .export-title header{
   display: block;
-  width: 16cm;
+  width: 20cm;
   text-align: left;
   font-size: 1.5rem;
   font-weight: 700;
   padding: 10px;
 }
 
 .export-table .component {
-  max-width: 7.9cm;
-  max-height: 6cm;
+  max-width: 10cm;
+  max-height: 7cm;
   display: flex;
   flex-wrap: wrap;
   border: 1px solid black;
   border-collapse: collapse;
   box-sizing: border-box;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .component:nth-of-type(10n+2), .component:nth-of-type(10n+3) {
-  max-height: 6.5cm;
+  max-height: 7.5cm;
 }
 
 
@@ -47,26 +47,32 @@
 }
 
 .export-table .component .col {
-  display: flex;
-  flex-direction: column;
   min-width: 1.5cm;
 }
 
 
 .export-table .component .export-text {
   max-width: 1.5cm;
   text-align: center;
-  justify-content: space-around;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  position: relative;
 }
 
-.component:nth-of-type(10n+2) .export-text, .component:nth-of-type(10n+3) .export-text {
-  justify-content: space-between;
+.export-table .component .export-text .label-title {
+  position: relative;
+  top: 20%;
 }
 
+.export-table .component .export-text .defect-icon {
+  position: relative;
+  top: 60%;
+}
 
 .export-table .component .export-img {
   justify-content: space-between;
-  max-width: 6.5cm;
+  max-width: 8.3cm;
+  width: 8.3cm;
 }
 
 .export-table .component .export-textarea {
@@ -75,11 +81,12 @@
 }
 
 .export-table .component textarea {
-  width: 7.5cm;
+  width: 90%;
   max-height: 1.5cm;
   resize: none;
   border: none;
   font-size: 12px;
+  font-family: sans-serif;
 }
 
 .export-table .component textarea:hover {
@@ -88,8 +95,8 @@
 }
 
 .export-table .component .col img {
-  max-width: 6.0cm;
-  max-height: 4.5cm;
+  max-width: 7.5cm;
+  max-height: 5.6cm;
 }
 
 .page-break {