I like Bootstrap Theme as an admin theme, even moreso than those I've reviewed that are specifically built for that purpose. 7.x-3.x-dev has come a long way in regards to rendering cleanly and responsively on the back end, but of course some tweaking is still needed. (Note that said tweaks are not necessarily all related this theme - or Bootstrap).

To this end, I've found Drupal's vertical tabs have been the biggest PITA (so far) when it comes to achieving full responsiveness. I've looked into a couple of modules that claim to make these tabs responsive, but the implementation isn't exactly ideal, primarily because they use CSS to try to reconstruct the tabs as collapsible fields (thereby overriding, at least partially, the intended look-and-feel provided by a chosen theme). Also, you are stuck with collapsible fields at any screen size.

SO - as a partial solution for Bootstrap Theme I have patched _vertical-tabs.js to check screen size with window.matchMedia and to only construct the tabs at > 600px:

Drupal.behaviors.verticalTabs = {
  attach: function (context) {


    // Only render vertical tabs if screen size >= 600px. 
    // TO DO: The listener adds only one-way responsiveness when the window is
    // resized; once the tabs are rendered, they can't be "unrendered".
    var matchMedia = window.matchMedia || window.msMatchMedia;
    if (matchMedia) {
      media = matchMedia('(min-width: 600px)');
      media.addListener(function (mediaQueryList) {
        if (mediaQueryList.matches) {
          Drupal.behaviors.verticalTabs.renderVerticalTabs(context);
        }
      });
      if (media.matches) {
        Drupal.behaviors.verticalTabs.renderVerticalTabs(context);
      }
    }
    else {
      Drupal.behaviors.verticalTabs.renderVerticalTabs(context);
    }
  },

  renderVerticalTabs: function (context) {
  
  // ... build vertical tabs here ...  
  
  }
};

As noted in the comments, this doesn't achieve full responsiveness since it doesn't "undo" the vertical tabs when the screen is sized down. But because it does cover most use cases (IMHO) I decided it was the best option I have for now.

Still, I would grateful for any input which would help me get this to 100% - primarily so that it may be considered for inclusion. (Or tell me I'm being too fussy. Or that there's a better way. I can take it. :) )

Thanks!

Comments

othermachines’s picture

Issue summary: View changes
markhalliwell’s picture

Component: Templates » Code
Status: Active » Postponed

This is something that is a little lower on the priority list (i.e. more of a nice to have than anything). I think there will need to be some serious development (or at least thought) around this kind of "feature". Maybe similar to maybe how I did https://github.com/markcarver/jquery.responsive.tabs? I'm not entirely sure ATM.

hkirsman’s picture

Tx for hint! I copied the code from from Bootstrap to my own theme (for future proof), altered the path in template.php:

/**
 * Implements hook_js_alter().
 */
function cdn_js_alter(&$js) {
  if (isset($js['sites/all/themes/bootstrap/js/misc/_vertical-tabs.js'])) {
    $js['sites/all/themes/bootstrap/js/misc/_vertical-tabs.js']['data'] = drupal_get_path('theme', 'cdn') . '/source/assets/javascripts/_vertical-tabs.js';
  }
}

And only added 4 lines in the beginning of attach:

  Drupal.behaviors.verticalTabs = {
    attach: function (context) {
      var matchMedia = window.matchMedia || window.msMatchMedia;
      if (matchMedia && !matchMedia('(min-width: 600px)').matches) {
        return true;
      }
markhalliwell’s picture

Version: 7.x-3.x-dev » 8.x-4.x-dev

I don't think this is going to happen in 7.x-3.x or 8.x-3.x, bumping.

RumyanaRuseva’s picture

markhalliwell’s picture

Status: Postponed » Closed (won't fix)

I like Bootstrap Theme as an admin theme

Considering that this is primarily just a base theme, I don't think much effort should be spent here. If someone wants to try and tackle it, then feel free to open this back up with a patch and screenshots.