Merge pull request #26 from ducklord420/master

UI Improvements

Author: WilliamMayor

README.rst

@@ -14,17 +14,15 @@ This editor works with any modern web browser.
 In addition to cloning the repository it is required to retrieve the GIT
 submodules::
 
-    git clone https://github.com/bbcmicrobit/PythonEditor
+    git clone https://github.com/ducklord420/PythonEditor.git
     cd PythonEditor
     git submodule update --init --recursive
 
 **THIS NEEDS TO BE DONE BEFORE ANYTHING ELSE, OR IT WILL NOT WORK.**
 
 Assuming you have Python 3 installed you can serve the editor like this::
 
-    $ ./bin/show
-    http://localhost:8000/editor.html
-    Serving HTTP on 0.0.0.0 port 8000 ...
+    py -m http.server --bind 0.0.0.0
 
 As the script tells us, point your browser to http://localhost:8000/editor.html.
 

lib/skulpt/microbit/mb.css

@@ -36,9 +36,8 @@
 	width: 100%;
 	display: block;
 	font-size: 10px;
-	color: #000000;
-	background-color: #FFFFFF;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 5%, rgba(255, 255, 255, 0.6) 95%, rgba(255, 255, 255, 0) 100%);
+	color: #FFFFFF;
+	background-color: #3785ce;
 	text-align: center;
 	transition: all 0.5s;
 
@@ -246,19 +245,19 @@
 
 #mb_pin_type {
 	margin: 10px 0;
-	padding: 0 0 0 10px;
-	background-color: rgba(20, 20, 20, 0.4);
+	padding: 0 0 0 0;
+	color: #FFFFFF;
 }
 
 #mb_pin_type strong { font-weight: 700; }
 #mb_pin_type strong.Analog { color: rgb(7, 7, 207); }
 #mb_pin_type strong.Digital { color: rgb(3, 231, 3); }
-#mb_pin_type strong.Touch { color: #d40d0d; }
+#mb_pin_type strong.Touch { color: #FFFFFF; }
 #mb_pin_type strong.threeVolts { color: #eed814; }
 
 #mb_btn_pin_touch {
 	color: #FFFFFF;
-	background: #d40d0d;
+	background: #3785ce;
 	border-radius: 5px;
 	border: none;
 }

simulator.html

@@ -62,33 +62,23 @@
             </div>
     </div> <!-- END #sim-parameters -->
 
-    
     <div id="sim-btns">
-        <a href="#" id="accel-toggle">
+        <a href="#" id="accel-toggle" title="Accelerometer">
             <div class="status-icon">
                 <i class="fa fa-tachometer" title="accelerometer"></i>
             </div>
-            <span class="sim-tip">
-                Allows you to trigger gestures picked up by the accelerometer
-            </span>
         </a>
 
-        <a href="#" id="thermo-toggle">
+        <a href="#" id="thermo-toggle" title="Thermometer">
             <div class="status-icon">
                 <i class="fa fa-thermometer" title="thermometer"></i>
             </div>
-            <span class="sim-tip">
-                Allows you to adjust the thermometer reading
-            </span>
         </a>
 
-        <a href="#" id="pin-toggle">
+        <a href="#" id="pin-toggle" title="I/O Pins">
             <div class="status-icon">
                 <i class="fa fa-map-pin"></i>
             </div>
-            <span class="sim-tip">
-                Allows you to test functionality using the pins
-            </span>
         </a>
     </div>
 

static/css/simulator-ui.css

@@ -1,8 +1,13 @@
 #sim-wrap {
     height: 655px;
     width: 400px;
-    background: linear-gradient(90deg, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0.6) 5%, rgba(180, 180, 180, 0.6) 95%, rgba(180, 180, 180, 0) 100%);
     font-family: Courier New, Courier, monospace;
+    position: relative;
+    bottom: 7.5px;
+}
+#mb_btn_pin_touch
+{
+    margin-left: 0;
 }
 
 #sim-parameters
@@ -17,7 +22,7 @@
 
 #sim-btns {
     position: fixed;
-    bottom: 145px; left: 10px;
+    bottom: 75px; left: 10px;
     width: 60px;
     display: none;
 }
@@ -46,45 +51,14 @@
     margin: 3px 0;
 }
 
-#sim-btns a .sim-tip {
-    visibility: hidden;
-    max-width: 200px;
-    color: #FFFFFF;
-    background-color: rgb(34, 11, 165);
-    text-align: center;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-family: Arial, Helvetica, sans-serif;
-
-    position: absolute;
-    top: 0%; left: 110%;
-    z-index: 99;
-}
-
-#sim-btns a:hover .sim-tip {
-    visibility: visible;
-    z-index: 99;
-}
-
-#sim-btns a .sim-tip::after {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent rgb(34, 11, 165) transparent transparent;
-}
-
 #sim-btns-toggle {
     height: 40px; width: 40px;
     border-radius: 20px;
     color: white;
     text-align: center;
     padding: 10px;
     position: fixed;
-    bottom: 100px; left: 20px;
+    bottom: 20px; left: 16px;
     cursor: pointer;
     background-color: rgb(68, 202, 226);
     box-sizing: border-box;
@@ -102,14 +76,12 @@
 {
     font-size: 20px;
     position: absolute;
-    left: 10px;
-    bottom: 50px;
+    color: #ffffff;
 }
 
 #thermometer .value span
 {
     font-weight: 600;
-    color: rgba(180, 0, 0, 1);
 }
 /* END Thermometer */