Tinkering With UI

Status report: what to do with you and I

Royce Ayroso-Ong
3 min readMar 13, 2021

Hey everyone, it’s time for that weekly status report on the work done this week. I’ve taken a break from the reworking of the DynamicBanner as I’ve become a bit stuck as to how exactly it works (something that I’ll have to reach out to others to understand), and I’ve instead focused more on getting the whole Search Page UI ported and reviewing other team members PRs for updating the UI. Let's start off with two of my own UI issues: handling the size of inline images and updating the SearchHelp component.

During this week’s triage meeting we determined that the issue with the image sizing has been a thorn in our side for quite some time. The problem is that we have to choose between having all BlogSpot photos scaled and centred or having all photos scaled to 32px and inline. With the former option, small inline pictures (like the author's avatar) get scaled up like so:

However, this is intended for most of the other photos in a post (centred and scaled). If we go with the latter option to scale all images to 32px and scale down the header then this is what we get:

You may think that this would be the solution, and it does indeed fix the issues with the blog above, but it has unintended consequences — see below:

Credit to Ilya for helping me test my PR

We mentioned earlier that this has been an issue for a long time, and we risk having this issue become one of those things that just never gets resolved — so I believe the plan here is to just choose one of the options and roll with it. I think if it were solely up to me, I would go with the first solution and keep it how it is currently as to not risk ruining all posts by making every image within the post unviewable — maybe even include the new formatting for the header so that it isn’t oversized.

SearchHelp 2.0 Update

How the current SearchHelp operates is that it appears as an HTML tooltip when you click on an icon. For the new UI, the planned design scrapped this in favour of filling the empty whitespace with the SearchHelp instructions like so:

My implementation

I did my best to implement the design as it is shown, but how exactly it will function is still being decided. I’ve received feedback as to how to go about this (suggestions like making it disappear once the user enters a valid search, changing the font, and removing the centring of the text), I will end up hopping on a call with Ilya to figure out how to make the SearchHelp run smoothly and disappear once the user searches for a post — maybe we even redesign the thing altogether, we’ll see. I’ve pushed both of my first attempts at the issues (see Fixes #1791 and Fixes #1807) and after my midterm tomorrow, this is what I’ll be putting all my focus into so that by the next triage meeting it will be good to go and we can all have a nice-looking Search Page.

Until then, I wish you all a productive and relaxing weekend!

--

--

Royce Ayroso-Ong

Student at Seneca for Software Development. Stay awhile, and lets learn something new together!