diff --git a/changedetectionio/static/js/browser-steps.js b/changedetectionio/static/js/browser-steps.js index f4727556..7865d9c9 100644 --- a/changedetectionio/static/js/browser-steps.js +++ b/changedetectionio/static/js/browser-steps.js @@ -53,6 +53,12 @@ $(document).ready(function () { browsersteps_session_id = false; apply_buttons_disabled = false; ctx.clearRect(0, 0, c.width, c.height); + set_first_gotosite_disabled(); + } + + function set_first_gotosite_disabled() { + $('#browser_steps >li:first-child select').val('Goto site').attr('disabled', 'disabled'); + $('#browser_steps >li:first-child').css('opacity', '0.5'); } // Show seconds remaining until playwright/browserless needs to restart the session @@ -97,7 +103,6 @@ $(document).ready(function () { // @todo is click better? $('#browsersteps-selector-canvas').off("mousemove mousedown click"); // Undo disable_browsersteps_ui - $("#browser_steps select,input").removeAttr('disabled').css('opacity', '1.0'); $("#browser-steps-ui").css('opacity', '1.0'); // init @@ -247,7 +252,7 @@ $(document).ready(function () { browsersteps_session_id=Date.now(); // @todo This setting of the first one should be done at the datalayer but wtforms doesnt wanna play nice $('#browser_steps >li:first-child').removeClass('empty'); - $('#browser_steps >li:first-child select').val('Goto site').attr('disabled', 'disabled'); + set_first_gotosite_disabled(); $('#browser-steps-ui .loader .spinner').show(); $('.clear,.remove', $('#browser_steps >li:first-child')).hide(); $.ajax({ @@ -266,6 +271,7 @@ $(document).ready(function () { console.log("Got startup response, requesting Goto-Site (first) step fake click"); $('#browser_steps >li:first-child .apply').click(); browserless_seconds_remaining = data.browser_time_remaining; + set_first_gotosite_disabled(); }).fail(function (data) { console.log(data); alert('There was an error communicating with the server.'); @@ -274,7 +280,7 @@ $(document).ready(function () { } function disable_browsersteps_ui() { - $("#browser_steps select,input").attr('disabled', 'disabled').css('opacity', '0.5'); + set_first_gotosite_disabled(); $("#browser-steps-ui").css('opacity', '0.3'); $('#browsersteps-selector-canvas').off("mousemove mousedown click"); } @@ -420,6 +426,7 @@ $(document).ready(function () { $('ul#browser_steps li .control .apply').css('opacity',1); browserless_seconds_remaining = data.browser_time_remaining; $("#loading-status-text").hide(); + set_first_gotosite_disabled(); }).fail(function (data) { console.log(data); if (data.responseText.includes("Browser session expired")) { diff --git a/changedetectionio/static/styles/parts/browser-steps.scss b/changedetectionio/static/styles/parts/browser-steps.scss index 57736a09..fda60bbe 100644 --- a/changedetectionio/static/styles/parts/browser-steps.scss +++ b/changedetectionio/static/styles/parts/browser-steps.scss @@ -6,6 +6,11 @@ } li { + &:not(:first-child) { + &:hover { + opacity: 1.0; + } + } list-style: decimal; padding: 5px; .control { diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index c99eedc0..2f2bb625 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -50,6 +50,8 @@ nvm use v14.18.1 && npm install && npm run build #browser_steps li { list-style: decimal; padding: 5px; } + #browser_steps li:not(:first-child):hover { + opacity: 1.0; } #browser_steps li .control { padding-left: 5px; padding-right: 5px; }