ElkArte Community

Elk Development => Theme development => Topic started by: AaronB on March 22, 2014, 08:47:55 pm

Title: Font Size and Spacing in Reports
Post by: AaronB on March 22, 2014, 08:47:55 pm
Because of my age and eyes, I am pretty keen on pages being readable.  I have noticed in the Admin Center>Reports section the reports are displaying with a wee tiny font and in bold. I would like to offer the below changes as suggestions to try. I belive with the below changes all users of the Reports section will be satisfied with the readability of the reports. I did look around other pages and did not see where the below changes adversely affected something else.

In themes\default\css\admin.css make the below changes ..

Code: [Select]
.table_caption, tr.table_caption td {
    color: #000;
    font-size: .855em;                /* original .714 made letters too small in reports */
    font-weight: bold;                /* original is bold, does work as normal also, bold seems better */
}


In themes\default\css\index.css make the below changes ..

Code: [Select]
/* Basic cells. */
.table_grid td, .letterspacing{
    padding: 5px 4px;                    /* original was 5px 8px, made reports awkward */
    border-bottom: 1px solid #ccc;
}


The report that is improved the most with the above changes is the Membersgroup report.
Title: Re: Font Size and Spacing in Reports
Post by: Antechinus on March 22, 2014, 09:43:14 pm
0.714 em is ridiculously tiny. I have no idea why some people think making things hard to read is good interface design. It's possible it was coded by someone who is using a display with a very coarse pixel pitch, but it's not suitable for general use.

The standard sizes used elsewhere are based on 1em being 14px. The smallest I used anywhere in the Elk alpha CSS was 12px (0.857em) apart from a couple of limited exceptions that don't really need to be read (new posts icon, etc). This is a good minimum size that is still pretty easy to read on most screens.

Using pure black (#000) on a pure white background (#FFF) is not good for general readability either. It can cause problems for some people. Better practice is to use a very dark grey (#333 works well).
Title: Re: Font Size and Spacing in Reports
Post by: TE on March 23, 2014, 04:07:32 am
fixed here:
https://github.com/eurich/Elkarte/commit/95c0e289c8021d5800449e0f524aebe1ce62a2d3
Title: Re: Font Size and Spacing in Reports
Post by: AaronB on March 23, 2014, 01:57:48 pm
Greetings TE,

Thank you for the above changes. There is one more item to look at in the reports section and that is in the Board Permissions report. The font is set for 'strong' for the permission types. This is only is occuring in the Board Permissions report; the font is normal for the other reports. 

The 'strong' setting is a bit much for the visual layout and is even more apparent (due to colors) in a theme I am working on. Can that 'strong' be removed?

Regards,


p.s. ... not trying to be picky, just trying to get consistency and eye appeal for the default theme and its varients.  :)
Title: Re: Font Size and Spacing in Reports
Post by: Antechinus on March 23, 2014, 04:36:59 pm
That should be done via CSS, not via HTML strong tags. It's a myth that these are better for a11y. Screen readers ignore them (and ignore em tags and all the other "voice" tags).
Title: Re: Font Size and Spacing in Reports
Post by: TE on March 23, 2014, 04:45:58 pm
Quote from: AaronB – Greetings TE,
The 'strong' setting is a bit much for the visual layout and is even more apparent (due to colors) in a theme I am working on. Can that 'strong' be removed?
Yep, I'll check ..
Title: Re: Font Size and Spacing in Reports
Post by: TE on March 27, 2014, 07:27:49 am
fixed, https://github.com/eurich/Elkarte/commit/b37e1f174c42b6b6f6eb5b6f1fb993aff8a3cc93
Title: Re: Font Size and Spacing in Reports
Post by: AaronB on March 27, 2014, 05:58:18 pm
 :)   That looks very nice now. Thanks!