Refresh design, refactoring code for much easy templating and code reading

[bouks]

Enhancements :

• new responsive design

• replacing png bars by css bars

• replacing png clocks by css clocks

• choice to have countries flags displayed with image or utf8 char

• replacing js tooltip system by css system

• add average filesize in pages report and downloads report

• code cleaning

New functionnalities :

• css vertical bars growing

• in-table horizontal bars integrated in each data columns (and with no extra column)

• table rows hovering

• new world map with hovering animation

• css vars for better and easy customisation

• stylesheet heritage or replacement

• Dark Mode

• Ratios table

• some expandable tables

• AWStats update notification (JSON::Parse modules needed to activate). Notification shows in the footer's page

Updating considerations :

Plugins using "ShowInfoHost" and "ShowInfoURL" MUST now return a string instead of directly printing (for reports)

CONF file changes:

• new FlagsType option to choose image or utf countries flags

• new ShowMap option to show or not a worldmap in countries reporting

• new StylesheetMode option to choose if your stylesheet override awstats stylesheet or if awstats stylesheet is ignored

• removing BarHeight option (replaced by a css var in stylesheet)

CONF visual options are migrating to css (BarWidth, colors, ShowBars etc...)

Close issues :

• https://github.com/eldy/AWStats/issues/260

• https://github.com/eldy/AWStats/issues/258

• https://github.com/eldy/AWStats/issues/235

• https://github.com/eldy/AWStats/issues/233

Still WIP but usable.

More and updated screenshots at : https://github.com/eldy/AWStats/issues/233

[bouks]

On the second commit, title is not complete, should be : "set background TH color to css"

[IGLOU-EU]

Congrats, review all this old Perl is a nightmare :rofl: I like the "HtmlBar" function, much better. Why are you keeping some embedded style like "<div style="font-size: 0.5rem;">$YearRequired" ?

[bouks]

@IGLOU-EU Thanks. I'm not a perl coder, so it's like holidays from my point of view. 😄

For the font-size, i was just converting from px to em while reading the code. But, sure, removing styles, old html attributes and set css classes is good.

We'll see. If @eldy merge the commits and is interested to move further this way (for the 8.0) i can do some rendering stuffs, opening for much easier theming and more modern design. It's not a complex work, it takes just some time.

[bouks]

@eldy

Important modification regarding using **"AddHTMLStyles$pluginname"**_ plugins in this commit : https://github.com/eldy/AWStats/pull/256/commits/5d41ad7364a5edc8548c774ca178af879c194a50

Read the comment.

[bouks]

Note :

The worldmap used to show countries is SVG.

Github count it as code and add 3272 lines to the PR.

[bouks]

actually saved 1115 lines (5%) in awstats.pl 😃

[eldy]

I tested your PR,but this is what i got with the unit test

Graph are no more visible. The summary part does not show any more difference between human and not human traffic Also it is difficult to see separation between each array. I have also some html error in some html part. It is difficult to me to report what's wrong on each change because all changes are cumulated into the same PR making not possible for me to analyse each change and validate them one by one.

[bouks]

Hi @eldy

I didn't work on the graph for the moment because i don't use it and it is noted as experimental in the conf file. I though it is "on development", and i saw in issues that google one doesn't work anymore.

Sorry. It seems i don't understand very well the pr system from a fork. I did a pr for the bars and the clock, and after all my commits added to the PR.

PS: i managed to find the problem with the graphapplet plugin (printing directly, and format_byte function i included html in). I fixed it, but i can't test since i have not java in all my browsers (but all is well written in the html code with the fix). I think remember java applets in browser have been discontinued for some years.

[ShaiMagal]

"Ofttopic" - problem with charts is already discussed here #249 (not solved, there is necessary to change "chart library")

[dannybeckett]

UTF8 country flags is a great idea. They don't display on Windows very well, but it is very easy to fix using https://github.com/talkjs/country-flag-emoji-polyfill