From d75aa1b47a4f8ecaa19d09565895c701609ea1d1 Mon Sep 17 00:00:00 2001
From: Mireille Raad <mir.mir@gmail.com>
Date: Fri, 16 Oct 2020 18:52:42 -0400
Subject: [PATCH] update UI and clean up css a bit

---
 wasm/notebook/src/index.ejs |  65 ++++++++---
 wasm/notebook/src/style.css | 207 +++++++++++++++++++++++++-----------
 2 files changed, 195 insertions(+), 77 deletions(-)

diff --git a/wasm/notebook/src/index.ejs b/wasm/notebook/src/index.ejs
index e46243c33..68fd4d1b2 100644
--- a/wasm/notebook/src/index.ejs
+++ b/wasm/notebook/src/index.ejs
@@ -4,43 +4,74 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link defer async href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Sen:wght@800&display=swap" rel="stylesheet"> 
+    <title>RustPython Notebook</title>
+    <link defer async href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Sen:wght@800&display=swap"
+        rel="stylesheet">
 </head>
 
 <body>
+
     <!-- navigation bar -->
     <div class="nav-bar">
-        <div>
-            <button id="run-btn">run notebook &#9658; </button>
-            <button id="snippet-btn" class="btn-secondary mr-1">import code</button>
+        <div class="nav-bar-links d-flex">
+            <a href="#" class="btn" data-id="main-code">main</a>
+            <a href="#" class="btn" data-id="python-code">python</a>
+            <a href="#" class="btn" data-id="javascript-code">javascript</a>
+            <a href="#" class="btn mr-px-5" data-id="css-code">css</a>
+            <a href="#" id="run-btn" class="bg-orange text-white">run &#9658; </a>
         </div>
         <div class="header item-center">RustPython 🐍 😱 🤘</div>
-        <div class="text-right"><a href="https://github.com/RustPython/">github</a></div>
-    </div>
-
-    <!-- user interface elements for importing code -->
-    <div id="url-container" class="d-none p-1 bg-light">
-        <div><label for="url">public url:</label></div>
-        <div>
-            <input type="url" name="url" id="snippet-url">
-            <button id="fetch-code" class="btn-secondary">fetch</button>
-        </div>
+        <div class="text-right">
+            <a href="https://github.com/RustPython/"> github</a>
+        </div>  
     </div>
 
     <!-- code editor and output display -->
     <!-- split view -->
     <div class="split-view full-height">
-        <textarea id="code"></textarea>
+
+        <div id="main-code" class="tab code-wrapper h-100">
+            <a id="import-code" href="#popup" class="code-import text-black">import</a>
+            <div id="main-code-editor" class="h-100"></div>
+        </div>
+
+        <div id="python-code" class="tab code-wrapper d-none h-100">
+            <a id="import-code" href="#popup" class="code-import text-black">import python</a>
+            <div id="python-code-editor" class="h-100"></div>
+        </div>
+
+        <div id="javascript-code" class="tab code-wrapper d-none h-100">
+            <a id="import-js-library" class="code-import text-white" href="#popup"> import javascript</a>
+            <div id="javascript-code-editor" class="h-100"></div>
+        </div>
+
+        <div id="css-code" class="tab code-wrapper d-none h-100">
+            <a id="import-css-framework" class="code-import text-white" href="#popup"> import css</a>
+            <div id="css-code-editor" class="h-100"></div>
+        </div>
+
         <div id="rp-notebook">loading python in your browser...</div>
     </div>
 
+    <!-- popup forms -->
+    <div id="popup" data-type="python" class="overlay">
+        <div class="popup">
+            <div id="popup-header">Header Placeholder</div>
+            <a class="popup-close" href="#">&times;</a>
+            <div class="popup-content mt-1">
+                <input type="url" name="popup-url" id="popup-url">
+                <button id="popup-import" class="btn bg-black">import</button>
+            </div>
+        </div>
+    </div>
+
     <!-- errors and keyboard shortcuts -->
     <div class="split-view">
-        <div class="mt-1">
+        <div>
             <div class="header">Error(s):</div>
             <div id="error"></div>
         </div>
-        <div class="mt-1 gray">
+        <div class="gray">
             <div class="header">Keyboard Shortcuts:</div>
             <div>
                 <div>Run code: 'Ctrl-Enter' or 'Cmd-Enter'</div>
diff --git a/wasm/notebook/src/style.css b/wasm/notebook/src/style.css
index 1f46aed51..db2b88c5c 100644
--- a/wasm/notebook/src/style.css
+++ b/wasm/notebook/src/style.css
@@ -4,7 +4,16 @@ body {
 
 .header {
     font-family: 'Sen', sans-serif;
-    ;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0 0 10px;
 }
 
 .d-flex {
@@ -15,39 +24,34 @@ body {
     display: none;
 }
 
+.p-relative {
+    position: relative;
+}
+
 .mr-1 {
     margin-right: 1rem;
 }
 
-.mt-1 {
-    margin-top: 1rem;
+.mr-px-5 {
+    margin-right: 5px;
 }
 
 .p-1 {
     padding: 1rem;
 }
 
-.bg-light {
-    background-color: #f7f7f9;
+.h-100 {
+    height: 100% !important;
 }
 
-mark {
-    background-color: #000;
+.vertical-align-middle {
+    vertical-align: middle;
+}
+
+.text-white {
     color: #fff;
 }
 
-.nav-bar {
-    border-bottom: 2px solid #F74C00;
-    display: flex;
-    position: sticky;
-    top: 0px;
-    background-color: #fff;
-    z-index: 99;
-}
-
-.nav-bar div {
-    width: 300px;
-}
 
 .item-center {
     flex-grow: 1;
@@ -58,6 +62,32 @@ mark {
     text-align: right;
 }
 
+.text-black {
+    color: #000;
+}
+
+.bg-black {
+    background-color: #000;
+}
+
+.nav-bar {
+    border-bottom: 2px solid #f74c00;
+    display: flex;
+    position: sticky;
+    top: 0px;
+    background-color: #fff;
+    z-index: 10;
+}
+
+
+.text-orange {
+    color: #f74c00;
+}
+
+.bg-orange {
+    background-color: #f74c00;
+}
+
 .split-view {
     display: flex;
     justify-content: space-between;
@@ -71,79 +101,136 @@ mark {
     height: calc(90vh - 60px);
 }
 
+.CodeMirror , .CodeMirror-wrap {
+    height: 100% !important;
+}
 #rp-notebook {
     font-size: 1rem;
     padding: 10px;
     overflow-y: scroll;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-    margin: 0 0 10px;
-}
-
 #rp-notebook p {
     margin: 0;
 }
 
-.mspace.newline {
-    height: 20px;
-}
-
 .CodeMirror {
     height: 100% !important;
-    border-right: 4px solid #f7f7f9;
 }
 
-#run-btn,
-.btn-secondary {
-    border: 0px;
-    color: white;
+.nav-bar-links a {
+    outline: none;
+    text-decoration: none;
+    padding: 2px 5px;
     cursor: pointer;
-    font-size: 1rem;
-    height: 25px;
-    vertical-align: middle;
 }
 
-#run-btn {
-    background-color: #F74C00;
+.nav-bar-links a:visited {
+    background: #fff;
+    color: #000;
 }
 
-input[type="url"] {
+.nav-bar-links a:focus,
+.nav-bar-links a:hover,
+.nav-bar-links a:active {
+    background: #f1f1f1;
+    color: #000;
+}
+
+.nav-bar-links a:first-child {
+    background: #000;
+    color: #fff;
+    border: 1px solid #000;
+}
+
+.nav-bar-links a:last-child {
+    background: #f74c00;
+    color: #fff;
+    border: 1px solid #f74c00;
+}
+
+.code-import {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    font-size: 0.9rem;
+    z-index: 3;
+}
+
+input[type='url'] {
     border: 1px solid black;
     border-radius: 0px;
-    width: 55%;
-    margin: 5px 0px 5px 0px;
+    width: 85%;
     font-size: 0.9rem;
     padding: 4px;
     font-family: monospace;
 }
 
-.url-container {
-    padding: 10px;
-    background-color: white;
-}
-
-.btn-secondary {
-    background-color: #000;
-}
-
 #error {
-    color: tomato;
+    color: #f74c00;
     margin-top: 10px;
     font-family: monospace;
     white-space: pre;
 }
 
-#code-wrapper {
+.code-wrapper {
     position: relative;
+    border-right: 1px solid rgb(221, 221, 221);
 }
 
-.gray {
-    color: gray;
-}
\ No newline at end of file
+
+/* css popup */
+.overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    visibility: hidden;
+    opacity: 0;
+    z-index: 15;
+}
+
+.overlay:target {
+    visibility: visible;
+    opacity: 1;
+}
+
+.popup {
+    margin: 40px auto;
+    padding: 20px;
+    background: #fff;
+    border: 1px solid #000;
+    width: 50%;
+    position: relative;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+}
+
+.popup h2 {
+    margin-top: 0;
+}
+
+.popup .popup-close {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #000;
+}
+
+.popup .popup-content {
+    max-height: 30%;
+    overflow: auto;
+}
+
+@media screen and (max-width: 700px) {
+    .box {
+        width: 70%;
+    }
+
+    .popup {
+        width: 70%;
+    }
+}