Refresh UI display of statuses - #3861
Conversation
This removes a lot of lines, shadows, and whitespace from statuses in the feed.
… into lines-and-shadows
|
Updated to reflect feedback that the division between statuses was too hard to see: |
|
I like the new look and definitely agree it needs the clearer delineation in the update!!
|
|
Mmh, I have to admit I like the old layout better. For this old layout is a clearer distinction between the two posts as one can see where the posts ends. |
|
Maybe this can help inspire the new look: https://dribbble.com/shots/18396867-Goodreads-Redesign-In-Progress This includes the full borders like @j6k4m8 suggests which makes it feel like cards but removes the shadow. All the shadows can make it feel to busy. All credits to Brittney Singleton |
|
The |
|
I love that design! Strong support for adopting flavors from that :D Let me know if you want a hand implementing :) |
|
Made some quick examples using the web inspector
I changed from the current colors because they don't feel like colors I associate with being calm and reading. I enjoy green and brown because it reminds me of nature and the warm tone reminds me of paper. I changed "Book Timeline" to just "Timeline" as the tab already shows which timeline is viewed. I've added border radius around the cover containers and avatars. The sharp corners felt a bit off on them and this gives it a softer feel. |
|
I do also REALLY like the inline "comment" text; it puts some of the whitespace in that bottom buttons panel to productive use by reducing the amount of interaction to write a reply, and also makes the bottom panel UI make way more sense. |
|
Something like this @j6k4m8? Could fit the current design. 
In this case if the component becomes too wide you should put a max width on the input and align it to the right of the component whilst keeping the other buttons on the left. |
|
Putting in that comment action might be better suited for a different PR to not overload this with new functionality. |
|
yeah that's a great point. @mouse-reeve let me know if I shoudl jump in here :) |
|
@j6k4m8 Please feel free to! |
|
I really like these suggestions! I do want to keep changes incremental for now, so I would prefer to change the borders and padding and not the colors in this PR. And I agree with @dylanwe, moving the comment box is a great idea for a separate PR. I realize it's hard to be super granular about design when it's the whole thing you actually deal with, but I'd like to do a larger-scale re-think in the future and just some cleanup right now. I'm going to see if I can quickly make just the layout related changes, since I already have some work in place. It would be absolutely wonderful if someone here wanted to try their hand at moving the comment box! |
|
(I'd also like to be cautious about using GoodReads as a design reference, it's a little too close to home and I don't want to appear as if bookwyrm is a clone of it) |
mouse-reeve
changed the title
|
Can I get a vibe check on this status display in the feed: |
|
@mouse-reeve very understandable about minimizing the changes and not wanting to look like Goodreads. I think your new design already looks a lot better than the previous iterations! Mind that the border above the actions reply, boost, like has a different border color on top than you used on the card border. I also think that the title should be next to the book: 
The reason for that is that we group the action and the book overview. "User started reading" and below that we have the book details. But I wonder what @camyrland thinks of this as well. |
|
I did set them to different colors, but it looks weird in dark mode so I'm changing them to the same color. Moving the text is out of scope for this issue (it's a little more complicated than it might seem on the surface). Here is the current state of the PR for dark mode: |
I like it, but I'd drop the border between the main and footer part. I'd also prefer a single colour for the entire card, but hey, that's just me :) |
|
Thank you! I was skeptical but I tried it without the header color and border and I think it's more cohesive and clean. Updated screenshots: At this point, it sounds like we're basically all agreed that this change is an improvement on the existing layout, whether or not it's 100% exactly how you would do it. I would like to call this PR complete and merge it. That doesn't mean this is set in stone, or the ideas suggested here for other changes are dropped, just that the specific changes in this PR feel like a step forward. Could I get an emoji response from people who are happy to see this merged, and a reply with your thoughts if you don't want to see it merged yet? |
omg I'm SO SORRY I missed this! I can jump in once this is merged to start working on some of the next features we're discussing :) |
6 participants
Description
This removes a lot of lines, shadows, and whitespace from statuses in the feed.
Current feed:
Proposed change:
What type of Pull Request is this?
Does this PR change settings or dependencies, or break something?
Details of breaking or configuration changes (if any of above checked)
Documentation
Tests