feat: add auto scroll

BrunnerLivio · Sep 6, 2023 · cfb6867 · cfb6867
1 parent 6d03f65
commit cfb6867
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/public/app/FileStreamModule.js b/public/app/FileStreamModule.js
@@ -4,7 +4,8 @@ var FileStreamModule = (function (socket) {
     var self = {},
         $fileStreamDialog,
         $fileStreamDialogShadow,
-        $content;
+        $content,
+        $close;
 
     $(document).ready(init);
 
@@ -18,12 +19,12 @@ var FileStreamModule = (function (socket) {
         $fileStreamDialog = $('#fileStreamDialog');
         $fileStreamDialogShadow = $('#fileStreamDialogShadow');
         $content = $fileStreamDialog.find('.content');
-        $fileStreamDialogShadow.click(function () {
-            closeDialog();
-        });
+        $close = $fileStreamDialog.find('.dialog-close');
 
-        $(document).keydown(function (e) {
-            var code = e.keyCode || e.which;
+        $fileStreamDialogShadow.click(() => closeDialog());
+        $close.click(() => closeDialog());
+        $(document).keydown((e) => {
+            const code = e.keyCode || e.which;
             // Press escape
             if (code === 27) {
                 closeDialog();
@@ -55,7 +56,6 @@ var FileStreamModule = (function (socket) {
         socket.on('fileChanged', onFileChanged);
         $fileStreamDialog.fadeIn();
         $fileStreamDialogShadow.fadeIn();
-
     }
 
     /**
@@ -68,6 +68,16 @@ var FileStreamModule = (function (socket) {
      */
     function onFileChanged(content) {
         $content.html(content.replace(/\n/g, '<br/>'));
+        const scrollPosition = $content.scrollTop() + $content.innerHeight();
+        if (scrollPosition >= $content.get(0).scrollHeight - 100) {
+            scrollToBottom();
+        }
+    }
+
+    function scrollToBottom() {
+        $content.animate({
+            scrollTop: $content.get(0).scrollHeight
+        }, 1500);
     }
 
     return {

diff --git a/public/assets/css/main.css b/public/assets/css/main.css
@@ -130,16 +130,45 @@ tr:not(#header):hover {
     padding-bottom: 90px;
 }
 
+@media (max-width: 600px) {
+    .dialog {
+        width: 100vw;
+        height: calc(100vh - 30px);
+        padding: 0px;
+    }
+}
+
 .dialog .content {
     background-color: #1D1F20;
-    height: 100%;
+    height: calc(100% - 100px);
     overflow-y: scroll;
     color: #eeeeee;
     padding: 5px;
+    word-wrap: break-word;
+    white-space: break-spaces;
+    word-break: break-word;
+    display: inline-block;
+    max-width: calc(100% - 30px);
     font-family: 'Roboto Mono', monospace;
     margin: 15px;
 }
 
+.dialog .dialog-header {
+  display: flex;
+  align-items: center;
+  padding-right: 30px;
+}
+
+.dialog-header h2 {
+  flex-grow: 1;
+}
+
+.dialog-close {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 20px;
+  color:rgba(0, 0, 0, 0.8)
+}
+
 a {
     color: #2196F3;
     cursor: pointer;

diff --git a/public/index.html b/public/index.html
@@ -62,7 +62,10 @@
 	</div>
 	<div class="dialog-shadow" id="fileStreamDialogShadow"></div>
 	<div class="dialog" id="fileStreamDialog">
-		<h2> Filestream</h2>
+    <div class="dialog-header">
+      <h2>Filestream</h2>
+      <a class="dialog-close">X</a>
+    </div>
 		<div class="content">
 		</div>
 	</div>