Minor UX regressions #649

Closed
opened 3 weeks ago by prologic · 18 comments
prologic commented 3 weeks ago
Owner

Over the past few weeks of significant UI/UX improvements -- Thank you @ullarah we missed a few things along the way, here they are in no particular order:

  • The width of the default theme is too large, let's go back to what we had before
  • It is no longer possible to post from someone Profile view, let's bring that back
  • There used to be some dotted lines under the In-reply-to which is a nice visual break, let's bring that back too
  • The spinner on the Post button no longer works, let's fix that.

Anything else @fastidious ?

Over the past few weeks of significant UI/UX improvements -- Thank you @ullarah we missed a few things along the way, here they are in no particular order: - [x] The width of the default theme is too large, let's go back to what we had before - [ ] It is no longer possible to post from someone Profile view, let's bring that back - [x] There used to be some dotted lines under the In-reply-to which is a nice visual break, let's bring that back too - [ ] The spinner on the Post button no longer works, let's fix that. Anything else @fastidious ?
prologic added the
bug
area/ui
labels 3 weeks ago
Collaborator

Lunch time fixes! Hooray!

May require some slight changes width max-width and font-size but I played around for a bit and this seems to do the trick quite nicely.

#650

Lunch time fixes! Hooray! May require some slight changes width max-width and font-size but I played around for a bit and this seems to do the trick quite nicely. https://git.mills.io/yarnsocial/yarn/pulls/650
Poster
Owner

Lunch time fixes! Hooray!

May require some slight changes width max-width and font-size but I played around for a bit and this seems to do the trick quite nicely.

#650

@fastidious Please review before I go blindly mrege it (no phun intended!) 😂

> Lunch time fixes! Hooray! > > May require some slight changes width max-width and font-size but I played around for a bit and this seems to do the trick quite nicely. > > https://git.mills.io/yarnsocial/yarn/pulls/650 @fastidious Please review before I go blindly mrege it (_no phun intended!_) 😂
Collaborator

Dashed line is now back in the in-reply-to section only.

Dashed line is now back in the in-reply-to section only.
Collaborator

@prologic the spinner is going to be replaced with pico.css internal aria-label spinner instead of doing our own. This chane will fix that issue. Will need a bit longer than a standard 1hr lunch time to fix that though! 😂

@prologic the spinner is going to be replaced with pico.css internal aria-label spinner instead of doing our own. This chane will fix that issue. Will need a bit longer than a standard 1hr lunch time to fix that though! 😂
Collaborator

@prologic @fastidious regarding the post box on user profiles. What are your thoughts on keeping the post box right at the top, just below the menu, to keep it consistent with the other pages.

It might also be nice to auto-add the user handle in the post box on the reply page too?

@prologic @fastidious regarding the post box on user profiles. What are your thoughts on keeping the post box right at the top, just below the menu, to keep it consistent with the other pages. It might also be nice to auto-add the user handle in the post box on the reply page too?
Poster
Owner

It might also be nice to auto-add the user handle in the post box on the reply page too?

Please 🙏 This would be great!

> It might also be nice to auto-add the user handle in the post box on the reply page too? Please 🙏 This would be great!
Collaborator

Haven't added the user handle in the post box but that'll be for another day unless somebody feels like adding it! See PR #652

Haven't added the user handle in the post box but that'll be for another day unless somebody feels like adding it! See PR https://git.mills.io/yarnsocial/yarn/pulls/652
Poster
Owner

Running the two fixes on my pod righ tnow (not yet merged)

Running the two fixes on my pod righ tnow (_not yet merged_)
Collaborator

I commented on the PR itself. There are issues on mobile now. Some wonkiness with page width (specifically when replying/posting a twt), and fonts and icons super tiny. I am not running it on my pod yet, but will sometime after I leave this comfy bed. :-)

I commented on the PR itself. There are issues on mobile now. Some wonkiness with page width (specifically when replying/posting a twt), and fonts and icons super tiny. I am not running it on my pod yet, but will sometime after I leave this comfy bed. :-)
Poster
Owner

Re-rolling my pod with the develop branch updated to include both PRs for easier testing/review 👌

Re-rolling my pod with the `develop` branch updated to include both PRs for easier testing/review 👌
Collaborator

Even on desktop the font is too small, and the interface is still wider than it used to be. See https://twtxt.net/conv/wikoqfq for an example. See that image? It is sized to fit of what it used to be the width of the usable twt area before (around 850px).

Even on desktop the font is too small, and the interface is still wider than it used to be. See https://twtxt.net/conv/wikoqfq for an example. See that image? It is sized to fit of what it used to be the width of the usable twt area before (around 850px).
Collaborator

If the interface is to be left at the current width, then the resizing algo on yarnd needs to be changed to accomodate.

If the interface is to be left at the current width, then the resizing algo on yarnd needs to be changed to accomodate.
Collaborator

Sidenote, careful with what you do on your pod, @prologic. More people are using it as "their" pod, and you are bound to upset users eventually--it is the price you pay for being popular.

I recommend you spawn a beta.twtxt.net or something like that, even if you keep the data in synch across.

Sidenote, careful with what you do on your pod, @prologic. More people are using it as "their" pod, and you are bound to upset users eventually--it is the price you pay for being popular. I recommend you spawn a beta.twtxt.net or something like that, even if you keep the data in synch across.
Collaborator

Even on desktop the font is too small, and the interface is still wider than it used to be. See https://twtxt.net/conv/wikoqfq for an example. See that image? It is sized to fit of what it used to be the width of the usable twt area before (around 850px).

Font size is now increased to a generalised 16px across board instead of matching width of media. I have tested this across multiple devices and imho it suits all devices of standard zoom level.

Media is now fit to width of containers with a little bit of extra padding at the bottom so as to not squish the text right under the media.

900px is the maximum size of the container.
This is a general standard for most responsive based media.

These changes are live on my instance at: https://txt.quisquiliae.com

> Even on desktop the font is too small, and the interface is still wider than it used to be. See https://twtxt.net/conv/wikoqfq for an example. See that image? It is sized to fit of what it used to be the width of the usable twt area before (around 850px). Font size is now increased to a generalised 16px across board instead of matching width of media. I have tested this across multiple devices and imho it suits all devices of standard zoom level. Media is now fit to width of containers with a little bit of extra padding at the bottom so as to not squish the text right under the media. 900px is the maximum size of the container. This is a general standard for most responsive based media. These changes are live on my instance at: https://txt.quisquiliae.com
Poster
Owner

@ullarah According to code changes that affected the container width and media processing the widdth shluld be 850px, see:

#!go
internal/handlers.go:24:	MediaResolution  = 850 // 850px width (maintaining aspect ratio)
internal/handlers.go:25:	AvatarResolution = 360 // 360px width (maintaining aspect ratio)
@ullarah According to code changes that affected the container width and media processing the widdth shluld be `850px`, see: ``` #!go internal/handlers.go:24: MediaResolution = 850 // 850px width (maintaining aspect ratio) internal/handlers.go:25: AvatarResolution = 360 // 360px width (maintaining aspect ratio) ```
Collaborator

I shall change it to 850px as per code then.

I shall change it to 850px as per code then.
Poster
Owner

I shall change it to 850px as per code then.

Can you swap the post-box around as per @fastidious 's suggestion in the other PR and I'll merge them both now and roll my pod.

Hopefully we're addressed most regressions here 🤞

> I shall change it to 850px as per code then. Can you swap the post-box around as per @fastidious 's suggestion in the other PR and I'll merge them both now and roll my pod. Hopefully we're addressed most regressions here 🤞
Collaborator

@prologic As I only have 4 minutes left on the clock I will endevour to get this done tonight 😄

That and the rotating icon thing.

@prologic As I only have 4 minutes left on the clock I will endevour to get this done tonight 😄 That and the rotating icon thing.
prologic closed this issue 3 weeks ago
Sign in to join this conversation.
Loading…
There is no content yet.