16mm
/
intval3
1
0
Fork 0
Code Issues 1 Pull Requests 9 Projects Releases Wiki Activity

Style the buttons and inputs to fill width of screen.

This commit is contained in:
mmcw-dev 2017-10-21 22:01:46 -04:00
parent 96bd6050d3
commit ccdae964ee
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/www/index.html
View File

@ -4,15 +4,23 @@
<title>intval 3</title> <title>intval 3</title>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no"> <meta name = "viewport" content = "width = 320, initial-scale = 1.0, user-scalable = no">
<style> <style>
html,body{ html,body{
background: #212121; background: #212121;
height: 100%;
padding: 0;
margin: 0;
} }
*{ *{
color: #fff; color: #fff;
font-family: 'Arial Neue', Helvetical, Arial, sans-serif; font-family: 'Arial Neue', Helvetical, Arial, sans-serif;
} }
body{
}
#app{
padding: 10% 0;
}
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch { .switch {
position: relative; position: relative;
@ -72,6 +80,7 @@
border-radius: 50%; border-radius: 50%;
} }
input[type=number]{ input[type=number]{
width: 80%;
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
@ -80,9 +89,12 @@
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
margin: 5px 0; margin: 5px 0;
padding: 5px 10px;
box-sizing: border-box;
} }
button{ button{
border: 1px solid #fff; width: 80%;
border: 2px solid #fff;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
@ -91,6 +103,9 @@
box-shadow: none; box-shadow: none;
outline: none; outline: none;
margin: 5px 0; margin: 5px 0;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
} }
button:focus{ button:focus{
background-color: #20ce45; background-color: #20ce45;
@ -100,26 +115,28 @@
</style> </style>
</head> </head>
<body> <body>
<div> <div id="app">
<div>Direction</div> <div>
<label class="switch" onclick="setDir();"> <div>Direction</div>
<input type="checkbox" id="dir"> <label class="switch" onclick="setDir();">
<span class="slider round"></span> <input type="checkbox" id="dir">
</label> <span class="slider round"></span>
</div> </label>
<div> </div>
<div>Exposure (ms)</div> <div>
<input type="number" id="exposure" value="630" min="630" step="1" /> <div>Exposure (ms)</div>
</div> <input type="number" id="exposure" value="630" min="630" step="1" />
<div> </div>
<div>Delay (ms)</div> <div>
<input type="number" id="delay" value="0" min="0" step="1" /> <div>Delay (ms)</div>
</div> <input type="number" id="delay" value="0" min="0" step="1" />
<div> </div>
<button id="seq">Sequence</button> <div>
</div> <button id="seq">Sequence</button>
<div> </div>
<button id="frame" onclick="frame();">Frame</button> <div>
<button id="frame" onclick="frame();">Frame</button>
</div>
</div> </div>
<script> <script>
/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */ /*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
@ -150,6 +167,7 @@ null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"
}; };
web.setDir = function () { web.setDir = function () {
var dir = $('#dir').val(); var dir = $('#dir').val();
console.dir(dir);
}; };
web.setDirSuccess = function (res) { web.setDirSuccess = function (res) {
'use strict'; 'use strict';