Restructure Gloss Detail Template

[susanodd]

This code is a mess.

ADDITIONAL

The Django forms are generated dynamically. The structure of this page is a gigantic "editable" table. (Dynamic javascript plus ajax for every cell.) Because it is all dynamic, this causes the width of cells you click on in Edit mode to adjust their width and layout. There are OK and Cancel buttons for all of these. It so happens that things generated dynamically end up overlapping each other. Some of this has been repaired in #1199. But many fields still have this problem.

LAYOUT Because Bootstrap shows extremely thin borders on things, the lack of structure is not apparent.

But there are rows of different lengths all masquerading as a giant table.

The element nesting "table tr" without any thead of tbody structure causes problems.

For illustration purposes, the table rows are show in dark mode. Here the problem with the lack of structure is obvious.

[Jetske]

<style>
    tr {border-bottom: hidden;}
</style>

@susanodd In the gloss detail html this works, so in dark mode change the border-bottom of tr (and/or th and td) to either 'hidden' or maybe a darker grey ('1px solid grey' or something).

Maybe I'm not seeing the right white lines though, as I didn't try editing this in dark mode myself. Let me know if this doesn't solve it!

We can also think about keeping them hidden in both light & dark mode, I think it looks quite nice without the lines

[susanodd]

The above tweak is on signbank-susan (where dark option is available).

But now this is having adverse effects on pages that make use of borders. They're all missing the bottom border now. It also does not seem possible to override this to put the border back. At least I don't know how yet. It's not clear what the order of evaluation is for the css directives.

[susanodd]

UPDATE Based on the Frequency List template (under the Analysis menu), it looks like the combination Django + Bootstrap + dynamically generated content has problems with determining where things end according to the nesting structure of the html elements on the page. For example, the bottom border of a dynamically generated table is actually in the lower half of the table, running through the data. The "aesthetic" "well" layout of Bootstrap looks unpleasant because of this. The outline doesn't surround the content, it ploughs through it.

[susanodd]

GlossDetail is still a mess. Some code has been modified by other issues. Ideally extra templates would be used inside the page.