randogoth/kanban-todo.txt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make columns fill vertical space.

Browse source
This commit is contained in:
Chris McCormick 2025-12-30 21:41:44 +08:00
parent 594264044a
commit 7f97085d10
2 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
TODO.md
View file

@ -2,7 +2,6 @@
## TODO ## TODO
- [ ] Can we make the columns vertically fill the available space?
- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time. - [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time.
- [ ] Ability to rename columns. - [ ] Ability to rename columns.
@ -11,6 +10,7 @@
## Done ## Done
- [x] Can we make the columns vertically fill the available space?
- [x] Plus button in the columns to add a new item, with text input. - [x] Plus button in the columns to add a new item, with text input.
- [x] Ability to create columns. - [x] Ability to create columns.
- [x] Moving cards around janks the file. - [x] Moving cards around janks the file.

12
index.html
View file

@ -134,8 +134,8 @@
display: flex; display: flex;
gap: 1em; gap: 1em;
overflow-x: auto; overflow-x: auto;
height: 100%; flex-grow: 1;
align-items: flex-start; align-items: stretch;
padding-bottom: 1em; padding-bottom: 1em;
} }
@ -147,7 +147,7 @@
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100%; height: 100%;
border: .1rem solid var(--shade); border: .1rem solid var(--shade);
} }
@ -155,6 +155,7 @@
padding: 0.75em; padding: 0.75em;
font-weight: bold; font-weight: bold;
border-bottom: .1rem solid var(--shade); border-bottom: .1rem solid var(--shade);
flex-shrink: 0;
} }
.card-list { .card-list {
@ -165,7 +166,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
min-height: 100px; min-height: 0;
position: relative; position: relative;
} }
@ -178,6 +179,7 @@
user-select: none; user-select: none;
word-wrap: break-word; word-wrap: break-word;
position: relative; position: relative;
flex-shrink: 0;
} }
.card:hover { .card:hover {
@ -221,6 +223,7 @@
opacity: 0; opacity: 0;
transition: opacity 0.1s; transition: opacity 0.1s;
pointer-events: none; pointer-events: none;
flex-shrink: 0;
} }
.drop-indicator.active { .drop-indicator.active {
@ -289,6 +292,7 @@
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
align-items: flex-end; align-items: flex-end;
flex-shrink: 0;
} }
.add-card-btn { .add-card-btn {