Merge pull request #32 from Roky97/Release-2.6.0

Release 2.6.0
DeMaCS-UNICAL · May 24, 2020 · 8cf75ec · 8cf75ec
2 parents 0e42d38 + c77f70f
commit 8cf75ec
Show file tree

Hide file tree

Showing 7 changed files with 427 additions and 6,573 deletions.
diff --git a/app.js b/app.js
@@ -6,6 +6,7 @@ var forceSSL = require('express-force-ssl');
 var webSocket = require('websocket').w3cwebsocket;
 var fs = require('fs');
 var pug = require('pug');
+const compression = require('compression');
 
 // System config loading
 var properties  = require('./config/app-config.json');
@@ -48,6 +49,7 @@ app.use(helmet.hsts({
     maxAge: maxAge
 }));
 
+app.use(compression());
 app.use(express.static('resources'));
 app.set('views', './resources');
 app.set('view engine', 'pug');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "LoIDE",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Web-based IDE for Logic Programming",
   "main": "app.js",
   "scripts": {
@@ -45,6 +45,9 @@
     "socket.io": "^2.3.0",
     "websocket": "^1.0.30"
   },
+  "devDependencies": {
+    "compression": "^1.7.3"
+  },
   "analyze": true,
   "homepage": "https://github.com/DeMaCS-UNICAL/LoIDE#readme"
 }
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -13,10 +13,6 @@
     margin-left: 1%;
   }
 
-  img[alt="logo"] {
-    width: 55%;
-  }
-
   .navbar-brand {
     width: 40%;
   }
@@ -29,9 +25,10 @@
     float: left;
     transition: 0.5s;
   }
+
   .left-panel-show {
     width: 100%;
-    padding: 3%;
+    padding: 0 3% 3% 3%;
     background: rgba(255, 245, 238, 1);
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
     margin-bottom: 0.75rem;
@@ -52,10 +49,6 @@
     max-width: 100%;
   }
 
-  img[alt="logo"] {
-    width: 35%;
-  }
-
   .left-panel {
     position: relative;
     width: 0%;
@@ -75,6 +68,22 @@
   }
 }
 
+@media (min-width: 576px) and (max-width: 840px) {
+  .btn-text {
+    display: none;
+  }
+
+  .nav-buttons>.btn, .nav-buttons>*>.btn { 
+    width: 60px;
+  }
+ }
+
+@media (min-width: 577px) and (max-width: 1142px){
+  .left-panel-show {
+    min-width: 200px;
+  }
+}
+
 @media (min-width: 1700px) {
   .left-panel {
     width: 0%;
@@ -99,6 +108,41 @@
   vertical-align: top;
 }
 
+.splashscreen {
+  position: fixed;
+  top:0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: white;
+  color: black;
+  z-index: 1100;
+}
+
+.display-none{
+  opacity: 0;
+  z-index: -10;
+  transition: all 0.5s;
+}
+
+@keyframes fadeIn{
+  to{
+    opacity: 1;
+  }
+}
+
+.fade-in{
+  opacity: 0;
+  animation: fadeIn 0.1s ease-in forwards;
+}
+
+.splash-logo{
+  width: 150px;
+}
+
 .ace {
   top: 0;
   right: 0;
@@ -115,6 +159,9 @@
 }
 
 #output {
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
   flex-grow: 1;
   overflow: auto;
@@ -126,6 +173,14 @@
   white-space: pre-wrap;
 }
 
+#output-model{
+  color: black;
+}
+
+#output-error{
+  color: red;
+}
+
 .output-pane {
   opacity: 0;
 }
@@ -152,8 +207,9 @@ body {
   margin-right: 0px;
 }
 
-img[alt="logo"] {
+.navbar-logo {
   cursor: pointer;
+  width: 84px;
 }
 
 .unselectable {
@@ -183,10 +239,6 @@ a[role="button"]:focus {
   outline: none;
 }
 
-[href="#setting-editor"] {
-  padding-left: 5px;
-}
-
 .btn:focus {
   outline: none;
 }
@@ -401,6 +453,7 @@ label[for="btn-download"] {
 
 .left-panel-title {
   border-bottom: 1px dashed #dddddd;
+  background-color: rgba(255, 245, 238, 1);
 }
 
 .add-tab {
@@ -562,6 +615,8 @@ select.not-alone {
 
 .check-tab-name {
   margin-left: 8px;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .check-auto-run-tab {
@@ -637,6 +692,11 @@ select {
   cursor: pointer;
 }
 
+#run-dot,
+label[for="run-dot"] {
+  cursor: pointer;
+}
+
 /*DARK-MODE SECTION*/
 
 body.dark {
@@ -778,14 +838,20 @@ body.dark .context-menu-item {
 
 body.dark .context-menu-list {
   background-color: #e8e8e8;
-
 }
 
 body.dark .context-menu-item.context-menu-hover {
   background-color: #dbdbdb;
-
 }
-body.dark .list-group-item-action:focus, body.dark .list-group-item-action:hover {
+body.dark .list-group-item-action:focus,
+body.dark .list-group-item-action:hover {
   background-color: rgb(233, 233, 233);
+}
 
+body.dark .left-panel-title {
+  background-color: rgb(83, 83, 83);
 }
+
+body.dark #output-model{
+  color: white;
+}