update bootstrap and add robot id tooltip

This commit is contained in:
Silver Kuusik 2018-08-17 18:34:52 +02:00
parent 0842926b35
commit a80cc89403
7 changed files with 41 additions and 16 deletions

8
assets/css/bootstrap.min.css vendored Normal file → Executable file

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,6 @@
font-family: Orbitron; font-family: Orbitron;
src: url(fonts/orbitron-medium-webfont.woff); src: url(fonts/orbitron-medium-webfont.woff);
} }
html, body { html, body {
height: 100%; height: 100%;
font-family: Orbitron !important; font-family: Orbitron !important;
@ -24,17 +23,21 @@ table.blockly-table {
td, tr { td, tr {
padding: 0px; padding: 0px;
} }
/* robot ID label error */ /* Tooltip */
.tooltip.show {
opacity: 1 !important;
}
/* Robot ID label error */
span.has-error { span.has-error {
color: #a94442 !important; color: #a94442 !important;
border-color: #a94442 !important; border-color: #a94442 !important;
background-color: #f2dede !important; background-color: #f2dede !important;
} }
/* robot ID input error */ /* Robot ID input error */
input.has-error { input.has-error {
border-color: #a94442 !important; border-color: #a94442 !important;
} }
/* robot connect button */ /* Robot connect button */
a.btn-robot-go, a.btn-robot-go:hover { a.btn-robot-go, a.btn-robot-go:hover {
color: #3768d8; color: #3768d8;
} }
@ -129,7 +132,7 @@ div#readOnlyBlocklyCode {
margin-right: auto; margin-right: auto;
} }
/* robot ID label */ /* robot ID label */
span.input-group-addon { span.input-group-text {
font-size: 2vw; font-size: 2vw;
font-weight: bold; font-weight: bold;
padding: 0.5vw 1vw !important; padding: 0.5vw 1vw !important;

BIN
assets/img/robot_id.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

View File

@ -11,6 +11,12 @@ var codingEnabled = false;
var liveStreamVisible = false; var liveStreamVisible = false;
window.addEventListener('load', function() { window.addEventListener('load', function() {
// Activate tooltips
$('[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
// Set the robot ID from the localstorage // Set the robot ID from the localstorage
$('#robot-id').val(getLocalStorageItem('sumorobot.robotId')); $('#robot-id').val(getLocalStorageItem('sumorobot.robotId'));
@ -194,8 +200,8 @@ window.addEventListener('load', function() {
// Robot GO button listener // Robot GO button listener
$('.btn-robot-go').click(function() { $('.btn-robot-go').click(function() {
// Extract and validate the selected robot ID // Get and validate the selected robot ID
var robotId = $('#robot-id').val().trim(); var robotId = $('#robot-id').val().trim().toLowerCase();
if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) { if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) {
$('#robot-id, #robot-label').addClass('has-error'); $('#robot-id, #robot-label').addClass('has-error');
return; return;

7
assets/js/min/bootstrap.min.js vendored Executable file

File diff suppressed because one or more lines are too long

5
assets/js/min/popper.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Sumorobot</title> <title>Sumorobot</title>
<!-- css --> <!-- css -->
<link rel="stylesheet" href="assets/css/styles.css"> <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/cookieconsent.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/cookieconsent.min.css">
<!-- favicon --> <!-- favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
@ -14,13 +14,15 @@
<script src="assets/js/cookie.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/cookie.js" type="text/javascript" charset="utf-8"></script>
<!-- other --> <!-- other -->
<script src="assets/js/min/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/min/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/min/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/min/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Google Blockly --> <!-- Google Blockly -->
<script src="assets/blockly/blockly_compressed.js" type="text/javascript" charset="utf-8"></script> <script src="assets/blockly/blockly_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/blockly/blocks_compressed.js" type="text/javascript" charset="utf-8"></script> <script src="assets/blockly/blocks_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/blockly/python_compressed.js" type="text/javascript" charset="utf-8"></script> <script src="assets/blockly/python_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/blockly/msg/js/en.js" type="text/javascript" charset="utf-8"></script> <script src="assets/blockly/msg/js/en.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/sumorobot.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/sumorobot.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/ace.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/blockly.js" type="text/javascript" charset="utf-8"></script> <script src="assets/js/blockly.js" type="text/javascript" charset="utf-8"></script>
@ -34,8 +36,10 @@
<div id="panel"> <div id="panel">
<img class="logo" src="assets/img/logo.png" alt="logo"> <img class="logo" src="assets/img/logo.png" alt="logo">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="robot-label">robot ID</span> <div class="input-group-prepend">
<input type="text" class="form-control" id="robot-id" placeholder="xxxxxx" /> <span class="input-group-text" id="robot-label">Robot ID</span>
</div>
<input type="text" class="form-control" id="robot-id" placeholder="xxxxxx" data-toggle="tooltip" title="<img width='100%' src='assets/img/robot_id.jpg' />" />
</div> </div>
<div class="btn-group btn-group-robot" role="group" aria-label="robots"> <div class="btn-group btn-group-robot" role="group" aria-label="robots">
<a href="#" class="btn btn-lg btn-robot-go">GO!</a> <a href="#" class="btn btn-lg btn-robot-go">GO!</a>