User:Izno/Sandbox/Navbox

This page documents some potential new ways to make the meta template/module Template:Navbox. It's a sketch to work out what the template should output at the end of the day.

Alternatives edit

Con of current: The majority of the parameters you put in (aside from the label/data parameters) are not tabular. Note "full data cells" are also not tabular but usually contain only child infoboxes. And even the label/data parameters are not particularly tabular (i.e. could be represented as key-value pairs i.e. with an HTML description list).

Con of alternatives: Labels/data no longer are nicely columnar without explicit CSS (in the case of desktop resolutions)? Maybe not even then? We could set display to table-cell but then we have to wrap each 'row' in a div or something, which might work with a pure-div solution or a mixed table solution but not with a description list.

Whole table (current) edit

<div class="navbox">
  <table class="navbox-inner">
    <tr><th class="navbox-title" colspan="3">{{{title}}}</th></tr>
    <tr><td class="navbox-abovebelow" colspan="3">{{{above}}}</td></tr>
    <tr>
      <!-- navbox-leftimage elided here -->
      <th class="navbox-group">{{{group1}}}</th>
      <td class="navbox-list">{{{list1}}}</td>
      <td class="navbox-image" rowspan="3">{{{image}}}</td>
    </tr>
    <tr>
      <th class="navbox-group">{{{group2}}}</th>
      <td class="navbox-list">{{{list2}}}</td>
    </tr>
    <tr>
      <td class="navbox-list-groupless" colspan="2">{{{list3}}}</td>
    </tr>
    <tr><td class="navbox-abovebelow" colspan="3">{{{below}}}</td></tr>
  </table>
</div>

Whole table CSS

.navbox * {
	box-sizing: border-box;
}
.navbox-inner {
	display: flex;
}

.navbox-inner > tbody {
	display:flex;
	flex-direction:column;
	width: 100%;
}

.navbox th br {
	/* we don't need linebreaks in vertical layout */
	display: none;
}

.navbox th,
.navbox td {
	display: flex;
}

.navbox .mw-collapsible-toggle {
	flex: 0;
	order: 3;
}
.navbox .navbar {
	flex: 0;
	order: 2;
}
.navbox-subgroup {
	border-left: 1px solid #ddddff;
}
.navbox th > *:not(.navbar):not(.mw-collapsible-toggle) {
	flex: 1;
	text-align: left;
	margin: 0 !important; /* override reserved space for navbar and collapse toggle */
}
.navbox-group.navbox-group {
	width: initial !important; /* inline width: 1% */
	text-align: left;
}

"Basic" div edit

This could work with display: table or display: grid + flex (maybe on the latter; display: table).

<div class="navbox">
  <div class="navbox-title">{{{title}}}</div>
  <div class="navbox-abovebelow">{{{above}}}</div>
  <div class="navbox-main">
    <div class="navbox-leftimage">{{{image-left}}}</div>
    <div class="navbox-content">
      <div class="navbox-group">{{{group1}}}</div>
      <div class="navbox-list">{{{list1}}}</div>
      <div class="navbox-group">{{{group2}}}</div>
      <div class="navbox-list">{{{list2}}}</div>
      <div class="navbox-list-groupless">{{{list3}}}</div>
    </div>
    <div class="navbox-image">{{{image}}}</div>
  </div>
  <div class="navbox-abovebelow">{{{below}}}</div>
</div>

The CSS for this is experimentally implemented at Template:Navbox/div.

List of lists edit

A list of lists could work.

Major issues:

A bunch of CSS :not() would need to be added in the context of .hlist and .plainlist statements. This is because hlist and plainlist both are applied by navbox at the level of the container items, and it would be hard to delineate between nested series of lists and nested navboxes, among other questions.
Probably needs CSS subgrid to be widely supported.

Pro: Accessibility concerns of dizzying divs are ameliorated. I don't think this is a primary concern though since all the links in a navbox should effectively be in a list already.

<div class="navbox">
  <div class="navbox-title">{{{title}}}</div>
  <div class="navbox-abovebelow">{{{above}}}</div>
  <div class="navbox-main">
    <div class="navbox-leftimage">{{{image-left}}}</div>
    <ul class="navbox-content">
      <li>
        <div class="navbox-group">{{{group1}}}</div>
        <div class="navbox-list">{{{list1}}}</div>
      </li>
      <li>
        <div class="navbox-group">{{{group2}}}</div>
        <div class="navbox-list">{{{list2}}}</div>
      </li>
      <li class="navbox-list-groupless">{{{list3}}}</li>
    </ul>
    <div class="navbox-image">{{{image}}}</div>
  </div>
  <div class="navbox-abovebelow">{{{below}}}</div>
</div>

Migration tracking edit

Some comments about migrations.

MediaWiki talk:Common.css/to do#Navbox also contains a series of templates that will be converted at some point to use {{navbox}}. It is possible not all of them will be converted so we will need to check in for those.