Acceptance Criteria
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
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T72163 Edit conflicts (tracking) | |||
| Resolved | None | T139601 Better solutions to edit conflicts (#1) | |||
| Resolved | WMDE-Fisch | T195711 Make v2 of TwoColConflict: line based edit conflict handling | |||
| Declined | None | T198833 For non-js, the not used version should be greyed out |
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...
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.