Tidy asset input layout
Move the remove × inside the input on the right edge instead of
floating it in a separate column, and only show it when the field has
content or there's more than one row. Removing the last row keeps one
empty input so there's always somewhere to type.
diff --git a/lib/views/capture.rb b/lib/views/capture.rb
index d5a85ae..69d4155 100644
--- a/lib/views/capture.rb
+++ b/lib/views/capture.rb
@@ -133,7 +133,8 @@ module Domus
button(
type: "button",
class: "btn-remove-asset",
- "@click": "assetNames.splice(i, 1)"
+ "x-show": "assetNames[i] || assetNames.length > 1",
+ "@click": "removeAsset(i)"
) { plain "×" }
end
end
diff --git a/public/app.css b/public/app.css
index 81b30f2..751a436 100644
--- a/public/app.css
+++ b/public/app.css
@@ -247,8 +247,8 @@ html, body {
}
.asset-input-row {
+ position: relative;
display: flex;
- gap: var(--space-2xs);
align-items: center;
}
@@ -256,6 +256,7 @@ html, body {
flex: 1;
min-width: 0;
padding: var(--space-2xs) var(--space-xs);
+ padding-right: calc(var(--space-xs) + 22px);
border: 1px solid var(--line-2);
border-radius: calc(var(--radius) - 2px);
font-family: var(--font-ui);
@@ -271,15 +272,18 @@ html, body {
}
.btn-remove-asset {
- flex: none;
- width: 28px;
- height: 28px;
+ position: absolute;
+ right: var(--space-3xs);
+ top: 50%;
+ transform: translateY(-50%);
+ width: 22px;
+ height: 22px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--ink-3);
- font-size: var(--step-0);
+ font-size: var(--step--1);
line-height: 1;
cursor: pointer;
display: flex;
diff --git a/public/capture.js b/public/capture.js
index a76ae34..f7084b6 100644
--- a/public/capture.js
+++ b/public/capture.js
@@ -33,6 +33,11 @@ function captureApp() {
});
},
+ removeAsset(i) {
+ this.assetNames.splice(i, 1);
+ if (this.assetNames.length === 0) this.assetNames.push('');
+ },
+
onSubmit() {
const inactive = this.activeRef === 'cameraInput' ? this.$refs.fileInput : this.$refs.cameraInput;
inactive.disabled = true;