Fix scrollbars and enter to submit
All checks were successful
CI / Frontend lint (push) Successful in 24s
CI / Frontend unit tests (push) Successful in 24s
CI / Backend tests (push) Successful in 25s
CI / Frontend build (push) Successful in 24s
Docker / build-and-push (push) Successful in 1m6s
CI / Playwright e2e (push) Successful in 51s
All checks were successful
CI / Frontend lint (push) Successful in 24s
CI / Frontend unit tests (push) Successful in 24s
CI / Backend tests (push) Successful in 25s
CI / Frontend build (push) Successful in 24s
Docker / build-and-push (push) Successful in 1m6s
CI / Playwright e2e (push) Successful in 51s
This commit is contained in:
parent
688bc0cfe9
commit
948b49bb49
4 changed files with 143 additions and 8 deletions
|
|
@ -187,6 +187,7 @@ export function createDoneValue(defaultDone: boolean, currentDone: boolean, edit
|
|||
maxlength="10000"
|
||||
[value]="newValue().description"
|
||||
(input)="updateNewDescription($any($event.target).value)"
|
||||
(keydown.enter)="onNewDescriptionEnter($event)"
|
||||
></textarea>
|
||||
|
||||
<label class="done-checkbox">
|
||||
|
|
@ -414,6 +415,13 @@ export function createDoneValue(defaultDone: boolean, currentDone: boolean, edit
|
|||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
// The global reset (styles.scss) zeroes padding, so the focus outline
|
||||
// hugs the text. Re-pad so the outline clears the description text.
|
||||
// box-sizing: border-box (forms.scss) keeps the outer size unchanged.
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.done-checkbox {
|
||||
@include medium-text();
|
||||
display: flex;
|
||||
|
|
@ -779,6 +787,18 @@ export class BlockEditComponent implements AfterViewInit {
|
|||
this.newValue.update((v) => ({ ...v, difficulty: clampDifficulty(v.difficulty + delta) }));
|
||||
}
|
||||
|
||||
/**
|
||||
* Bare Enter in the create-card description submits the new task and exits.
|
||||
* Angular's `keydown.enter` pseudo-event matches *only* unmodified Enter, so
|
||||
* Ctrl+Enter / Shift+Enter never reach here — they fall through to the
|
||||
* textarea's default behaviour and insert a newline.
|
||||
*/
|
||||
onNewDescriptionEnter(event: Event): void {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.submitNew();
|
||||
}
|
||||
|
||||
submitNew(): void {
|
||||
const v = this.newValue();
|
||||
if (!v.tag) return;
|
||||
|
|
|
|||
|
|
@ -105,7 +105,12 @@ export function taskListMaxHeight(expanded: boolean): string {
|
|||
padding: calc(var(--small-padding) / 2);
|
||||
margin: calc(var(--small-padding) / 2);
|
||||
|
||||
max-height: 30vh;
|
||||
// Height is bounded by the host (lt-tasks) flex column, which clips but
|
||||
// does not scroll. As the sole scroller, this card shrinks to that
|
||||
// bound (min-height: 0) and scrolls a tall list inside itself — one
|
||||
// scrollbar, sitting within the white card.
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -339,19 +339,20 @@ export function selectVisibleStyledBlocks(
|
|||
flex: 0 1 auto;
|
||||
min-height: 56px;
|
||||
max-height: min(30vh, 45%);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
// The host only bounds the accordion's height and CLIPS — it must
|
||||
// not scroll. Scrolling lives solely on the inner card
|
||||
// (tasks.component .container), so a tall task list shows ONE
|
||||
// scrollbar (inside the card), not two. Flex column + the card's
|
||||
// min-height: 0 lets the card shrink to this bound and scroll.
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $mobile-width) {
|
||||
min-height: 44px;
|
||||
max-height: min(25vh, 45%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.stack-zone {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue