Page MenuHomePhabricator

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

Description

Acceptance Criteria

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

Notes
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 project: TCB-Team. · View Herald TranscriptJul 5 2018, 8:34 AM
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
Lea_WMDE updated the task description. (Show Details)Jul 5 2018, 8:39 AM
thiemowmde triaged this task as Low priority.Jul 5 2018, 9:09 AM

Proof of concept:

<style>
#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;
}
</style>
<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...

[1] https://tools.wmflabs.org/wmde-editconflict-test/core/index.php?title=Spezial:SimulateTwoColEditConflict

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.

Lea_WMDE closed this task as Declined.Sep 13 2018, 3:01 PM

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.