mirror of
https://github.com/pebble-dev/clay.git
synced 2026-08-27 20:36:33 -04:00
styling for input, toggle, color, select and button.
This commit is contained in:
Keegan
+45
-49
@@ -2,17 +2,46 @@
|
||||
/* eslint-disable quotes */
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
"type": "heading",
|
||||
"id": "main-heading",
|
||||
"value": "My Cool App",
|
||||
"size": 1
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"value": "By Keegan Lillo - <a href=\"http://lillo.me\">Lillo.me</a>"
|
||||
},
|
||||
{
|
||||
"type": "section",
|
||||
"items": [
|
||||
{
|
||||
"type": "heading",
|
||||
"id": "main-heading",
|
||||
"value": "My Cool App"
|
||||
"value": "Settings"
|
||||
},
|
||||
{
|
||||
"type": "footer",
|
||||
"value": "By Keegan Lillo - <a href=\"http://lillo.me\">Lillo.me</a>"
|
||||
"type": "input",
|
||||
"app_key": "email",
|
||||
"value": "",
|
||||
"label": "Email",
|
||||
"attributes": {
|
||||
"placeholder": "eg: name@domain.com",
|
||||
"limit": 10,
|
||||
"required": "required",
|
||||
type: "email"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"app_key": "like_stuff",
|
||||
"label": "Enable Cool Stuff",
|
||||
"value": false
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"app_key": "background",
|
||||
"value": "0xFF0000",
|
||||
"label": "Background Color"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -20,58 +49,25 @@ module.exports = [
|
||||
"type": "section",
|
||||
"items": [
|
||||
{
|
||||
"type": "subheading",
|
||||
"type": "heading",
|
||||
"value": "Settings"
|
||||
},
|
||||
{
|
||||
"type": "block",
|
||||
"items": [
|
||||
{
|
||||
"type": "input",
|
||||
"app_key": "greeting",
|
||||
"value": "Hello",
|
||||
"label": "Greeting",
|
||||
"attributes": {
|
||||
"placeholder": "Enter a \"greeting\" >",
|
||||
"limit": 10,
|
||||
"required": "required"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"app_key": "like_stuff",
|
||||
"label": "Enable Cool Stuff",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"id": "flavor",
|
||||
"type": "select",
|
||||
"app_key": "flavor",
|
||||
"value": "grape",
|
||||
"label": "Favorite Flavor",
|
||||
"options": [
|
||||
{ "label": "Berry", "value": "berry" },
|
||||
{ "label": "Grape", "value": "grape" },
|
||||
{ "label": "Banana", "value": "banana" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"app_key": "background",
|
||||
"value": "0xFF0000",
|
||||
"label": "Background Color"
|
||||
}
|
||||
"id": "flavor",
|
||||
"type": "select",
|
||||
"app_key": "flavor",
|
||||
"value": "grape",
|
||||
"label": "Favorite Flavor",
|
||||
"options": [
|
||||
{ "label": "Berry things", "value": "berry" },
|
||||
{ "label": "Grape", "value": "grape" },
|
||||
{ "label": "Banana", "value": "banana" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "section",
|
||||
"items": [
|
||||
{
|
||||
"type": "submit",
|
||||
"value": "Save"
|
||||
}
|
||||
]
|
||||
"type": "submit",
|
||||
"label": "Save"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -4,14 +4,11 @@
|
||||
<title>Pebble Clay Development Page</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<!--<link rel="stylesheet" href="../vendor/pebble-slate/dist/css/slate.min.css">-->
|
||||
<link rel="stylesheet" href="../tmp/config-page.css">
|
||||
</head>
|
||||
<body>
|
||||
<form id="main-form" class="inputs"></form>
|
||||
<script src="../tmp/dev.js"></script>
|
||||
<script src="../tmp/config-page.js"></script>
|
||||
<!--<script src="../src/scripts/vendor/minified/minified.min.js"></script>-->
|
||||
<!--<script src="../vendor/pebble-slate/dist/js/slate.min.js"></script>-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+11
@@ -4,3 +4,14 @@ window.returnTo = '$$RETURN_TO$$';
|
||||
window.clayConfig = require('./config.js');
|
||||
window.claySettings = {};
|
||||
window.customFn = require('./custom-fn.js');
|
||||
|
||||
var platform = window.navigator.userAgent.match('Android') ? 'android' : 'ios';
|
||||
document.documentElement.classList.add('platform-' + platform);
|
||||
|
||||
window.expand = function(obj) {
|
||||
obj.size = 5;
|
||||
};
|
||||
|
||||
function unexpand(obj) {
|
||||
obj.size = 1;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Pebble Clay Development Page</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
if (!String.prototype.repeat) {
|
||||
String.prototype.repeat = function(count) {
|
||||
'use strict';
|
||||
if (this == null) {
|
||||
throw new TypeError('can\'t convert ' + this + ' to object');
|
||||
}
|
||||
var str = '' + this;
|
||||
count = +count;
|
||||
if (count != count) {
|
||||
count = 0;
|
||||
}
|
||||
if (count < 0) {
|
||||
throw new RangeError('repeat count must be non-negative');
|
||||
}
|
||||
if (count == Infinity) {
|
||||
throw new RangeError('repeat count must be less than infinity');
|
||||
}
|
||||
count = Math.floor(count);
|
||||
if (str.length == 0 || count == 0) {
|
||||
return '';
|
||||
}
|
||||
// Ensuring count is a 31-bit integer allows us to heavily optimize the
|
||||
// main part. But anyway, most current (August 2014) browsers can't handle
|
||||
// strings 1 << 28 chars or longer, so:
|
||||
if (str.length * count >= 1 << 28) {
|
||||
throw new RangeError('repeat count must not overflow maximum string size');
|
||||
}
|
||||
var rpt = '';
|
||||
for (;;) {
|
||||
if ((count & 1) == 1) {
|
||||
rpt += str;
|
||||
}
|
||||
count >>>= 1;
|
||||
if (count == 0) {
|
||||
break;
|
||||
}
|
||||
str += str;
|
||||
}
|
||||
return rpt;
|
||||
}
|
||||
}
|
||||
|
||||
var test = encodeURIComponent(window.btoa('<html><body>' + '1 '.repeat(389550 / 2) + '</body></html>'));
|
||||
alert(test.length);
|
||||
document.write('<iframe src="data:text/html;base64,' + test + '">');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user