feat: grid for list cards #2709
No reviewers
Labels
No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
No Milestone
No project
No Assignees
3 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vikunja/frontend#2709
Loading…
Reference in New Issue
No description provided.
Delete Branch "dpschen/frontend:feature/list-card-grid"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
I had this branch in a wip state for a while already but rebased it now that I saw https://github.com/go-vikunja/frontend/pull/91/.
It takes inspiration from that branch but with some changes:
3cc3eff7f9
to57f32b3649
Hi dpschen!
Thank you for creating a PR!
I've deployed the changes of this PR on a preview environment under this URL: https://2709-feature-list-card-grid--vikunja-frontend-preview.netlify.app
You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
Have a nice day!
WIP: feat: grid for list cardsto feat: grid for list cards@ -0,0 +6,4 @@
'has-background': blurHashUrl !== '' || background !== null
}"
:style="{
'border-left': list.hexColor ? `0.25rem solid ${list.hexColor}` : undefined,
Can you only declare the color here and move the size and style in a stylesheet?
yes! makes sense
I thought about this again and realized that the reason I put all the border inline was that the border itself is meant to be optional.
In case we have no
list.color
we don't want a border, because if we would just make the bordertransparent
in that case this offsets the padding but more important creates some distance for backgrounds.I could have introduced a new class
.has-border
then set the width and style based on that class and additionally add the color via inline style or even set it as css variable. But that seemed more complex than the one line solution that I used now :)That sounds reasonable.
@ -0,0 +62,4 @@
<style lang="scss" scoped>
.list-card {
--list-card-padding: 1rem;
It looks like this variable is only used here. (I assume you wanted to use it as well in the
.favorite
declaration?I do??
But the variable is only defined in the scope of
.list-card
and.favorites
is not part of it. Or is it?list-card
is the root class of the component (same name as component, only kebab case). That's a pattern I really love to use. CSS properties are super might this way. Especially when you set them via js :)I did reuse the variable in the
max-height
of.list-title
as well.Ohhh that makes a lot of sense. Very nice!
@ -0,0 +39,4 @@
const backgroundPromise = listService.background(list.value).then((result) => {
background.value = result
})
await Promise.all([blurHashPromise, backgroundPromise])
Don't the two promises need a
return
to actually resolve the promise? Or is that implicit?Not sure if I got what you mean here, but trying to explan:
The handler of a watcher doesn't care if it has a return value or what it is.
By prefixing the handler with
async
the return value of the handler will automatically be a promise. If we don't return anything it will be a promise that resolves to undefined, which is fine for us, since as written above, the watch function doesnt care what value is returned by it's handler.By not using await in front of getBlobFromBlurhash we get the promise as result, not the resolved value. Same true for for the background.
By using promise.all both promises do resolve now in parallel.
The await in front of the promise.all makes sure that the promise resolves before we set backgroundLoading to false again.
Makes sense (I've learnt something) but I thought of the
.then
. Does that simply resolve toundefined
if no return value was specified? (but it does resolve without a return)?I think that
and
is the same
57f32b3649
toc4044988dd
Ready to merge once conflicts are resolved.
c4044988dd
tod4b961c0e1
d4b961c0e1
toc3ff8b56b0
c3ff8b56b0
to42e9f306e8