Improve "Load More" button #16

New Issue

phlaym · 2023-04-04T06:49:54Z

phlaym commented

2023-04-04 06:49:54 +00:00

Improve loading indicator
Display error messages if loading fails (might need to be its own ticket)
Improve behaviour when no older posts are available
- Check if more posts are available directly in response instead of after receiving an empty array of posts
- Make it clearer that no older posts are available
- Disabled button doesn't look disabled enough
Lots of duplicate code between loading newer and older posts => refactor

- [x] Improve loading indicator - [x] Display error messages if loading fails (might need to be its own ticket) - [x] Improve behaviour when no older posts are available - [x] Check if more posts are available directly in response instead of after receiving an empty array of posts - [x] Make it clearer that no older posts are available - [x] Disabled button doesn't look disabled enough - [x] Lots of duplicate code between loading newer and older posts => refactor

phlaym added this to the Version 1.1 milestone 2023-04-04 06:49:54 +00:00

phlaym added the

enhancement

label 2023-04-04 06:49:54 +00:00

phlaym changed title from ~~Improve UI for "Load More" button~~ to Improve "Load More" button

2023-04-04 09:41:51 +00:00

phlaym commented

2023-04-06 08:08:39 +00:00

Suggestion for improved design:

button:not(:disabled) {
  box-shadow: 2px 2px 1px 0 var(--color-link-visited);
}
button:hover:not(:disabled) {
 box-shadow: 4px 4px 3px 0 var(--color-link)
 translate: -2px -2px;
}

Colors need tweaking though!

Do not use gray for disabled button, switch to a very de-saturated version of the regular color

Suggestion for improved design: ```css button:not(:disabled) { box-shadow: 2px 2px 1px 0 var(--color-link-visited); } button:hover:not(:disabled) { box-shadow: 4px 4px 3px 0 var(--color-link) translate: -2px -2px; } ``` Colors need tweaking though! Do not use gray for disabled button, switch to a *very* de-saturated version of the regular color

phlaym referenced this issue from a commit

2023-04-07 09:55:25 +00:00

Add toast for error messages, fix #16

phlaym closed this issue

2023-04-07 15:07:42 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: phlaym/moshing-mammut#16