UI : align overview and todays UI with centered stats #182

[alexbelgium]

Proposal to align UI on the overview page to the Today's Detections page. Advantages :

• Aligned UI
• See the stats on mobile

This new UI is only visible on small screens (when left-column was hidden). For larger screens the UI doesn't change

The name of some table titles was adapted to be more suitable to the horizontal form : proposal to rename "Total Unique Species" to "Total Species" as the unique is implied

Idea @jmtmp @Svardsten53 : https://github.com/Nachtzuster/BirdNET-Pi/discussions/182

Large screen :

Small screen (mobile) :

[alexbelgium]

CSS could be used to show previous ui (left column) or new ui (centered table) depending on the screen size. This would allow to mimic the same behavior as currently except for mobiles where the table would be shown instead of being hidden.

What is preferable, this behavior based on screen size or a single centered table?

[lloydbayley]

I know it makes logical sense to have it all in front of you but I kinda like it on the left as it feels a little 'busy' under the buttons. What about an option in settings for Vertical/Horizontal display of the stats? Best of both worlds?

[alexbelgium]

Ok ! Even better, we could probably have both, with the correct one appearing depending on the screen size. I just hope this is possible in php

[lloydbayley]

Yikes! Would it not be easier to implement with a choice in settings for now and add the auto thing later on? Mind you, we're going to need a dedicated setup page for UI stuff soon! :)

[alexbelgium]

Actually it's quite easy. I'll just re-add the left-column and say that the column is hidden or not depending on the screen size. The css is already formatted this way

[alexbelgium]

Now working with dynamic layout! But stats are refreshed twice this is non optimal we'll have to extract them in a third function

[alexbelgium]

I can't find an easy way to avoid having the sqlite queries in both ajax calls. Well, anyway it seems to have an extremely low overhead so we could keep it that way.

The code would therefore be considered as ready :-)

[lloydbayley]

Understood, it's a tough call. Messing with things in that realm can be scary.

[alexbelgium]

Understood, it's a tough call. Messing with things in that realm can be scary.

Thanks! Have you tried the dynamic layout and is it working fine for you?

[lloydbayley]

Not yet, but will report when i do!

[lloydbayley]

Sorry, forgot to report in. Yes, alignment seems to be working for me so far!

[Nachtzuster]

Nice

@alexbelgium I see the DB queries got duplicated. Could you consolidate these?

[alexbelgium]

Hi, the sqlite queries are now aggregated in a single function that is called by ajax_left_chart (to generate then get the data), and ajax_center_chart (get the data only)

[alexbelgium]

I've modified so that the center_chart only loads after the left_chart. This way : left_chart loads, triggering the stats updates. When it completed, it calls center_chart (of course not a chart by anyway that was the initial name convention) which then retrieves the stats values. This avoid both duplication of code for the 2 sets of sqlite commands, but also duplication of sqlite variables generation.