forked from marva/sumorobot-web
update control panel for mobile
This commit is contained in:
parent
d316952fba
commit
f281593f1f
98
styles.css
98
styles.css
@ -5,19 +5,19 @@ html, body {
|
||||
body {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
/* the whole interface is in the table */
|
||||
table.blockly-table {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
/* spans */
|
||||
/* robot ID label error */
|
||||
span.has-error {
|
||||
color: #a94442 !important;
|
||||
border-color: #a94442 !important;
|
||||
background-color: #f2dede !important;
|
||||
}
|
||||
/* robot ID input error */
|
||||
input.has-error {
|
||||
border-color: #a94442 !important;
|
||||
}
|
||||
@ -79,51 +79,8 @@ div#stream {
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
/* for mobile and tablet screen */
|
||||
@media screen and (max-width: 1000px) {
|
||||
/* logo object */
|
||||
object.logo {
|
||||
width: 100%;
|
||||
}
|
||||
/* control panel robot name input */
|
||||
div.input-group {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
span.input-group-addon {
|
||||
font-size: 7vw;
|
||||
padding: 0.5vw 0.5vw !important;
|
||||
}
|
||||
input.form-control {
|
||||
font-size: 7vw;
|
||||
padding: 0.5vw 0.5vw !important;
|
||||
}
|
||||
/* robot connect button */
|
||||
div.btn-group-robot {
|
||||
width: 100%;
|
||||
}
|
||||
a.btn-robot-go {
|
||||
width: 100%;
|
||||
font-size: 30vw !important;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
/* Blockly workspace */
|
||||
td#blocklyArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Blockly code area */
|
||||
td#blocklyCodeArea {
|
||||
display: none;
|
||||
}
|
||||
/* ace editor */
|
||||
div#blocklyCode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* for desktop screen */
|
||||
@media screen and (min-width: 768px) {
|
||||
@media screen and (min-width: 1000px) {
|
||||
/* logo object */
|
||||
object.logo {
|
||||
width: 45%;
|
||||
@ -142,10 +99,11 @@ div#stream {
|
||||
font-size: 2vw;
|
||||
padding: 0.5vw 0.5vw !important;
|
||||
}
|
||||
/* robot connect button */
|
||||
/* robot connect button container */
|
||||
div.btn-group-robot {
|
||||
width: 35%;
|
||||
}
|
||||
/* robot connect button */
|
||||
a.btn-robot-go {
|
||||
width: 100%;
|
||||
font-size: 10vw !important;
|
||||
@ -165,6 +123,50 @@ div#stream {
|
||||
div#blocklyCode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
/* for mobile and tablet screen */
|
||||
@media screen and (max-width: 1000px) {
|
||||
/* logo object */
|
||||
object.logo {
|
||||
width: 70%;
|
||||
}
|
||||
/* control panel robot name input */
|
||||
div.input-group {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
span.input-group-addon {
|
||||
font-size: 4.5vw;
|
||||
padding: 0.5vw 0.5vw !important;
|
||||
}
|
||||
input.form-control {
|
||||
font-size: 4.5vw;
|
||||
padding: 0.5vw 0.5vw !important;
|
||||
}
|
||||
/* robot connect button container */
|
||||
div.btn-group-robot {
|
||||
width: 100%;
|
||||
}
|
||||
/* robot connect button */
|
||||
a.btn-robot-go {
|
||||
width: 100%;
|
||||
font-size: 18vw !important;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
/* Blockly workspace */
|
||||
td#blocklyArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Blockly code area */
|
||||
td#blocklyCodeArea {
|
||||
display: none;
|
||||
}
|
||||
/* ace editor */
|
||||
div#blocklyCode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user