Attempt to improve gui design

[hannaeko]

Purpose

Try to improve the overall look and feel and accessibility of the GUI.

Context

Changes

Highlights :

• Make the "about" lines shorter by making this area double columns and adding an decorative picture
• Improve color contrasts and make color usage more uniform
• Group inputs in fieldset and add visible label for all fields in advanced form
• Change FAQ layout: This change needed to move the content of the FAQ into the code and integrate it to the "Angular translation system" instead of having separate markdown files. This means that translated FAQ will need to be imported, knowing that I have changed some wording at the same time. Also I took this oportunity to test crowdin.com integration, https://crowdin.com/project/zonemaster-test.
• Slightly bigger font size and line height
• Make document outline more consistent.
• Replace links that looks like buttons in result filter area
• Add labels and group fields in result filter area, add expand + collapse buttons

My todo lists

Things I want to do (in this PR)

• Make "about" lines shorter
• Improve contrast between active and not active navigation links
• Make color usage more uniform
  • disabled primary button color
  • secondary button color -- change or keep ?
  • lighten danger and secondary button on hover instead of darkening them
• Try to improve "about" information visualization in "about" text (use markup)
  • About zonemaster
  • About DNS need to change the text, not doing this now
• Improve accessibility of advanced option form:
  • make labels visible
  • use a fieldset to group NS and DS inputs
• Improve accessibility of result filtering form
  • maybe replace links that look like buttons with checkboxes and labels in fieldset
  • Move help / severity level info out of tooltips
• Improve document outline
  • replace h4/h5 with h2/h3 in about section
  • Add section + headings for form / result in result page
• Improve "program version" (at least make the "program version" thing a link so it is an actionable item)
• Expand (+ highlight?) text in search result not in this PR
• Change FAQ layout
  • add "expand" button for each section -- surprisingly hard to do, need more thoughts

Things that I broke and need to fix

• fix advanced form NS and DS inputs wrapping for medium / small screens
• main heading for result page
• fix message banner
• Click on faq entry update url fragment
• change of url fragment open faq entry
• fix link in info alert in advanced form
• i18n (french translation done)
• fix advanced switch (transition too long for focus outline, colors don't match other secondary buttons)

How to test this PR

A live version is deployed at https://zonemaster.fr

// TODO

[matsduf]

@blacksponge, have you considered #315 in this PR?

[hannaeko]

I have, but it is actually out of scope. I am not touching the results details in this one.
I do plan to improve it in the future, to also address the point Expand (+ highlight?) text in search result that I have crossed out of the todo list for now.

[hannaeko]

• The line under the h2 has been removed
• A mention to the image license has been added to the readme
• The default contact address has been changed to zonemaster@

[hannaeko]

tests have been updated, I just need to update the screenshots for this to be fully ready

[matsduf]

* The default contact address has been changed to zonemaster@

The problem is that it will lead to a lot of spam. The contact@ should work in the sense that you get a pointer to the page about mailing lists. I have asked IT why it does not. The risk is that we will have to do the same thing with the zonemaster@ address.

[hannaeko]

The problem is that it will lead to a lot of spam. The contact@ should work in the sense that you get a pointer to the page about mailing lists. I have asked IT why it does not. The risk is that we will have to do the same thing with the zonemaster@ address.

Is it working though ? Because from yesterday's tests it did not seem to work. And putting a non working email address is kind of misleading.

[matsduf]

The problem is that it will lead to a lot of spam. The contact@ should work in the sense that you get a pointer to the page about mailing lists. I have asked IT why it does not. The risk is that we will have to do the same thing with the zonemaster@ address.

Is it working though ? Because from yesterday's tests it did not seem to work. And putting a non working email address is kind of misleading.

It is actually working when I just tested. In the working group we agreed to have it working like this, and using the adresse as the outward facing email address.

I got the following:

Date: Fri, 8 Dec 2023 09:03:41 +0000
From: contact zonemaster <[email protected]>
To: Mats Dufberg 
Subject: Automatic reply: Testmeddelande contact

This mail address has been closed to excessive amount of spam messages.
Please follow the link below for how to contact the Zonemaster project.

Cette adresse e-mail a été fermée suite à un nombre excessif de messages
indésirables. Veuillez suivre le lien ci-dessous pour savoir comment
contacter le projet Zonemaster.

https://github.com/zonemaster/zonemaster/blob/master/docs/contact-and-mailing-lists.md


Thank you/Merci

Zonemaster Project
https://github.com/zonemaster/zonemaster/
https://zonemaster.net/

[matsduf]

@blacksponge, could you test sending an email to contact@?

[matsduf]

• The line under the h2 has been removed

Yes, I could see that. That is better.

[hannaeko]

could you test sending an email to contact@?

I just sent a email to [email protected] (from both my personal and work email) and did not receive any response yet.

[hannaeko]

The tests are now passing. What should I do regarding the email address?

[matsduf]

The tests are now passing. What should I do regarding the email address?

Please keep contact@. I will make sure it works for you anyone as for me. Please send the mail addresses you sent from to my email.

[matsduf]

Shouldn't this text be in the LICENSE file instead?

[hannaeko]

Honestly I don't know. There was already no need to put a mention of the license in the first place.

Is this blocking or can this PR be merged?

[matsduf]

Please note that I have approved. I.e. not blocking at all.

[hannaeko]

Okay thanks, I will merge this so I can move on with the other PRs, and if we see the need we can rewrite this section / move it to the license file.

[tgreenx]

v2023.2 Release Testing

The "How to test" section was not done so I came up with my own testing, keeping in mind the "Changes" section of this PR when browsing:

• I used Firefox and its "Responsive Design Mode" functionality to test in different resolutions.
• I went through every pages (/run-test, /result and /faq) using every functionalities in each page.

I didn't find any obvious issues.