Welcome to Codidact Meta!
Codidact Meta is the "town hall" (meta-discussion site) for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Contrast of edits diff view is not strong enough
This edit consists mostly of small corrections on punctuation and typos. Currently, the edit diff view highlights the whole paragraph in which a change was made in green/red background, and uses bold+underline font to highlight the actual changes, which I believe is too faint contrast.
For example, try to find the edited commas in this fragment of the diff:
I think the diff view could be significantly improved by increasing the contrast of the changed characters, perhaps by making them yellow or cyan background.
1 answer
I made a local stylesheet that fixes my major complaints with the current style.
.diff .diff-section .diff-old,
.diff .diff-section .diff-new {
padding-left: 12px;
}
.diff ul li {
border-left: 8px solid #0000;
padding-left: 12px;
}
.diff ul li.del {
border-color: #e55;
border-left-style: dotted;
}
.diff ul li.del strong {
background-color: #f6b4b4;
padding: 0 2px;
border-radius: 3px;
}
.diff ul li.ins {
border-color: #5c7;
}
.diff ul li.ins strong {
background-color: #a8ebc4;
padding: 0 2px;
border-radius: 3px;
}
ins,
del {
background: none;
padding: 0;
margin: 0;
}
It's not perfect, either:
There's a left padding on each first-line I didn't try hard enough to get rid of.I used a negative left margin, which I normally frown upon.- Completely new lines (not modifications) do not have any
<strong>marking, so they only get the left border. This may be unintuitive.
There should be a larger discussion about making sure accessibility is accounted for. My only sop to that was different border styles.
If this sort of change is useful for a PR, let me know. We could also change the border to use images of - and + instead of the dots and solid line.
0 comment threads
1 comment thread