T-Gander/jellyfin-plugin-mediacleaner
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Updated styling for the configuration page

Browse Source
This commit is contained in:
Thomas Gander
2026-02-16 17:47:26 -07:00
parent 462a2beea1
commit 9348b33ed6
2 changed files with 73 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
View File

@@ -4,57 +4,63 @@
<link rel="stylesheet" href="/web/configurationpage?name=global.css" />
<form id="MediaCleanerConfigForm">
<h2>Media Cleaner Configuration</h2>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
<input id="RadarrAPIKey" class="medium-width" name="RadarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your radarr instance</div>
<h3>Management Configuration</h3>
<div class="inlineContainer">
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
<input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your radarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
<input id="RadarrAddress" name="RadarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your radarr instance.</div>
</div>
<div class="inputContainer">
<button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
<span>Test</span>
</button>
<div class="validation" id="RadarrConnectionValidation" hidden>
</div>
</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
<input id="RadarrAddress" class="small-width" name="RadarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your radarr instance.</div>
<div class="inlineContainer">
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
<input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your sonarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
<input id="SonarrAddress" name="SonarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your sonarr instance.</div>
</div>
<div class="inputContainer">
<button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
<span>Test</span>
</button>
<div class="validation" id="SonarrConnectionValidation" hidden>
</div>
</div>
</div>
<div class="inputContainer">
<button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="RadarrConnectionValidation" hidden>
</div>
<h3>General Settings</h3>
<div class="inlineContainer">
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
<input id="StaleMediaCutoff" class="medium-width" name="StaleMediaCutoff" type="number" is="emby-input"/>
<div class="fieldDescription">How many days to wait before marking files as stale</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
<input id="SonarrAPIKey" class="medium-width" name="SonarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your sonarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
<input id="SonarrAddress" class="small-width" name="SonarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your sonarr instance.</div>
</div>
<div class="inputContainer">
<button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="SonarrConnectionValidation" hidden>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
<input id="StaleMediaCutoff" class="xsmall-width" name="StaleMediaCutoff" type="number" is="emby-input"/>
<div class="fieldDescription">How many days to wait before marking files as stale</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
<span>Debug Mode</span>
</label>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
<span>Debug Mode</span>
</label>
</div>
</div>
<div>

21
Jellyfin.Plugin.MediaCleaner/Pages/global.css
View File

@@ -1,3 +1,19 @@
.content-primary > * {
box-sizing: border-box;
}
.inlineContainer {
display: inline-flex;
margin-bottom: 1.8em;
flex-direction: column;
/* Would be nice to figure out why 50% doesn't work. */
width: 49%;
}
.inlineContainer > * {
padding: 0 0.5rem;
}
table {
border: 1px solid;
border-collapse: collapse;
@@ -33,10 +49,15 @@ td, th {
.validation {
border: 1px solid;
border-radius: 0.25rem;
margin-top: 1rem;
padding: 1rem;
opacity: 1;
}
.max-width{
width: 100%;
}
.medium-width {
width: 50%;
}