From 690c126f41b8698f654283916ecc19271fd4da75 Mon Sep 17 00:00:00 2001 From: Jeffrey Warren Date: Sat, 30 Mar 2019 12:47:56 -0400 Subject: [PATCH] ui-tweaks (#960) --- examples/demo.css | 41 ++++++------------------------ examples/index.html | 10 +++----- examples/lib/defaultHtmlStepUi.js | 42 ++++++++++++++----------------- 3 files changed, 31 insertions(+), 62 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index d47b1b0367..6bc65a0597 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -18,11 +18,19 @@ body { background: #f8f8fa; } +footer { + margin-top: 40px; +} + h1 { font-family: 'League Spartan'; color: #445; } +body > .container, +body > .container-fluid { +} + .center-align { display: flex; justify-content: center; @@ -71,16 +79,6 @@ h1 { margin-bottom: 20px; } -.details { - padding-left: 6px; -} - -.details h3 { - font-family: monospace; - margin-top: 12px; - font-size: 1.3em; -} - .det { padding: 10px 16px; text-decoration: italic; @@ -99,11 +97,6 @@ h1 { color: #444; } -.load-spin{ - position: absolute; - right: 0px; -} - #addStep { max-width: 500px; margin: 20px auto; @@ -259,21 +252,3 @@ a.name-header{ .trash-container button.btn-xs { margin-top: -5px !important; } - -/* -.panel-footer .insert-step{ - margin-left:10px; - border-radius:6px; - background-color:#fff; - border:solid #bababa 1.1px; -} -.col-md-4{ - padding-left: 30px; -} -.panel-heading{ - height:45px; -} -.panel-footer{ - height: 45px; -} -*/ diff --git a/examples/index.html b/examples/index.html index 29bea52ed2..790dfda68e 100644 --- a/examples/index.html +++ b/examples/index.html @@ -200,19 +200,17 @@

Save

Need Help?

- Post a link to this and ask help from other community members on Gitter -

-

- Ask a question on Gitter + Ask a question + Ask in our chatroom

Improve this tool

- This is an open source toolkit which you can help add to and improve on Github + This is an open source toolkit which you can help improve on Github

- View the code » + View the code »

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 19fd3712ac..8e0094fbdb 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -25,36 +25,35 @@ function DefaultHtmlStepUi(_sequencer, options) { step.ui = '\ -
\ +
\
\
\
\
\

' + - '' +step.name + '\ + '' +step.name + ' \ + \

\
\
\
\ -
\ -

\ - ' + - '

'+ - (step.description || "") + - '

\ +
\ +

' + + '' + (step.description || "") + '' + + '

\
\ -
\ - \ +
\ + \
\ \
\
\
\ -
\ -
\
\ - \ -
'; +
\ +
\ + \ +
'; var tools = '
\ @@ -67,9 +66,9 @@ function DefaultHtmlStepUi(_sequencer, options) { var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); - step.ui = step.ui.querySelector("div.main"); + step.ui = step.ui.querySelector("div.container-fluid"); step.linkElements = step.ui.querySelectorAll("a"); - step.imgElement = step.ui.querySelector("a img"); + step.imgElement = step.ui.querySelector("a img.img-thumbnail"); if (_sequencer.modulesInfo().hasOwnProperty(step.name)) { var inputs = _sequencer.modulesInfo(step.name).inputs; @@ -135,7 +134,7 @@ function DefaultHtmlStepUi(_sequencer, options) { ); $(step.ui.querySelector("div.panel-footer")).prepend( '' ); } @@ -231,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) { function onDraw(step) { $(step.ui.querySelector(".load")).show(); $(step.ui.querySelector("img")).hide(); - if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") ) - { - $(step.ui.querySelector(".load-spin")).show(); - } + $(step.ui.querySelectorAll(".load-spin")).show(); } function onComplete(step) { - $(step.ui.querySelector(".load")).hide(); $(step.ui.querySelector("img")).show(); - $(step.ui.querySelector(".load-spin")).hide(); + $(step.ui.querySelectorAll(".load-spin")).hide(); + $(step.ui.querySelector(".load")).hide(); step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output; var imgthumbnail = step.ui.querySelector(".img-thumbnail");