Enhance seasonal section input fields with improved layout and descriptions

This commit is contained in:
CodeDevMLH
2026-02-13 01:40:33 +01:00
parent f2d383ec61
commit a1df756c56

View File

@@ -165,7 +165,7 @@
<div id="seasonalSectionsList"></div> <div id="seasonalSectionsList"></div>
<button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button" <button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;"> style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
<i class="md-icon">add</i> <i class="material-icons" style="font-size: 24px;">add</i>
<span>Add Season</span> <span>Add Season</span>
</button> </button>
</div> </div>
@@ -574,21 +574,30 @@
return h; return h;
} }
div.innerHTML = ` div.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;">' +
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;"> ' <div style="flex-grow:1; margin-right:1em;">' +
<input is="emby-input" type="text" class="emby-input section-name" value="${data.Name}" placeholder="Season Name" style="flex: 1; margin-right: 1em; font-weight: bold;"> ' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" label="Season Name" />' +
<button type="button" class="raised emby-button remove-section" style="background: #a94442;">Remove</button> ' <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' +
</div> ' </div>' +
<div style="margin-bottom: 0.5em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;"> ' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset;">Remove</button>' +
<span>From:</span> '</div>' +
${mkSelect(data.StartDay, days, 'start-day')} '<div style="margin-bottom: 1em;">' +
${mkSelect(data.StartMonth, months, 'start-month')} ' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
<span style="margin-left: 1em;">To:</span> ' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
${mkSelect(data.EndDay, days, 'end-day')} ' <span>From:</span>' +
${mkSelect(data.EndMonth, months, 'end-month')} mkSelect(data.StartDay, days, 'start-day') +
</div> mkSelect(data.StartMonth, months, 'start-month') +
<textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;" placeholder="Media IDs...">${data.MediaIds || ''}</textarea> ' <span style="margin-left: 1em;">To:</span>' +
`; mkSelect(data.EndDay, days, 'end-day') +
mkSelect(data.EndMonth, months, 'end-month') +
' </div>' +
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
'</div>' +
'<div>' +
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
' <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
' <div class="fieldDescription">Comma-separated list of Movie/Series/Collection IDs to show during this season.</div>' +
'</div>';
div.querySelector('.remove-section').addEventListener('click', function() { div.querySelector('.remove-section').addEventListener('click', function() {
div.remove(); div.remove();