Page MenuHomePhabricator

For non-js, the not used version should be greyed out
Closed, DeclinedPublic3 Estimated Story Points


Acceptance Criteria

  • Always the paragraph that is not used is greyed out
  • If the radiobutton selection changes, the greying out also changes

This needs to be done with magic css and might not be possible to do at all. So the 3 can also be understood as a timebox

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
WMDE-Fisch set the point value for this task to 3.Jul 5 2018, 8:36 AM

Proof of concept:

#before {
	float: left;
	margin-right: 0.5em;
textarea {
	border: 2px solid #000;
	height: 10em;
	opacity: 0.3;
	width: 20em;
input[type="radio"]:checked + textarea {
	opacity: 1;
<input type="radio" name="picker">
<textarea id="before">This is textbox allows you to edit the wikitext as it was before.</textarea>
<input type="radio" name="picker">
<textarea>This is textbox allows you to edit the wikitext as it was after.</textarea>

The main takeaway from this is that each radio button must be before the textarea it belongs to in the HTML source code (which is also superb for accessibility, btw). The demo code above uses float to move the buttons to their final position. I suggest to look into CSS grids instead.

The prototype uses a grid [1] to align the main columns. Looking at the way everything should be styled and designed, I am not entirely sure it the above is possible with the radio buttons right next the the thing that triggers the grayed out stuff. ( The style change could propagate to some child obviously so the thing that needs the gray does not have to be next to the radio, but still the radio should have no parent / sibling in between ). - Let's see then...


The elements must not be "right next" to each other, just so that the textarea is somewhere after the radio button. Instead of the + in the demo it should be possible to use any combination of > and +. The only thing CSS can not do is to traverse up the DOM tree.

The proof of concept requires a special ordering of the html, and our html does not fulfill the requirements. Everything else is much more costly.