marva
/
sumorobot-web
1
0
Fork 1
Code Issues Pull Requests Activity

update control panel for mobile

This commit is contained in:
Silver Kuusik 2018-01-17 21:17:05 +01:00
parent d316952fba
commit f281593f1f
1 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
styles.css
View File

@ -5,19 +5,19 @@ html, body {
body { body {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
font-family: sans-serif;
} }
/* the whole interface is in the table */ /* the whole interface is in the table */
table.blockly-table { table.blockly-table {
height: 95%; height: 95%;
width: 100%; width: 100%;
} }
/* spans */ /* 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 */
input.has-error { input.has-error {
border-color: #a94442 !important; border-color: #a94442 !important;
} }
@ -79,51 +79,8 @@ div#stream {
height: 100%; height: 100%;
display: none; 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 */ /* for desktop screen */
@media screen and (min-width: 768px) { @media screen and (min-width: 1000px) {
/* logo object */ /* logo object */
object.logo { object.logo {
width: 45%; width: 45%;
@ -142,10 +99,11 @@ div#stream {
font-size: 2vw; font-size: 2vw;
padding: 0.5vw 0.5vw !important; padding: 0.5vw 0.5vw !important;
} }
/* robot connect button */ /* robot connect button container */
div.btn-group-robot { div.btn-group-robot {
width: 35%; width: 35%;
} }
/* robot connect button */
a.btn-robot-go { a.btn-robot-go {
width: 100%; width: 100%;
font-size: 10vw !important; font-size: 10vw !important;
@ -165,6 +123,50 @@ div#stream {
div#blocklyCode { div#blocklyCode {
width: 100%; width: 100%;
height: 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;
} }
} }