Merge pull request #28 from Roky97/Navbar-buttons---2.3

Navbar buttons and open multiple files - 2.3
DeMaCS-UNICAL · Mar 18, 2020 · 4f42e68 · 4f42e68
2 parents a7c9fa0 + b5f2bd6
commit 4f42e68
Show file tree

Hide file tree

Showing 4 changed files with 518 additions and 326 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "LoIDE",
-  "version": "2.2.1",
+  "version": "2.3",
   "description": "Web-based IDE for Logic Programming",
   "main": "app.js",
   "scripts": {

diff --git a/resources/css/style.css b/resources/css/style.css
@@ -1,58 +1,18 @@
-#beta {
-    font-family: 'Dancing Script', cursive;
-    font-size: 22px;
-    vertical-align: top;
-}
-
-.ace {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-#output {
-    width: 100%;
-    min-height: 95%;
-    border: 1px #d9dee4 dotted;
-    border-radius: 8px;
-    background: #f4f9ff;
-    margin-top: 10px;
-    padding: 5px 5px 5px 5px;
-    white-space: pre-wrap;
-}
-
-.output-pane{
-    opacity: 0;
-}
-
-body {
-    height: 100%;
-    background-color: rgba(0,0,0,0.06);
-}
-
-.container {
-    padding: 0px;
-    margin: 0px;
-    padding-right: 1%;
-    padding-left: 1%;
-    width: 100%;
-    overflow: auto;
-}
-
-.navbar-right {
-    padding-right: 1%;
-}
+@media (max-width: 576px){
+    .container {
+        max-width: 100%;
+    }
 
-.navbar-brand{
-    margin-right: 0px;
-}
+    #a{
+        margin-top: 1%;
+        margin-bottom: 1%;
+    }
 
-img[alt=logo]{
-    cursor: pointer;
-}
+    #input-select {
+        margin-right: 1%;
+        margin-left: 1%;
+    }
 
-@media screen and (max-width: 576px) {
     img[alt=logo] {
         width: 55%;
     }
@@ -81,9 +41,18 @@ img[alt=logo]{
     body.dark .left-panel-show {
         background: rgba(83, 83, 83, 0.4);
     }
+
+    #input-select {
+        margin-right: 0px;
+        margin-left: 0px;
+    }
 }
 
-@media screen and (min-width: 577px) {
+@media (min-width: 577px) {
+    .container {
+        max-width: 100%;
+    }
+
     img[alt=logo] {
         width: 35%;
     }
@@ -107,7 +76,7 @@ img[alt=logo]{
     }
 }
 
-@media screen and (min-width: 1700px) {
+@media (min-width: 1700px) {
     .left-panel {
         width: 0%;
         z-index: 1;
@@ -125,6 +94,60 @@ img[alt=logo]{
     }
 }
 
+#beta {
+    font-family: 'Dancing Script', cursive;
+    font-size: 22px;
+    vertical-align: top;
+}
+
+.ace {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+#output {
+    width: 100%;
+    min-height: 95%;
+    border: 1px #d9dee4 dotted;
+    border-radius: 8px;
+    background: #f4f9ff;
+    margin-top: 10px;
+    padding: 5px 5px 5px 5px;
+    white-space: pre-wrap;
+}
+
+.output-pane{
+    opacity: 0;
+}
+
+body {
+    height: 100%;
+    background-color: rgba(0,0,0,0.06);
+}
+
+.container {
+    padding: 0px;
+    margin: 0px;
+    padding-right: 1%;
+    padding-left: 1%;
+    width: 100%;
+    overflow: auto;
+}
+
+.navbar-right {
+    padding-right: 1%;
+}
+
+.navbar-brand{
+    margin-right: 0px;
+}
+
+img[alt=logo]{
+    cursor: pointer;
+}
+
 .panel-right {
     transition: margin-left .5s;
     padding: 16px;
@@ -147,10 +170,6 @@ a[role="button"]:focus {
     padding-left: 5px;
 }
 
-#upload-container {
-    transition: 0.5s;
-}
-
 .btn:focus {
     outline: none;
 }
@@ -175,10 +194,12 @@ a[role="button"]:focus {
 }
 
 #input-select {
+    position: relative;
     text-align: center;
     vertical-align: middle;
-    margin-left: 1%;
-    margin-top: 2%;
+    margin-left: 20%;
+    margin-right: 20%;
+    margin-top: 1%;
     margin-bottom: 1%;
 }
 
@@ -289,6 +310,10 @@ mark {
     margin-top: 5%;
 }
 
+.popover-download {
+    cursor: pointer;
+}
+
 .popover-download-content {
     padding: 10px;
     border-radius: 5px;
@@ -303,42 +328,12 @@ mark {
     margin-right: 2px;
 }
 
-.save-content {
-    margin-top: 4px;
+#cloud-download {
+    margin-top: 0;
 }
 
-@media (min-width: 1200px){
-    .container {
-                max-width: 100%;
-            }
-}
-
-@media (min-width: 992px){
-    .container {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 768px){
-    .container {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 576px){
-    .container {
-        max-width: 100%;
-    }
-}
-
-@media (max-width: 576px){
-    .container {
-        max-width: 100%;
-    }
-    #a{
-        margin-top: 1%;
-        margin-bottom: 1%;
-    }
+.save-content {
+    margin-top: 4px;
 }
 
 .hidden{
@@ -405,6 +400,7 @@ label[for=btn-download] {
 }
 
 .add-tab{
+    cursor: pointer;
     margin-left: 5px;
     padding: 3.5px 10px;
     border-bottom-left-radius: .25rem;
@@ -414,6 +410,7 @@ label[for=btn-download] {
 }
 
 .btn-tab{
+    cursor: pointer;
     padding: .35rem .6rem;
     margin: .3rem .1rem;
     background-color: #f8f9fa;
@@ -462,24 +459,6 @@ li.nav-item:hover > a:not(.active){
     box-shadow: 0 .25rem .75rem rgba(0,0,0,0.1);
 }
 
-select{
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-image:
-            linear-gradient(45deg, transparent 50%, gray 50%),
-            linear-gradient(135deg, gray 50%, transparent 50%);
-    background-position:
-            calc(100% - 20px) calc(1em + 2px),
-            calc(100% - 15px) calc(1em + 2px),
-            calc(100% - 2.5em) 0.5em;
-    background-size:
-            5px 5px,
-            5px 5px,
-            1px 1.5em;
-    background-repeat: no-repeat;
-}
-
 .navbar{
     background-color: white;
     transition: 0.5s;
@@ -543,6 +522,14 @@ select.not-alone{
     margin-right: 7px;
 }
 
+.save-btn {
+    display: flex;
+}
+
+.custom-file-label {
+    text-align: start;
+}
+
     /*DARK-MODE SECTION*/
 
 body.dark{
@@ -644,4 +631,12 @@ body.dark .btn-add{
 
 body.dark .form-control{
     border-color: #343a40;
+}
+
+body.dark .custom-select {
+    background-color: #d8d8d8;
+}
+
+body.dark .custom-file-label {
+    background-color: #d8d8d8;
 }