mirror of
https://github.com/javl/image2cpp.git
synced 2026-09-11 09:03:04 +00:00
layout tweaks
This commit is contained in:
javl
+53
-38
@@ -39,6 +39,7 @@
|
||||
/* Fonts */
|
||||
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
--font-size: 14px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -49,7 +50,7 @@
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size);
|
||||
line-height: 24px;
|
||||
color: var(--on-background);
|
||||
background-color: var(--background);
|
||||
@@ -67,7 +68,7 @@ body {
|
||||
}
|
||||
|
||||
.topnav-inner {
|
||||
max-width: 1400px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
height: 64px;
|
||||
padding: 0 var(--space-6);
|
||||
@@ -96,7 +97,7 @@ body {
|
||||
.topnav-links a {
|
||||
color: var(--secondary);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -142,7 +143,7 @@ body {
|
||||
.layout {
|
||||
display: flex;
|
||||
gap: var(--space-7);
|
||||
max-width: 1400px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: var(--space-7) var(--space-6) var(--space-9);
|
||||
align-items: flex-start;
|
||||
@@ -353,6 +354,7 @@ code {
|
||||
.table-row {
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
@@ -370,66 +372,71 @@ code {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.table-cell:first-child label {
|
||||
.table-cell:first-child > label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
/* font-weight: 500; */
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.table-cell:last-child label {
|
||||
.table-cell:last-child > label {
|
||||
margin-right: var(--space-2);
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
.nested-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---- Settings grid (step 2) ----
|
||||
2-column min-width forces a predictable 2-up (or 1-up) grid instead of
|
||||
auto-fitting 3 columns, which paired short/tall fields at random and
|
||||
left ragged whitespace between rows. */
|
||||
/* ---- Settings rows (step 2) ----
|
||||
Single-column label-left / value-right rows, hairline-divided. Denser
|
||||
than the old 2-up grid, and keeps each setting's note attached under
|
||||
its label instead of floating below the control in the value column. */
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: var(--space-6) var(--space-7);
|
||||
}
|
||||
|
||||
.settings-grid.table {
|
||||
display: block;
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
align-items: flex-start;
|
||||
gap: var(--space-6);
|
||||
padding: var(--space-1) 0;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.settings-grid .table-row.full-row {
|
||||
grid-column: 1 / -1;
|
||||
.settings-grid .table-row:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-cell {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-cell:first-child {
|
||||
width: auto;
|
||||
padding-right: 0;
|
||||
width: 34%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-cell:last-child {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-cell:first-child .note {
|
||||
font-size: 13px;
|
||||
line-height: 1.45em;
|
||||
margin: var(--space-1) 0 0;
|
||||
}
|
||||
|
||||
.nested-table .table-cell {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
width: 200px;
|
||||
/* width: 200px; */
|
||||
}
|
||||
|
||||
#format-caption-container {
|
||||
@@ -442,14 +449,14 @@ code {
|
||||
/* Reserve space for the tallest combination (Adafruit GFX shows both its
|
||||
own fields and the Arduino identifier fields) so the Generate/Copy/
|
||||
Download buttons don't jump around when switching output format. */
|
||||
min-height: 278px;
|
||||
/* min-height: 278px; */
|
||||
transition: min-height 0.15s ease;
|
||||
}
|
||||
|
||||
#format-caption-container div {
|
||||
color: var(--text-muted);
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.5em;
|
||||
padding: var(--space-2) 0 var(--space-4);
|
||||
width: 100%;
|
||||
@@ -459,7 +466,7 @@ code {
|
||||
|
||||
.note {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.5em;
|
||||
margin: var(--space-1) 0;
|
||||
}
|
||||
@@ -468,9 +475,9 @@ code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-note {
|
||||
/* .upload-note {
|
||||
max-width: 320px;
|
||||
}
|
||||
} */
|
||||
|
||||
#continue-note {
|
||||
display: none;
|
||||
@@ -494,7 +501,7 @@ input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
color: var(--on-surface-variant);
|
||||
background: var(--surface-container);
|
||||
border: 1px solid transparent;
|
||||
@@ -530,13 +537,13 @@ input[type="radio"] {
|
||||
min-width: 360px;
|
||||
width: 100%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
line-height: 22px;
|
||||
resize: vertical;
|
||||
}
|
||||
#text-input-error {
|
||||
color: var(--error);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
margin-top: var(--space-2);
|
||||
display: none;
|
||||
}
|
||||
@@ -558,7 +565,7 @@ input[type="radio"] {
|
||||
.text-input-size {
|
||||
margin: var(--space-2) 0;
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
.size-input {
|
||||
@@ -577,7 +584,10 @@ input[type="radio"] {
|
||||
}
|
||||
|
||||
.sub-field-label {
|
||||
min-width: 160px;
|
||||
min-width: 200px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.glyph-input {
|
||||
@@ -618,7 +628,7 @@ input[type="file"] {
|
||||
color: var(--on-surface-variant);
|
||||
/* border: 2px dashed var(--outline-variant); */
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
padding: 16px 20px;
|
||||
margin: var(--space-2) 0 0;
|
||||
cursor: pointer;
|
||||
@@ -778,7 +788,7 @@ input[type="file"]::file-selector-button {
|
||||
border: 1px solid var(--on-surface-variant);
|
||||
border-radius: var(--radius-xl);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
line-height: 22px;
|
||||
padding: 20px;
|
||||
resize: vertical;
|
||||
@@ -870,6 +880,11 @@ input[type="file"]::file-selector-button {
|
||||
.table-cell:first-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-grid .table-row {
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Dark theme ---- */
|
||||
|
||||
+45
-42
@@ -85,7 +85,7 @@
|
||||
<section class="sub-section">
|
||||
<div class="table settings-grid">
|
||||
|
||||
<div class="table-row full-row">
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label>Canvas size(s): </label></div>
|
||||
<div class="table-cell">
|
||||
<ul id="image-size-settings"></ul>
|
||||
@@ -99,7 +99,10 @@
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label>Canvas background color:</label></div>
|
||||
<div class="table-cell">
|
||||
<label>Canvas background color:</label>
|
||||
<div class="note">Used for parts of the canvas that are not covered by your image.</div>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<input id="backgroundColorWhite" type="radio" name="backgroundColor" value="white" checked="checked" onchange="updateRadio('backgroundColor')"/>
|
||||
<label for="backgroundColorWhite" class="smallLabel">White</label>
|
||||
@@ -107,43 +110,11 @@
|
||||
<label for="backgroundColorBlack" class="smallLabel">Black</label>
|
||||
<input id="backgroundColorTransparent" type="radio" name="backgroundColor" value="transparent" onchange="updateRadio('backgroundColor')"/>
|
||||
<label for="backgroundColorTransparent" class="smallLabel">Transparent</label>
|
||||
<div class="note">
|
||||
<i>Used for parts of the canvas that are not covered by your image.</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label for="invertColors">Invert image colors</label></div>
|
||||
<div class="table-cell">
|
||||
<input id="invertColors" type="checkbox" onchange="updateBoolean('invertColors')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label for="ditheringMode">Dithering: </label></div>
|
||||
<div class="table-cell">
|
||||
<select id="ditheringMode" onchange="updateInteger('ditheringMode')">
|
||||
<option value="2">Floyd-Steinberg</option>
|
||||
<option value="0">Binary</option>
|
||||
<option value="1">Bayer</option>
|
||||
<option value="3">Atkinson</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label for="ditheringThreshold">Brightness / alpha threshold: </label></div>
|
||||
<div class="table-cell">
|
||||
<input id="ditheringThreshold" class="size-input" type="number" min="0" max="255" name="ditheringThreshold" oninput="updateInteger('ditheringThreshold')" value="128"/>
|
||||
<div class="note">
|
||||
<i>0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead. Default is 128.</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label for="scale">Scaling:</label></div>
|
||||
<div class="table-cell"><label for="scale">Image Scaling:</label></div>
|
||||
<div class="table-cell">
|
||||
<select id="scale" name="scale" onchange="updateInteger('scale')">
|
||||
<option value="1">original size</option>
|
||||
@@ -156,15 +127,46 @@
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label>Center image:</label></div>
|
||||
<div class="table-cell"><label for="invertColors">Invert image colors</label></div>
|
||||
<div class="table-cell">
|
||||
<input id="invertColors" type="checkbox" onchange="updateBoolean('invertColors')" /> <label for="invertColors">Invert</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell"><label for="ditheringMode">Dithering: </label>
|
||||
<div class="note">Different dithering algorithms produce different results.</div>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<select id="ditheringMode" onchange="updateInteger('ditheringMode')">
|
||||
<option value="0">Binary</option>
|
||||
<option value="1">Bayer</option>
|
||||
<option value="2">Floyd-Steinberg</option>
|
||||
<option value="3">Atkinson</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell">
|
||||
<label for="ditheringThreshold">Brightness / alpha threshold: </label>
|
||||
<div class="note">0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead. Default is 128.</div>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<input id="ditheringThreshold" class="size-input" type="number" min="0" max="255" name="ditheringThreshold" oninput="updateInteger('ditheringThreshold')" value="128"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-cell">
|
||||
<label>Center image:</label>
|
||||
<div class="note">Centering the image only works when using a canvas larger than the original image.</div>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<input id="centerHorizontally" type="checkbox" onchange="updateBoolean('centerHorizontally')" />
|
||||
<label for="centerHorizontally">horizontally</label>
|
||||
<input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" />
|
||||
<label for="centerVertically">vertically</label>
|
||||
<div class="note">
|
||||
<i>Centering the image only works when using a canvas larger than the original image.</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -288,7 +290,7 @@
|
||||
<div class="table-cell"><label for="esp32Format">ESP32 formatting:</label></div>
|
||||
<div class="table-cell">
|
||||
<input id="esp32Format" type="checkbox" onchange="updateBoolean('esp32Format')" />
|
||||
<i class="note">Uses <code>uint8_t</code> instead of <code>unsigned char</code> and drops <code>PROGMEM</code>, which is a no-op on ESP32.</i>
|
||||
<i class="note">Use <code>uint8_t</code> instead of <code>unsigned char</code> and drops <code>PROGMEM</code>, which is a no-op on ESP32.</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -323,10 +325,11 @@
|
||||
<i class="note">Set to 0 to wrap using the image's width instead, e.g. an 8px wide image adds a newline every 8th byte.</i>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<label for="showAsciiPreview" class="sub-field-label">Ascii preview:</label>
|
||||
<input id="showAsciiPreview" type="checkbox" onchange="updateBoolean('showAsciiPreview')">
|
||||
<label for="showAsciiPreview">Show ascii preview behind output</label>
|
||||
<i class="note">Adds a dot/hash ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row".</i>
|
||||
<i class="note">Add an ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row".</i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@ const settings = {
|
||||
drawMode: 'horizontal',
|
||||
prefix: '0x',
|
||||
ditheringThreshold: 128,
|
||||
ditheringMode: 2,
|
||||
ditheringMode: 0,
|
||||
outputFormat: 'plain',
|
||||
separator: ', ',
|
||||
outputComments: true,
|
||||
|
||||
Reference in New Issue
Block a user