diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less index 73d9190710..772df32892 100644 --- a/src/css/tabs/adjustments.less +++ b/src/css/tabs/adjustments.less @@ -84,10 +84,144 @@ @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; + + &::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); + 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; + } + } + + .channelInfo { + > 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 { + padding: 0.75rem; + + .channel-slider { + margin-top: 1rem; + margin-bottom: 2.5rem; + width: 100%; + position: relative; + } + + .marker { + top: 2.75rem; + } + } + + .functionSelection { + select { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--surface-500); + border-radius: 3px; + box-sizing: border-box; + } + } + + .functionSwitchChannel { + select { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--surface-500); + border-radius: 3px; + box-sizing: border-box; + } + } } } } diff --git a/src/js/tabs/adjustments.js b/src/js/tabs/adjustments.js index e2c9e8b295..e37034c6cf 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 //