add embed mode [#21]

web/assets/css/style.css

@@ -4,7 +4,19 @@ html, body {
   padding: 0;
   background-color: #000000;
   color: #ffffff;
-  font-family: 'Source Code Pro', monospace;
+  font-family: "Source Code Pro", monospace;
+}
+html.embeded .navigation, body.embeded .navigation {
+  display: none;
+}
+html.embeded .container, body.embeded .container {
+  margin: 0;
+}
+html.embeded #content, html.embeded #linenos, body.embeded #content, body.embeded #linenos {
+  padding-top: 10px;
+}
+html.embeded #footer, body.embeded #footer {
+  font-size: 0.8em;
 }
 
 ::-webkit-scrollbar {
@@ -13,7 +25,7 @@ html, body {
 }
 
 ::-webkit-scrollbar-track {
-  background: none;
+  background: #000000;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -43,7 +55,6 @@ html, body {
     transform: translate3d(-50%, -50%, 0) rotate(360deg);
   }
 }
-
 @keyframes spinner {
   0% {
     -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
@@ -54,7 +65,6 @@ html, body {
     transform: translate3d(-50%, -50%, 0) rotate(360deg);
   }
 }
-
 #spinner-container {
   position: fixed;
   top: 130px;
@@ -62,10 +72,9 @@ html, body {
   height: 50px;
   width: 50px;
 }
-
 #spinner-container .spinner {
-  -webkit-animation: .75s linear infinite spinner;
+  -webkit-animation: 0.75s linear infinite spinner;
-  animation: .75s linear infinite spinner;
+  animation: 0.75s linear infinite spinner;
   -webkit-animation-play-state: inherit;
   animation-play-state: inherit;
   border: solid 5px #ffffff;
@@ -83,16 +92,12 @@ html, body {
   bottom: 60px;
   right: 30px;
 }
-
 #btn_report svg {
-  -webkit-transition: all 250ms;
   transition: all 250ms;
 }
-
 #btn_report:hover {
   cursor: pointer;
 }
-
 #btn_report:hover svg {
   stroke: #2daa57;
 }
@@ -101,51 +106,34 @@ html, body {
   position: fixed;
   top: 0;
   width: calc(100vw - 80px);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
+  flex-direction: row;
-  -webkit-box-direction: normal;
+  align-items: center;
-      -ms-flex-direction: row;
+  justify-content: space-between;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
   padding: 0 40px;
   background-color: #222222;
 }
-
 .navigation .button {
   padding: 10px 20px;
   background-color: transparent;
   border: none;
   outline: none;
 }
-
 .navigation .button svg {
-  -webkit-transition: all 250ms;
   transition: all 250ms;
 }
-
 .navigation .button.active svg {
   stroke: #2daa57;
 }
-
 .navigation .button:hover {
   cursor: pointer;
 }
-
 .navigation .button:hover svg {
   stroke: #2daa57;
 }
-
 .navigation .button:disabled svg {
   stroke: #5a5a5a;
 }
-
 .navigation .button:disabled:hover {
   cursor: initial;
   color: initial;
@@ -153,15 +141,9 @@ html, body {
 
 .container {
   margin-top: 60px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
+  flex-direction: row;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
 }
-
 .container #linenos {
   padding: 20px 0;
   width: 50px;
@@ -169,31 +151,25 @@ html, body {
   background-color: #111111;
   color: #bebebe;
 }
-
 .container #linenos span {
   display: block;
   width: 100%;
   height: 20px;
   text-align: center;
 }
-
 .container #linenos span:last-child {
   margin-bottom: 25px;
 }
-
 .container #content {
-  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
-          box-sizing: border-box;
   padding: 20px;
   width: calc(100vw - 50px);
 }
-
 .container #content #code {
   white-space: pre;
   line-height: 20px;
   overflow-x: auto;
 }
-
 .container #content #input {
   height: 100%;
   width: 100%;
@@ -206,29 +182,24 @@ html, body {
   font: inherit;
   line-height: 20px;
 }
-
 .container #notifications {
   position: fixed;
   bottom: 30px;
   right: 0;
   padding: 20px;
 }
-
 .container #notifications div {
   border-radius: 10px;
   width: 500px;
   margin-top: 20px;
   padding: 20px 30px;
 }
-
 .container #notifications div.error {
   background-color: #ff4d4d;
 }
-
 .container #notifications div.success {
   background-color: #389b38;
 }
-
 .container #notifications div:first-child {
   margin-top: 0;
 }
@@ -240,43 +211,28 @@ html, body {
   width: 100%;
   background-color: #222222;
 }
-
 #footer #flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
+  flex-direction: row;
-  -webkit-box-direction: normal;
+  align-items: center;
-      -ms-flex-direction: row;
+  justify-content: space-between;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
   margin: 0 80px 0 60px;
 }
-
 #footer div {
   display: inline-block;
 }
-
 #footer a {
   display: inline-block;
   text-decoration: none;
   color: #ffffff;
   padding: 5px 20px;
   height: 100%;
-  -webkit-transition: all 200ms;
   transition: all 200ms;
 }
-
 #footer a:hover {
   background-color: #333333;
   color: #2daa57;
 }
-
 #footer #version {
   display: inline-block;
   margin-left: 10px;
@@ -299,6 +255,7 @@ html, body {
   .navigation .meta #version {
     display: none;
   }
+
   .container #notifications {
     padding: 0;
   }
@@ -306,9 +263,9 @@ html, body {
     margin: 0;
     border-radius: 0;
     width: 100vw;
-    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
-            box-sizing: border-box;
   }
+
   #footer #flex {
     margin: 0 0 0 25px;
   }
@@ -319,15 +276,14 @@ html, body {
     padding: 5px 15px;
   }
 }
-
 @media only screen and (max-width: 500px) {
   #footer #flex {
     margin: 0;
-    -ms-flex-pack: distribute;
+    justify-content: space-around;
-        justify-content: space-around;
   }
   #footer .version-container {
     display: none;
   }
 }
+
 /*# sourceMappingURL=style.css.map */

web/assets/css/style.scss

@@ -6,6 +6,27 @@ html, body {
     background-color: #000000;
     color: #ffffff;
     font-family: 'Source Code Pro', monospace;
+
+    // Enables embeded mode (iframes).
+    &.embeded {
+        // Hide navbar.
+        .navigation {
+            display: none;
+        }
+        // Align content with top of the frame.
+        .container {
+            margin: 0;
+        }
+        // Adjust paddings to have more space.
+        #content, #linenos {
+            padding-top: 10px;
+        }
+        // Make footer smaller to further increase
+        // content real estate.
+        #footer {
+            font-size: 0.8em;
+        }
+    }
 }
 
 ::-webkit-scrollbar {
@@ -14,7 +35,7 @@ html, body {
 }
   
 ::-webkit-scrollbar-track {
-    background: none;
+    background: #000000;
 }
   
 ::-webkit-scrollbar-thumb {

web/assets/js/modules/state.js

@@ -45,6 +45,12 @@ export async function initialize() {
     setupButtonFunctionality();
     setupKeybinds();
 
+    // When embeded inside an iframe, add "embeded"
+    // class to body element.
+    if (window != window.parent) {
+        document.body.classList += " embeded";
+    }
+
     // Enable encryption if enabled from last session
     if (localStorage.getItem("encryption") === "true") {
         BUTTON_TOGGLE_ENCRYPTION_ELEMENT.classList.add("active");