From 8102655261ce83c04a859ea7a5a6222cb6807a8a Mon Sep 17 00:00:00 2001 From: Yaros Date: Mon, 20 Oct 2025 22:30:23 +0200 Subject: [PATCH 1/2] Responsive layout in Adjustments tab --- src/css/tabs/adjustments.less | 158 +++++++++++++++++++++++++++++++++- 1 file changed, 155 insertions(+), 3 deletions(-) diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less index 73d9190710c..98f3bb1ba36 100644 --- a/src/css/tabs/adjustments.less +++ b/src/css/tabs/adjustments.less @@ -84,10 +84,162 @@ @media all and (max-width: 575px) { .tab-adjustments { .overflow { - overflow: auto; + overflow: visible; } - .range { - min-width: 300px; + + .adjustments thead { + display: none; + } + + .adjustments tbody { + display: block; + } + + .adjustment { + display: block; + background-color: var(--surface-200); + margin-bottom: 0.5rem; + border-radius: 0.5rem; + overflow: visible; + width: 100%; + box-sizing: border-box; + + &:nth-child(odd) { + background-color: var(--surface-200); + } + + td { + display: block; + border: none; + padding: 0.75rem; + text-align: left; + width: 100%; + box-sizing: border-box; + + &.info { + padding: 0; + } + + &::before { + content: attr(data-label); + font-weight: bold; + display: block; + margin-bottom: 0.5rem; + color: var(--text); + font-size: 0.9em; + } + } + .info { + height: auto; + min-height: 2.5rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: var(--surface-300); + padding: 2rem; + gap: 1rem; + + .enabling { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + + &::before { + content: "Enable"; + font-weight: bold; + color: var(--text); + font-size: 0.9em; + } + } + } + + .channelInfo { + &::before { + content: "When Channel"; + } + + > div:first-child { + margin-bottom: 0.75rem; + + select { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--surface-500); + border-radius: 3px; + box-sizing: border-box; + } + } + + .limits { + display: flex; + justify-content: space-between; + padding: 0; + margin-top: 0.5rem; + + p { + margin: 0; + font-size: 0.875em; + flex: 1; + + &.lowerLimit { + text-align: left; + } + + &.upperLimit { + text-align: right; + } + } + } + } + + .range { + &::before { + content: "Is In Range"; + } + + padding: 0.75rem; + + .channel-slider { + margin-top: 1rem; + margin-bottom: 2.5rem; + width: 100%; + position: relative; + } + + .marker { + top: 2.75rem; + } + } + + .functionSelection { + &::before { + content: "Then Apply Function"; + } + + select { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--surface-500); + border-radius: 3px; + box-sizing: border-box; + } + } + + .functionSwitchChannel { + &::before { + content: "Via Channel"; + } + + select { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--surface-500); + border-radius: 3px; + box-sizing: border-box; + } + } } } } From c130f364908e5163ddd6e9a218d462d174851c4f Mon Sep 17 00:00:00 2001 From: Yaros Date: Fri, 24 Oct 2025 13:40:28 +0200 Subject: [PATCH 2/2] Localization fix --- src/css/tabs/adjustments.less | 38 +++++++++-------------------------- src/js/tabs/adjustments.js | 11 ++++++++++ 2 files changed, 21 insertions(+), 28 deletions(-) diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less index 98f3bb1ba36..772df328921 100644 --- a/src/css/tabs/adjustments.less +++ b/src/css/tabs/adjustments.less @@ -116,10 +116,6 @@ width: 100%; box-sizing: border-box; - &.info { - padding: 0; - } - &::before { content: attr(data-label); font-weight: bold; @@ -137,29 +133,27 @@ align-items: center; justify-content: center; background-color: var(--surface-300); - padding: 2rem; gap: 1rem; + padding: 0.75rem; + + &::before { + content: attr(data-label); + font-weight: bold; + display: inline; + margin-bottom: 0; + color: var(--text); + font-size: 0.9em; + } .enabling { display: flex; align-items: center; justify-content: center; gap: 0.75rem; - - &::before { - content: "Enable"; - font-weight: bold; - color: var(--text); - font-size: 0.9em; - } } } .channelInfo { - &::before { - content: "When Channel"; - } - > div:first-child { margin-bottom: 0.75rem; @@ -195,10 +189,6 @@ } .range { - &::before { - content: "Is In Range"; - } - padding: 0.75rem; .channel-slider { @@ -214,10 +204,6 @@ } .functionSelection { - &::before { - content: "Then Apply Function"; - } - select { width: 100%; padding: 0.5rem; @@ -228,10 +214,6 @@ } .functionSwitchChannel { - &::before { - content: "Via Channel"; - } - select { width: 100%; padding: 0.5rem; diff --git a/src/js/tabs/adjustments.js b/src/js/tabs/adjustments.js index e2c9e8b2951..e37034c6cf1 100644 --- a/src/js/tabs/adjustments.js +++ b/src/js/tabs/adjustments.js @@ -39,6 +39,17 @@ adjustments.initialize = function (callback) { $(newAdjustment).attr("id", `adjustment-${adjustmentIndex}`); $(newAdjustment).data("index", adjustmentIndex); + // Set localized data-label attributes for mobile responsive layout + $(newAdjustment).find(".info").attr("data-label", i18n.getMessage("adjustmentsColumnEnable")); + $(newAdjustment).find(".channelInfo").attr("data-label", i18n.getMessage("adjustmentsColumnWhenChannel")); + $(newAdjustment).find(".range").attr("data-label", i18n.getMessage("adjustmentsColumnIsInRange")); + $(newAdjustment) + .find(".functionSelection") + .attr("data-label", i18n.getMessage("adjustmentsColumnThenApplyFunction")); + $(newAdjustment) + .find(".functionSwitchChannel") + .attr("data-label", i18n.getMessage("adjustmentsColumnViaChannel")); + // // populate source channel select box //