+ LaserSpirograph
- Esp8266 laserspiro controller
+
+ Makros
+
+
+
+
+
WiFi Settings
-
-
-
+
+
+
+
+
+ Debug
+
+ Free Heap
+
+last uri:
+
+ last respone:
+
+
+
+
+
+
+ +
- last uri:
-
- last respone:
-
-
-
\ No newline at end of file
diff --git a/data/scripts.js b/data/scripts.js
index 6c1f911..4468284 100644
--- a/data/scripts.js
+++ b/data/scripts.js
@@ -73,7 +73,7 @@ var $ = function(selector){
return $(this.parentElement);
}
}
-
+
// indicates that this element is a $ function
element.is$ = function(){
return true;
@@ -165,6 +165,12 @@ var $ = function(selector){
let debugResponse = (data) => {
$('#response').html(data);
};
+ Sui.select('.collapsible').forEach((container) => {
+ container.querySelector('.heading').addEventListener('click', (item) => {
+ console.log(container);
+ container.classList.toggle('open');
+ });
+ });
[{
api: 'MOTOR',
method: 'POST',
diff --git a/data/styles.css b/data/styles.css
index 88db805..4c4dc7a 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -1,6 +1,7 @@
form .form-row {
display: flex;
justify-content: flex-end;
+ flex-wrap: wrap;
padding: .2em;
}
form .form-row > label {
@@ -13,10 +14,6 @@ form .form-row > input {
form .form-row > span {
flex: 2;
}
-form .form-row > input,
-form .form-row > button {
- padding: .5em;
-}
form .form-row input[type="checkbox"] {
margin-top: 12px;
}
@@ -41,26 +38,28 @@ form .form-row input[type="checkbox"] {
.sui {
background: #000000;
color: #0eb8c0;
+}
+.sui * {
margin: 0;
padding: 0;
}
-.sui ul {
- padding: 0;
+.sui .hidden {
+ display: none;
}
-.sui ul li {
- margin: 0 0 0 0;
+.sui .shown {
+ display: block;
}
-.sui p {
- padding: 0;
- margin: 0;
+.sui input,
+.sui button {
+ padding: .5em;
}
.sui > .content {
- padding: 32px;
+ padding: 16px;
}
.sui > .content .heading {
font-size: 1.2em;
- margin-bottom: 16px;
display: block;
+ margin-bottom: 16px;
}
.sui > .content .container {
background: #333333;
@@ -69,26 +68,41 @@ form .form-row input[type="checkbox"] {
border: solid 1px #555555;
margin-bottom: 8px;
}
-.sui > .content input[type="text"] {
+.sui > .content .container.collapsible > .heading {
+ margin-bottom: 0;
+}
+.sui > .content .container.collapsible > .heading:hover {
+ cursor: pointer;
+}
+.sui > .content .container.collapsible .content {
+ display: none;
+}
+.sui > .content .container.collapsible.open > .heading {
+ margin-bottom: 16px;
+}
+.sui > .content .container.collapsible.open .content {
+ display: block;
+}
+.sui > .content input[type="text"],
+.sui > .content input[type="password"] {
height: 16px;
+ background: transparent;
+ border: none;
+ color: #eeeeee;
+}
+.sui > .content input[type="text"]:focus,
+.sui > .content input[type="password"]:focus,
+.sui > .content input[type="text"]:hover,
+.sui > .content input[type="password"]:hover {
+ outline: none;
+ border-bottom: solid 1px #097479;
+ box-shadow: 3px #097479;
}
.sui > .content input[type="checkbox"] {
transform: scale(2);
}
-.sui > .content .form-row > button {
+.sui > .content button {
background: #097479;
color: white;
border: 0;
}
-/*
-.spiro-control {
- label {
- width: 10%;
- display: inline-block;
- }
- input[type="range"] {
- width: 80%;
- display: inline-block;
- }
-}
-*/
diff --git a/frontend/pages/index.html b/frontend/pages/index.html
index 87735da..7f22ee7 100644
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -1,66 +1,81 @@
+ -
-
- -
-
-
+
+ Makros
+
+
+
+
+
WiFi Settings
-
-
-
+
+
+
+
+
+ Debug
+
+ Free Heap
+
+last uri:
+
+ last respone:
+
+
+
+
+
+
+ +
- last uri:
-
- last respone:
-
-
-
\ No newline at end of file
diff --git a/frontend/scripts/pmjq.js b/frontend/scripts/pmjq.js
index 896d9a6..35740e6 100644
--- a/frontend/scripts/pmjq.js
+++ b/frontend/scripts/pmjq.js
@@ -73,7 +73,7 @@ var $ = function(selector){
return $(this.parentElement);
}
}
-
+
// indicates that this element is a $ function
element.is$ = function(){
return true;
diff --git a/frontend/scripts/zMain.js b/frontend/scripts/zMain.js
index 306a7cb..ef53a94 100644
--- a/frontend/scripts/zMain.js
+++ b/frontend/scripts/zMain.js
@@ -2,6 +2,12 @@ Sui.ready(() => {
let debugResponse = (data) => {
$('#response').html(data);
};
+ Sui.select('.collapsible').forEach((container) => {
+ container.querySelector('.heading').addEventListener('click', (item) => {
+ console.log(container);
+ container.classList.toggle('open');
+ });
+ });
[{
api: 'MOTOR',
method: 'POST',
diff --git a/frontend/styles/form.less b/frontend/styles/form.less
index 576244e..f6a3b6d 100644
--- a/frontend/styles/form.less
+++ b/frontend/styles/form.less
@@ -2,6 +2,7 @@ form {
.form-row {
display: flex;
justify-content: flex-end;
+ flex-wrap: wrap;
padding: .2em;
}
@@ -16,10 +17,6 @@ form {
.form-row > span {
flex: 2;
}
- .form-row > input,
- .form-row > button {
- padding: .5em;
- }
.form-row input[type="checkbox"] {
margin-top: 12px;
}
diff --git a/frontend/styles/main.less b/frontend/styles/main.less
index 15a5528..75888c8 100644
--- a/frontend/styles/main.less
+++ b/frontend/styles/main.less
@@ -19,27 +19,29 @@
background: @color-black;
color: @color-main-light;
- margin: 0;
- padding: 0;
-
- ul {
+ * {
+ margin: 0;
padding: 0;
- li {
- margin: 0 0 0 0;
- }
}
- p {
- padding: 0;
- margin: 0;
+ .hidden {
+ display: none;
+ }
+ .shown {
+ display: block;
+ }
+
+ input,
+ button {
+ padding: .5em;
}
> .content {
- padding: @default-padding * 2;
+ padding: @default-padding;
.heading {
font-size: 1.2em;
- margin-bottom: @default-margin;
display: block;
+ margin-bottom: @default-margin;
}
.container {
background: @color-container;
@@ -47,38 +49,45 @@
border-radius: @default-border-radius;
border: solid 1px @default-border-color;
margin-bottom: @default-margin-small;
+ &.collapsible {
+ > .heading {
+ margin-bottom: 0;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ .content {
+ .hidden;
+ }
+ &.open {
+ > .heading {
+ margin-bottom: @default-margin;
+ }
+ .content {
+ .shown;
+ }
+ }
+ }
}
- input[type="text"] {
+ input[type="text"], input[type="password"] {
height: @input-text-height;
+ background: transparent;
+ border: none;
+ color: @color-white;
+ &:focus, &:hover {
+ outline: none;
+ border-bottom: solid 1px @color-main;
+ box-shadow: 3px @color-main;
+ }
}
input[type="checkbox"] {
transform: scale(@input-checkbox-scale);
}
- .form-row > button {
+ button {
background: @color-main;
color: white;
border: 0;
}
}
- .sidebar {
- .item {
-
- }
- }
}
-
-.settings {
-}
-/*
-.spiro-control {
- label {
- width: 10%;
- display: inline-block;
- }
- input[type="range"] {
- width: 80%;
- display: inline-block;
- }
-}
-*/
\ No newline at end of file
-
-
- -