From 740e37c5099dd9f20fc526bfdeb8a0f82515cb75 Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Fri, 3 Nov 2017 02:00:12 +0000 Subject: [PATCH] more styling --- data/index.html | 115 +++++++++++++++++++++----------------- data/scripts.js | 8 ++- data/styles.css | 68 +++++++++++++--------- frontend/pages/index.html | 115 +++++++++++++++++++++----------------- frontend/scripts/pmjq.js | 2 +- frontend/scripts/zMain.js | 6 ++ frontend/styles/form.less | 5 +- frontend/styles/main.less | 77 ++++++++++++++----------- 8 files changed, 229 insertions(+), 167 deletions(-) diff --git a/data/index.html b/data/index.html index 87735da..7f22ee7 100644 --- a/data/index.html +++ b/data/index.html @@ -1,66 +1,81 @@ + LaserSpirograph - Esp8266 laserspiro controller +
-
- Laser -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
+ + Laser +
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
-
+
+ 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 @@ + LaserSpirograph - Esp8266 laserspiro controller +
    -
    - Laser -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    + + Laser +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    -
    +
    + 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