mirrors/RustPython
0
0 Fork 0
mirror of https://github.com/RustPython/RustPython.git synced 2026-10-28 10:44:36 +08:00
Code Activity

wasm/notebook, responsive layout on mobile

Browse Source
This commit is contained in:
Mireille Raad committed 2020-12-08 19:40:33 -05:00
1 parent 22fa80e204
commit 85e5486f93
2 files changed
+39 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wasm/notebook/src/index.ejs
+16 -14
View File
@@ -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>
wasm/notebook/src/style.css
+23 -2
View File
@@ -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;
}
}