wasm/notebook, responsive layout on mobile

mireille-raad · mireille-raad · commit 85e5486f93f4 · 2020-12-08T19:40:33.000-05:00
diff --git a/wasm/notebook/src/index.ejs b/wasm/notebook/src/index.ejs
@@ -12,7 +12,7 @@
 <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="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>
@@ -21,26 +21,28 @@
    
     <!-- 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="d-md-none 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;
 }
@@ -241,6 +244,13 @@ input[type='url'] {
     overflow: auto;
 }
 
+@media screen and (min-width: 768px) {
+    .md-flex-grow {
+        flex-grow: 1;
+    }
+    
+}
+
 @media screen and (max-width: 768px) {
     .box {
         width: 70%;
@@ -254,4 +264,15 @@ input[type='url'] {
         display: none;
     }
 
+    .d-sm-flex-direction-column {
+        flex-direction: column;
+    }
+
+    .sm-mt-5px {
+        margin-top: 5px !important;
+    }
+
+    #run-btn {
+        width: 45px;
+    }
 }
