Code refactoring. Fix for 'Cannot read bounds of undefined.'

matejmosko · Oct 4, 2017 · 68fb786 · 68fb786
1 parent cccbaac
commit 68fb786
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 201 deletions.
diff --git a/css/styles-console.css b/css/styles-console.css
@@ -1,3 +1,5 @@
+/* RESET DEFAULT css settings */
+
 *, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -17,28 +19,62 @@ input, button, textarea, :focus {
 body {
   width: auto;
   margin: 0px;
+  padding: 0px;
 }
 
+
+/* LAYOUT divs */
+
 #container {
-  /*  overflow-x: hidden;*/
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
+  overflow-y: hidden;
 }
 
 #topbox {
+  height: 72px;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 10px;
+  overflow: hidden
+}
+
+#main {
+  height: calc(100vh - 72px - 72px);
+  width: 100%;
+  display: flex;
+  overflow-y: hidden;
+}
+
+#footer {
+  height: 72px;
+  padding: 10px;
 }
 
 #content {
-  flex: 4 1 70%;
+  height: calc(100vh - 72px - 72px);
+  overflow-y: hidden;
+  width: 70vw;
+  padding: 5px 10px;
 }
 
 #sidebar {
-  flex: 1 1 25%;
+  height: 100%;
+  width: 30vw;
+  padding: 0px 10px;
+  overflow-y: scroll;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
 }
 
+
+/* FUNCTIONAL DIVS with IDs */
+
 #infobox {
   flex: 4 0 100%;
   padding: 10px;
@@ -47,26 +83,29 @@ body {
   margin: 0px;
 }
 
-#main {
+#contentCard {
+  height: 100%;
   width: 100%;
+  margin: 10px 0px;
+  overflow-y: hidden;
   display: flex;
-}
-
-#gameTables {
-  padding: 0px 10px;
+  justify-content: center;
 }
 
 #currentSlideDiv {
-  width: 100%;
-  padding-bottom: 75%;
+  flex: 1 1 auto;
+  width: 70vw;
+  height: 70vh;
   /* This maintains 4:3 aspect ratio */
   position: relative;
 }
 
 #allSlidesDiv {
+  height: 100%;
   width: 100%;
   padding: 20px 20px;
   position: relative;
+  overflow-y: scroll;
 }
 
 #impressCurrent {
@@ -90,12 +129,35 @@ body {
   bottom: 0;
 }
 
+x-tabs {
+  height: 30px;
+}
+
+#footer .presentationInfo {
+  margin: 0px;
+  font-weight: bold;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-around;
+}
+
+#bigTimer {
+  font-size: 2.0rem;
+}
+
+#smallTimer {
+  font-size: 1.0rem;
+}
+
+/* WEBVIEW settings */
+
 .nextSlide {
+  margin:0px;
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 0px;
-  padding-bottom: 75%;
+  min-height: 30vh;
   /* This maintains 4:3 aspect ratio */
 }
 
@@ -109,6 +171,7 @@ body {
 }
 
 .impressCurtain {
+  /* Hack to bypass default impress.js events on previews */
   position: absolute;
   top: 0;
   left: 0;
@@ -120,20 +183,11 @@ body {
   padding: 0px;
 }
 
-.danger {
-  background-color: #cc3300;
-}
 
-x-dialog h4, x-dialog p {
-  text-align: center;
-}
+/* BUTTTONS etc. */
 
-x-dialog x-buttons {
-  margin: 0 auto;
-}
-
-x-dialog {
-  padding: 20px;
+.danger {
+  background-color: #cc3300;
 }
 
 .impressControlBtns {
@@ -152,26 +206,38 @@ x-dialog {
   -webkit-user-select: none;
 }
 
-#bigTimer {
-  font-size: 4.0em;
+.topButtons {
+  flex: 0 1 auto;
 }
 
-#smallTimer {
-  font-size: 1.5em;
+x-button:hover *, x-button:hover, x-tab:hover, #projectionTimer {
+  cursor: pointer;
 }
 
-.sideInfo {
-  text-align: center;
-  color: #DDD;
-  font-weight: bold;
+.hidden {
+  display: none;
+}
+
+
+/* GRID for allSlides Navigation */
+
+.grid {
   display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: space-between;
+  flex-flow: row wrap;
+  width: 100%;
 }
 
-.topButtons {
-  flex: 0 1 auto;
+.grid-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 5px;
+  min-height: 50px;
+  overflow: hidden;
+  min-width: 20%;
+  flex: 1 1 30%;
+  text-align: center;
 }
 
 .grid-item.current {
@@ -190,29 +256,17 @@ x-dialog {
   color: white;
 }
 
-x-button:hover *, x-button:hover, x-tab:hover, #projectionTimer {
-  cursor: pointer;
-}
 
-.grid {
-  display: flex;
-  flex-flow: row wrap;
-  width: 100%;
-}
+/* DIALOGs (exit...) */
 
-.grid-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin: 5px;
-  min-height: 50px;
-  overflow: hidden;
-  min-width: 20%;
-  flex: 1 1 30%;
+x-dialog h4, x-dialog p {
   text-align: center;
 }
 
-.hidden {
-  display: none;
+x-dialog x-buttons {
+  margin: 0 auto;
+}
+
+x-dialog {
+  padding: 20px;
 }
diff --git a/js/console-script.js b/js/console-script.js
@@ -147,11 +147,8 @@
     function parseMarkdown(file) {
       const options = {
         theme: 'light',
-        autoSplit: true,
-        allowHtml: false,
         verbose: false,
-        embed: false,
-        title: 'Optional title for output HTML'
+        embed: false
       };
 
       markpress(file, options).then(({