Fixed issue #1292; terminal scrollbar may now be scrolled

* Removed div.terminal_bg whose purpose was to hold the background SVG, as this div was occluding the scrollbar, and instead set SVG as the background-image of div.terminal_container using CSS. * As CSS does not have a background-opacity directive, manually decoded, edited and re-encoded the SVGs (light, dark) so that all <g>s are wrapped in a top-level <g opacity="0.1"> * Improved the rules of how the background image resizes

Fixed issue #1292; terminal scrollbar may now be scrolled
3ccb0dbf · Edward Grech · yann300 · 6f8d0cc7 · 3ccb0dbf · 3ccb0dbf
Commit 3ccb0dbf authored Jun 10, 2018 by Edward Grech Committed by yann300 Jul 05, 2018
4 changed files
--- a/src/app/panels/styles/terminal-styles.js
+++ b/src/app/panels/styles/terminal-styles.js
@@ -57,25 +57,10 @@ var css = csjs`
    overflow-y        : auto;
    font-family       : monospace;
    margin            : 0px;
-  }
-  .terminal_bg     {
-    display           : flex;
-    flex-direction    : column;
-    height            : 100%;
-    padding-left      : 5px;
-    padding-right     : 5px;
-    padding-bottom    : 3px;
-    overflow-y        : auto;
-    font-family       : monospace;
-    background-image  : ${styles.terminal.backgroundImage_Terminal};
-    opacity           : 0.1;
-    top               : 15%;
-    left              : 33%;
-    bottom            : 0;
-    right             : 0;
-    position          : absolute;
-    background-repeat : no-repeat;
-    background-size   : 45%;
+    background-image    : ${styles.terminal.backgroundImage_Terminal};
+    background-repeat   : no-repeat;
+    background-position : center 15%;
+    background-size     : auto calc(75% -  1.7em);
  }
  .terminal    {
    position: relative;

--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -145,8 +145,6 @@ class Terminal {

    self._view.term = yo`
      <div class=${css.terminal_container} onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
-        <div class=${css.terminal_bg}>
-        </div>
        <div class=${css.terminal}>
            ${self._view.journal}
            ${self._view.cli}

--- a/src/app/ui/styles-guide/style-guide.js
+++ b/src/app/ui/styles-guide/style-guide.js
--- a/src/app/ui/styles-guide/styleGuideDark.js
+++ b/src/app/ui/styles-guide/styleGuideDark.js