Skip to content

Tidy settings page layout #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wefalltomorrow merged 2 commits into from
Sep 8, 2026
Merged

Tidy settings page layout #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9548f6c
Clean up settings page layout
wefalltomorrow Sep 8, 2026
74ea4d2
Style settings page for clear responsive layout
wefalltomorrow Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 77 additions & 44 deletions src/ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,52 +96,85 @@ <h1>C<span class="sml">o<span class="sml">m<span class="sml">p<span class="sml">
</section>

<section class="page" id="Settings" style="display: none;">
<label>File patterns to exclude from compression<br>
<textarea name="exclude" id="Excludes" spellcheck="false" wrap="off"
></textarea>
</label>
<div class="settings-panel">
<div class="settings-heading">
<h2>File exclusions</h2>
<p>One pattern per line. Matching files and folders are skipped.</p>
</div>
<textarea name="exclude" id="Excludes" spellcheck="false" wrap="off"></textarea>
</div>

<br>
<div class="settings-panel">
<div class="settings-heading">
<h2>Compression</h2>
<p>Choose how Compactor analyses and compresses eligible files.</p>
</div>

<label>Compression
<select id="Compression_Mode" name="Compression">
<option value="XPRESS4K">XPRESS4K (fast, low compression)</option>
<option value="XPRESS8K">XPRESS8K</option>
<option value="XPRESS16K">XPRESS16K</option>
<option value="LZX">LZX (default, slow, high compression)</option>
</select></label>

<label>Minimum estimated savings
<input id="Min_Savings" name="Min_Savings" type="number" min="0" max="100" step="0.1" value="1" style="width: 70px">%
</label>

<label>Maximum threads
<input id="Max_Threads" name="Max_Threads" type="number" min="0" max="16" step="1" value="0" style="width: 70px"> <small title="Auto uses up to 8 analysis workers and up to 16 XPRESS compression workers on SSDs. LZX Auto uses a conservative 1-2 workers. A manual limit is respected for LZX too; the HDD single-thread safeguard still applies.">0 = Auto (hardware-aware)</small>
</label>

<label>Compression priority
<select id="Compression_Priority" name="Compression_Priority">
<option value="Lowest">Lowest</option>
<option value="BelowNormal">Below Normal (default)</option>
<option value="Normal">Normal</option>
<option value="AboveNormal">Above Normal</option>
<option value="Highest">Highest</option>
</select> <small title="Applies only to compression/decompression worker threads. Analysis and the GUI remain at normal priority.">worker threads only</small>
</label>

<label>
<input id="HDD_Single_Thread" name="HDD_Single_Thread" type="checkbox" checked> HDDs only use 1 thread
</label>

<label>Units
<select id="SI_Units" name="SI_Units">
<option value="I">Binary (MiB)</option>
<option value="D">Decimal (MB)</option>
</select>
</label>

<button id="Button_Save" class="save">Save</button>
<button id="Button_Reset" class="cancel">Reset</button>
<div class="settings-grid">
<label class="setting-field">
<span class="setting-label">Compression algorithm</span>
<select id="Compression_Mode" name="Compression">
<option value="XPRESS4K">XPRESS4K (fast, low compression)</option>
<option value="XPRESS8K">XPRESS8K</option>
<option value="XPRESS16K">XPRESS16K</option>
<option value="LZX">LZX (default, slow, high compression)</option>
</select>
</label>

<label class="setting-field">
<span class="setting-label">Minimum estimated savings</span>
<span class="setting-inline">
<input id="Min_Savings" name="Min_Savings" type="number" min="0" max="100" step="0.1" value="1">
<span class="setting-suffix">%</span>
</span>
<small class="setting-help">Files below this estimated saving are skipped.</small>
</label>

<label class="setting-field">
<span class="setting-label">Maximum worker threads</span>
<input id="Max_Threads" name="Max_Threads" type="number" min="0" max="16" step="1" value="0">
<small class="setting-help">0 = Auto. LZX Auto uses 1–2 workers; a manual value is respected.</small>
</label>

<label class="setting-field">
<span class="setting-label">Worker priority</span>
<select id="Compression_Priority" name="Compression_Priority">
<option value="Lowest">Lowest</option>
<option value="BelowNormal">Below Normal (default)</option>
<option value="Normal">Normal</option>
<option value="AboveNormal">Above Normal</option>
<option value="Highest">Highest</option>
</select>
<small class="setting-help">Compression/decompression workers only; the UI and analysis stay at Normal priority.</small>
</label>

<label class="setting-field setting-toggle">
<span class="setting-checkline">
<input id="HDD_Single_Thread" name="HDD_Single_Thread" type="checkbox" checked>
<span>Limit HDDs to 1 worker</span>
</span>
<small class="setting-help">Recommended to avoid excessive seeking on mechanical drives.</small>
</label>
</div>
</div>

<div class="settings-panel settings-display">
<div class="settings-heading">
<h2>Display</h2>
</div>
<label class="setting-field">
<span class="setting-label">Units</span>
<select id="SI_Units" name="SI_Units">
<option value="I">Binary (MiB)</option>
<option value="D">Decimal (MB)</option>
</select>
</label>
</div>

<div class="settings-actions">
<button id="Button_Reset" class="cancel">Reset</button>
<button id="Button_Save" class="save">Save</button>
</div>
</section>

<section class="page" id="About" style="display: none;">
Expand Down
172 changes: 172 additions & 0 deletions src/ui/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,3 +326,175 @@ li {
opacity: 0.45;
}

/* Settings */
#Settings {
max-width: 1100px;
margin: 18px auto;
padding: 0 18px 18px;
box-sizing: border-box;
}

#Settings .settings-panel {
margin: 0 0 14px;
padding: 14px 16px 16px;
border: 1px solid #555;
border-radius: 6px;
background-color: #373737;
box-sizing: border-box;
}

#Settings .settings-heading {
margin-bottom: 10px;
}

#Settings .settings-heading h2 {
margin: 0 0 3px;
font-size: 1.05em;
font-weight: 600;
color: #fff;
}

#Settings .settings-heading p {
margin: 0;
color: #bdbdbd;
font-size: 0.78em;
line-height: 1.35;
}

#Settings textarea,
#Settings input,
#Settings select {
color: #eee;
background-color: #20262d;
border-color: #15191d;
box-sizing: border-box;
}

#Settings textarea {
display: block;
width: 100%;
height: 170px;
min-height: 110px;
margin: 0;
padding: 8px;
resize: vertical;
font-size: 0.95em;
line-height: 1.35;
}

#Settings .settings-grid {
display: flex;
flex-wrap: wrap;
margin: -6px;
}

#Settings .setting-field {
display: flex;
flex-direction: column;
width: calc(50% - 12px);
min-width: 0;
margin: 6px;
box-sizing: border-box;
}

#Settings .setting-label {
margin-bottom: 5px;
color: #f2f2f2;
font-size: 0.86em;
font-weight: 600;
}

#Settings .setting-field > select {
width: 100%;
min-height: 34px;
margin: 0;
font-size: 0.92em;
}

#Settings .setting-field > input[type="number"] {
width: 110px;
min-height: 34px;
margin: 0;
font-size: 0.92em;
}

#Settings .setting-inline {
display: flex;
align-items: center;
}

#Settings .setting-inline input[type="number"] {
width: 110px;
min-height: 34px;
margin: 0;
font-size: 0.92em;
}

#Settings .setting-suffix {
margin-left: 6px;
color: #ddd;
}

#Settings .setting-help {
display: block;
margin-top: 5px;
color: #bdbdbd;
font-size: 0.72em;
line-height: 1.35;
}

#Settings .setting-toggle {
width: calc(100% - 12px);
padding-top: 3px;
}

#Settings .setting-checkline {
display: flex;
align-items: center;
font-size: 0.88em;
font-weight: 600;
}

#Settings .setting-checkline input[type="checkbox"] {
width: auto;
margin: 0 7px 0 0;
padding: 0;
}

#Settings .setting-toggle .setting-help {
margin-left: 24px;
}

#Settings .settings-display .setting-field {
width: 320px;
max-width: 100%;
margin: 0;
}

#Settings .settings-actions {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 2px;
}

#Settings .settings-actions button {
min-width: 78px;
}

#Settings .settings-actions .cancel {
background-color: rgb(118, 118, 118);
}

@media (max-width: 800px) {
#Settings {
margin-top: 12px;
padding-left: 12px;
padding-right: 12px;
}

#Settings .setting-field,
#Settings .setting-toggle {
width: calc(100% - 12px);
}
}