Merge pull request #2363 from mainsail-org/mir/notebook-responsive

coolreader18 · web-flow · commit 472e53542b2a · 2020-12-08T20:31:01.000-06:00
wasm/notebook: mobile and tablet responsive layout
diff --git a/wasm/notebook/src/index.ejs b/wasm/notebook/src/index.ejs
@@ -12,35 +12,37 @@
 <body>
 
 <div class="d-flex">
-    <div class="header item-center">RustPython 🐍 😱 🤘</div>
+    <div class="header md-flex-grow text-center">RustPython 🐍 😱 🤘</div>
     <div>
-        <a target="_blank" class="mr-px-5 text-black" href="https://github.com/RustPython/RustPython/tree/master/wasm/notebook">how this works</a>
+        <a target="_blank" class="d-md-none mr-px-5 text-black" href="https://github.com/RustPython/RustPython/tree/master/wasm/notebook">how this works</a>
         <a target="_blank" class="text-black" href="https://github.com/RustPython/"> github</a>
     </div>
 </div>
    
     <!-- navigation bar -->
     <div class="nav-bar mt-px-5">
-        <div class="nav-bar-links d-flex d-flex-space-between">
-            <div class="d-flex">
-                <a href="#" id="run-btn" class="bg-orange text-white mr-px-5">run &#9658; </a>
-                <ul class="list-inline" id="buffers-list"></ul>
-                <a href="#" id="new-tab" class="bg-light mr-px-5 text-black">new tab</a>
-                <a href="#popup" id="import-code" class="bg-light mr-px-5 text-black">import code</a>
+        <div class="nav-bar-links d-flex d-flex-space-between d-sm-flex-direction-column">
+            <div class="d-flex d-sm-flex-direction-column ">
+                <a href="#" id="run-btn" class="bg-orange mr-px-5 text-white">run &#9658; </a>
+                <ul class="list-inline sm-mt-5px" id="buffers-list"></ul>
+                <ul class="list-inline sm-mt-5px">
+                    <li class="bg-light mr-px-5"> <a href="#" class="text-black" id="new-tab">new tab</a></li>
+                    <li class="bg-light mr-px-5"><a href="#popup" class="text-black" id="import-code">import code</a></li>
+                </ul>
             </div>
-            
-            <div class="nav-bar-links d-flex">
-                <a href="#" id="split-view" class="bg-light mr-px-5 text-black">split view</a>
-                <a href="#" id="default-view" class="bg-light mr-px-5  text-black">default view</a>
-                <a href="#" id="reader-view" class="bg-light text-black">reader view</a>
+            <div class="nav-bar-links d-flex sm-mt-5px">
+                <ul class="list-inline ">
+                    <li class="d-md-none bg-light"><a href="#" id="split-view" class="mr-px-5 text-black">split view</a></li>
+                    <li class="d-md-none bg-light"><a href="#" id="default-view" class="mr-px-5  text-black">default view</a></li>
+                    <li class="d-md-none bg-light"><a href="#" id="reader-view" class="text-black">reader view</a></li>
+                </ul>
             </div>
-            
         </div>
     </div>
 
     <!-- code editor and output display -->
     <!-- split view -->
-    <div class="split-view full-height">
+    <div class="split-view full-height d-sm-flex-direction-column ">
         <div id="primary-editor"></div>
         <div id="secondary-editor" class="d-none">
             <select class="item-right" id="buffers-selection"></select>
diff --git a/wasm/notebook/src/style.css b/wasm/notebook/src/style.css
@@ -59,9 +59,8 @@ h6 {
     color: #fff;
 }
 
-.item-center {
+.flex-grow {
     flex-grow: 1;
-    text-align: center;
 }
 
 .item-right {
@@ -74,6 +73,10 @@ h6 {
     text-align: right;
 }
 
+.text-center {
+    text-align: center;
+}
+
 .text-black {
     color: #1f2430;
 }
@@ -172,7 +175,7 @@ ul.list-inline li {
 input[type='url'] {
     border: 1px solid black;
     border-radius: 0px;
-    width: 85%;
+    width: 75%;
     font-size: 1rem;
     padding: 4px;
     font-family: monospace;
@@ -241,12 +244,35 @@ input[type='url'] {
     overflow: auto;
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (min-width: 768px) {
+    .md-flex-grow {
+        flex-grow: 1;
+    }
+    
+}
+
+@media screen and (max-width: 768px) {
     .box {
         width: 70%;
     }
 
     .popup {
         width: 70%;
     }
+
+    .d-md-none {
+        display: none;
+    }
+
+    .d-sm-flex-direction-column {
+        flex-direction: column;
+    }
+
+    .sm-mt-5px {
+        margin-top: 5px !important;
+    }
+
+    #run-btn {
+        width: 45px;
+    }
 }
