improvement: frontend layout

[Septias]

closes #163 closes #168 closes #169

[Septias]

As an intermediate state with reduced space usage:

[Septias]

This is how it looks with separating lines:

[Septias]

Another mockup with the update button at the bottom:

[Septias]

I still like the bordered view that can be seen in the first image even though it is a little more cluttered because it makes the other elements (search and update) more natural. But there are still a lot of small changes that can make a huge difference so in the end it's just about fiddling around with it a bit. Please make suggestions and refer to the different pictures I posted so we can together work towards a nice layout :)

[link2xt]

Placeholder is selectable if you start dragging outside the field. I think it is a bug, such selected placeholder cannot even be deleted. Could this be made a real HTML field placeholder?

[r10s]

Another mockup with the update button at the bottom:

my approval refers to this (the third) version; however, the "button" layout is a bit weird with the text as there is no "actionable title". please use normal text plus a (blue) link "Update now", so, sth. as

(the link color + size should be same as the more/less links)

and i would maybe skip the very first line (so add lines abottom of each item) - this probably makes also layout a little bit easier when the missing "sorry, nothing found text" is added (cmp https://github.com/webxdc/store/issues/168, currently, in this case only the line is shown)

[Septias]

Placeholder is selectable if you start dragging outside the field. I think it is a bug, such selected placeholder cannot even be deleted. Could this be made a real HTML field placeholder?

it actually is

[Septias]

The line above was added by me later as otherwise there is no clear separation between the search bar and the apps

[Septias]

[Septias]

Footer is now at the bottom and the text is changed so I added the two issues #168 and #169 as closed @r10s

[r10s]

thanks a lot!

• empty-search-hint and footer looks much better

• looking at the screebshot, the icon are not much smaller, or?

idea was to make the lower border of the icon roughly same position as baseline of "More". and the upper border of the icon roughly same position as ascent line of title.

maybe try out 1.9em or 2.0em?

then, check that default size of desktop shows about 26 characters (this is a size that is also reachable with most phones) and/or adapt xdcget docs to match the layout so that in most cases no ellipsis is shown

note, that the first line must not be repeated in the "More" view

nb: i am afk today, so feel free to merge to move forward if things block otherwise, do not wait for me :) these are already great improvements, and we can always do a follow up pr

[Septias]

So you don't want the icon to be centered?

[Septias]

This feels way too small for me for some primary action buttons. (1.9 em)

[r10s]

wait, i am talking about the left app-icons, the right action-icons are fine so far 😅

and yes, things should stay vertically centered, just a little bit smaller

[Septias]

[r10s]

yeah, sth like that, +1, i think, this is good enough for now (final tweaks are hard to do over pr comments, it is better when one sees the result directly)

thanks a lot!