You spoke, we answered

shawnlauzon (58)in LeoFinance • 4 years ago (edited)

Improving the LeoFinance interface (coding details inside)

As you have seen, we recently made some changes to the UI (or User Interface). In addition to adding notifications and improving the look and feel of the mobile interface, many smaller changes were made to allow the site to work better on a wide range of screens. This is called making it "more responsive".

Unfortunately, one unintended side effect that some people didn't like was the change to how items in the footer were laid out. Here are some examples:

We listened—and now it's better!

With the newest change from a few minutes ago:

Basically, each of the groups of icons are now grouped together so that they always stay together. And it is done in a way that even if the screen is very small, it still looks reasonably good, although still crowded. For example, here's one particularly crowded screen widget that still stays on one row, even though there's not much space:

Why was the original change done anyway?

I wanted to take a few moments and talk about why the change was made in the first place. A lot of people on the site seem to use the site in a widescreen mode, and so don't notice that when things don't fit well on a smaller screen. However, I like to have other things on the screen at the same time as the browser. Here's an example of the old UI on such a screen:

The icons on the post details page really got bad:

The solution for this is a newer web technology known as "flexbox".

WTF is a flexbox?

This is the best overview of flexbox I've found. I'll let them describe it:

The Flexbox Layout ... aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

For LeoFinance, the front screen adjusts from a 3-column layout for wider screens to a single-column layout for mobile. Within each of these columns, flexbox is used to specify how things are laid out. Although we used flexbox in earlier versions of the UI, the change from a couple weeks ago used more of its capabilities for the footer. Which was a good idea, however we used it poorly.

With flexbox, rather than saying exactly how much space each element should take up, you tell the layout what should it do with extra space. The reason the old layout overflowed into 3 rows was that the space between was fixed (saying exactly how much space to take up between each item). And this resulted in overflowing to the next row rather.

So the first thing I did was to remove all the space around the items. This made them look like this:

and then I told flexbox to take the extra space and put it in between the icons. We do this in CSS as follows:

.content-actions {
  display: flex;
  justify-content: space-around;
}

The result on my screen looked like this:

However as the screen increased, everything would get too spread out

More flexbox to the rescue

The problem I realized is that I was telling the set of icons to take up more space when their containing box grew (this is the default), but what I want is to take up less space when it shrinks. And we do that by adding a line flex:

.content-actions {
  display: flex;
  justify-content: space-around;
  flex: 0 2 160px;
}

That last line means:

Don't grow when there's more space (0)
Shrink when there's not enough space (2)
Ideally, take up (160px)

You can play around with that on your own: just make your browser bigger and smaller and see how the items in the footer take up more and less space.

A change not yet made

Another concern I saw was that the padding between elements is now not enough. I agree on this and want to give the elements more space, but I'm curious what you think about it. Here's how it looked before:

and now:

I think before the right column was too small, but also that the padding was reduced too much. It's very simple to add some more padding, but I'm curious about your thoughts.

Thank you for the feedback!

We really welcome your thoughts about the UI. Although we would love it if everything was positive, we also know that some changes won't be liked by everyone. The beautiful thing about having our own community is the voice to make a difference, simply by expressing our opinions. We monitor the sentiment coming through the platform (and on Discord), and strive to build the best platform which balances the perspectives of the widest range of people. While we can't make everyone happy, we will strive to improve the experience for as many people as possible.

In the next week or so, there will be more opportunities to express what you think should be next added to the platform. We hope you'll share your opinions and views for the future.

And if people like seeing this level programming detail, I will continue to write more content like this.

And thanks again for the feedback about the interface!

	You distributed more than 500 upvotes. Your next target is to reach 600 upvotes.
	You received more than 1250 upvotes. Your next target is to reach 1500 upvotes.
	You made more than 300 comments. Your next target is to reach 400 comments.

You spoke, we answered

Improving the LeoFinance interface (coding details inside)

We listened—and now it's better!

Why was the original change done anyway?

WTF is a flexbox?

More flexbox to the rescue

A change not yet made

Thank you for the feedback!

Support the HiveBuzz project. Vote for our proposal!

Support the HiveBuzz project. Vote for our proposal!

Support the HiveBuzz project. Vote for our proposal!

Support the HiveBuzz project. Vote for our proposal!