mirror of
https://github.com/RustPython/RustPython.git
synced 2026-10-28 18:59:04 +08:00
update UI and clean up css a bit
This commit is contained in:
Mireille Raad committed
1 parent
48bb335ae6
commit
d75aa1b47a
2 files changed
+195
-77
No files matched your search
+48
-17
@@ -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 ► </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 ► </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="#">×</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>
|
||||
|
||||
+147
-60
@@ -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;
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user