From b1dc8bb2ee702ba7a1c39be778db29074d7462e1 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Sun, 3 Sep 2017 21:29:42 +0200
Subject: [PATCH] :lipstick: Site > Code > Hide scrollbar

---
 site/src/components/application/script.js | 29 +++++++++++++++++++++++
 site/src/components/viewer/script.js      |  5 ++++
 site/src/components/viewer/style.styl     | 15 +++++++++---
 site/src/components/viewer/template.html  | 18 +++++++-------
 site/src/store/index.js                   |  8 ++++++-
 5 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/site/src/components/application/script.js b/site/src/components/application/script.js
index 5eb7003..d74ccca 100644
--- a/site/src/components/application/script.js
+++ b/site/src/components/application/script.js
@@ -19,5 +19,34 @@ export default
         {
             return this.$store.state.projects.current
         }
+    },
+
+    mounted()
+    {
+        this.testScrollbar()
+    },
+
+    methods:
+    {
+        testScrollbar()
+        {
+            // Create dummy
+            const dummy = document.createElement("div")
+
+            dummy.style.width = '100px'
+            dummy.style.height = '100px'
+            dummy.style.overflow = 'scroll'
+            dummy.style.position = 'absolute'
+            dummy.style.top = '-9999px'
+
+            this.$el.appendChild(dummy)
+
+            // Get the scrollbar width
+            const scrollbarWidth = dummy.offsetWidth - dummy.clientWidth
+            this.$store.commit('updateScrollbarWidth', scrollbarWidth)
+
+            // Delete the DIV
+            this.$el.removeChild(dummy)
+        }
     }
 }
\ No newline at end of file
diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js
index 3e56632..32e88b7 100644
--- a/site/src/components/viewer/script.js
+++ b/site/src/components/viewer/script.js
@@ -32,6 +32,11 @@ export default
         currentLine()
         {
             return this.$store.state.files.currentLine
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 
diff --git a/site/src/components/viewer/style.styl b/site/src/components/viewer/style.styl
index 27a2b5a..73390ec 100644
--- a/site/src/components/viewer/style.styl
+++ b/site/src/components/viewer/style.styl
@@ -17,17 +17,26 @@
     top 30px
     right 0
     width 100%
-    height 100%
+    bottom 0
     font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
     line-height 20px
     letter-spacing 0.5px
     font-size 15px
     background #2d2d49
-    overflow scroll
+    overflow hidden
 
     .version-active &
         width 75%
 
+.scroll-hack
+    position absolute
+    top 0
+    left 0
+    bottom -15px
+    right -15px
+    overflow scroll
+
+
 .lines
     position absolute
     top 0
@@ -90,7 +99,7 @@
 
 .hljs
     display block
-    overflow-x auto
+    // overflow-x auto
     color #abb2bf
 
 .hljs-comment
diff --git a/site/src/components/viewer/template.html b/site/src/components/viewer/template.html
index e805dc0..3fb3ddd 100644
--- a/site/src/components/viewer/template.html
+++ b/site/src/components/viewer/template.html
@@ -1,12 +1,14 @@
 <div class="viewer" v-if="version">
-    <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
-    <div class="lines">
-        <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
-            <span class="added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive">+</span>
-            <span class="removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">-</span>
-            <span class="index">{{ line }}.</span>
-            <span class="question">?</span>
-            <span class="active" v-if="line === currentLine">!</span>
+    <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
+        <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
+        <div class="lines">
+            <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
+                <span class="added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive">+</span>
+                <span class="removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">-</span>
+                <span class="index">{{ line }}.</span>
+                <span class="question">?</span>
+                <span class="active" v-if="line === currentLine">!</span>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/site/src/store/index.js b/site/src/store/index.js
index 2461f54..e52b0aa 100644
--- a/site/src/store/index.js
+++ b/site/src/store/index.js
@@ -17,7 +17,8 @@ export default new Vuex.Store({
 
     state:
     {
-        url: ''
+        url: '',
+        scrollbarWidth: 0
     },
 
     mutations:
@@ -25,6 +26,11 @@ export default new Vuex.Store({
         updateUrl(state, data)
         {
             state.url = data
+        },
+
+        updateScrollbarWidth(state, data)
+        {
+            state.scrollbarWidth = data
         }
     }
 })
\ No newline at end of file