E107: Menu HTML Markup - Theme Developer Feedback Requested

[CaMer0n]

Right now the styling of menus that contain 'lists' is a bit of a mess. It's inconsistent and doesn't have a 'clean' look about it.

I would like to propose that we use bootstraplist-group and media-list for all menus that contain lists.
This means, the online menu, news categories, all the 'latest' menus, comments menu, forum post menu etc etc. everything. The chatbox and a few others are already doing this.

When there is only text we would use 'list-group' and when there are images, we would use 'media-list'.

I would like to open the discussion to e107 theme developers to get their feedback on this proposal.
How might it impact existing themes, break old themes etc etc?
Do you have other ideas relating to consistent bootstrap markup of menu lists?

For reference.. here are the 2 list styles I'm referring to:

List Group

[rica-carv]

And what about for new themes that don't want to be bootstrap compliant?

[CaMer0n]

I would imagine that without the css, they would render as regular lists with bullets.

[Jimmi08]

My two cents. _(I know that I can do it other way)._

1. good idea, full support, but there should be version with BOOTSTRAP constant defined or not. And to make it perfect - make version just for bootstrap 3. Using classes from bootstrap 4 together (list-group-item-action with list-group-item) like you did it with BT2 is workaround.

1. next rule: each ul tag should have its own selector/class (maybe the same as you use in tablerender() as id). With unique selector and common class (media-list) you can style almost anything. I think that this is already done with classes, just don't remove it (at least in online menu and last seen menu)

2. without bootstrap it looks like this (so no problem):
   

3. you could consider something like this (it's screen from e107 rules for old table layout. It's not mine. I am sure that there were some Dutch/French pdf for templating or something like this too)
   Now you use panel, panel-heading and panel-body. But adding custom and standard e107 classes would be add possibility to styling panels in menus without influence on other place that are using panels. I mean using panel.menu{} etc. (I would use f.e e107_menu etc)
   
   So standard using would look like this:

    if($style == 'menu')
    {
    echo '<div class="panel panel-default menu">
      <div class="panel-heading menu-caption">'.$caption.'</div>
      <div class="panel-body menu-text">
       '.$text.'
      </div>
    </div>';
    return;     
    }

[rica-carv]

@CaMer0n @Jimmi08 Indeed, without bootstrap it would render default HTML lists, but you will have the HTML source crawling with unuseless bootstrap classes....

[Jimmi08]

@rica-carv
it's about making standards. If you don't need stardards, you still can make your own template. To have more templates (with the same name) in core related on BOOTSTRAP constant value could solve your problem too.
These classes have just boostrap names, if you don't use bootstrap css, you can use them in your own css too. Not be able styling html elements because missing classes it's worse.

There are always two approaches with themes (templating). You have great HTML markup with correct selectors and classes and you just customize css - this way was Voux theme done. Or you have existing css files and you just customize html markup via templates in your theme.

Setting rules should be advantages for plugin deveper and creating menu templates in non core plugins. If there are rules, you custom menu will look good with theme that was tested only with core plugins.

[Moc]

I agree with @Jimmi08 comments.

Most important for me:

• Ensure standards and document them
• Differentiate between Bootstrap and non-Bootstrap, and possibly also been BS3 and BS4. Make sure that both can be used.

[rica-carv]

@Moc The only issue is to enforce users use standards, there's always a way to go round them....

[CaMer0n]

If you find menus still not using these standards, please mention them here and any ideas you have for them.

[Moc]

@rica-carv I agree. To some extent standards can be checked, for example security standards (using the filter() method), upon plugin approval (this takes resources and those are currently not available). To some extent it also needs to come from plugin and theme developers themselves. By using standards, it is far easier to use plugins/themes on future versions of e107 since any changes will take into account these standards. Anyhow, the responsibility remains with the developer.