Git Product home page Git Product logo

megatron's Introduction

UBC CLF 7.0.5 DRUPAL THEME (aka Megatron)

A responsive UBC CLF (Common Look and Feel) theme for Drupal 7. Created by the UBC IT Web Services Department.

UBC CLF 7.0 DRUPAL THEME FEATURES

Bootstrap / CLF

Grid, menu system (click to expand), status / alerts, form elements, markup compatible with default bootstrap markup, and no need for conditional IE stylesheets.

Drupal / Theme level

  • Minimal CLF (optional) - for heavily-themed sites, you can load the minimal required CSS and leave the rest of the bootstrap framework behind
  • Modernizr (optional)
  • Unit LESS files (and uncompressed CSS for everyone else)
  • Page / content type template suggestions (beyond page and blog)
  • Body classes to indicate page section and path for easier theming
  • HTML5 markup
  • Ability to add / exclude css in .info file
  • Built in support for Breakpoint module, mapping default CLF breakpoints
  • Adaptive panels layouts (thanks Jens)

Usage

  • You MUST use an alternate admin theme or jQuery will be break. It is also recommended to use the 'edit / create content in admin theme' option on the /admin/appearance page. An option to toggle on or off the updated jQuery has been added to the theme options if you would prefer to use the jQuery Update module. The required version is 1.8.1+
  • Unzip the content to your Drupal installation, ie for Linux RHEL6.x. /var/www/html/your_drupal_site/sites/all/themes/ chown -R root:apache ubc_clf_drupal_template_7.0.2.
  • Login to your Drupal website as admin --> Appearance --> Enable and Set as Default for UBC-CLF.

RECOMMENDED MODULES

  • Picture + Breakpoints - for assigning alternate image styles to Media Query breakpoints.
  • Media - for inserting adaptive images into textarea fields (allows you to choose image style per image).

MODULES NOT RECOMMENDED

  • Environment Indicator - breaks in jQuery versions 1.8+

megatron's People

Contributors

grandmasterv avatar joelpittet avatar linakang avatar occupant avatar veades avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

megatron's Issues

jQuery issue - info only

Just an FYI, because I have modules dependent upon jQuery Update, I removed the custom jquery addition in the theme and added this to a custom module instead, which can be removed once CTools catches up. It may help someone in the same predicament :)

<?php
/**
 * Implements hook_module_implements_alter().
 *
 * These two functions are to keep jQuery Update only on the front and not the back, until http://drupal.org/node/1766240 is fixed
 *
 */
function ubccs_helper_site_module_implements_alter(&$implementations, $hook) {
  if ($hook == 'library_alter') {
    if(isset($implementations['jquery_update'])) { 
      // Move jquery update to the end. This will make sure our hook_library_alter
      // is always called before the jquery_update.
      $jquery_update = $implementations['jquery_update'];
      unset($implementations['jquery_update']);
      $implementations['jquery_update'] = $jquery_update;
    }
  }
}

/**
 * Implements hook_library_alter().
 */
function ubccs_helper_site_library_alter(&$libraries, $module) {
  // If it is the admin theme all we want to do is change the global $conf
  // variable so when jquery_update runs right after us it will use 1.5.
  // We are not using path_is_admin(current_path()) because some admin path can use
  // the frontend theme like node edit page
  global $theme_key;
  if (variable_get('admin_theme') == $theme_key) {
    // Modifying global $conf variable, can be dangerous. Be careful.
    global $conf;
    $conf['jquery_update_jquery_version'] = '1.5';
  }
}

label has display:block

Any particular reason why the label element has display:block set in the CLF css? It breaks the display of many things.

Bootstrap all the buttons

Feature request, in template.php to add bootstrap classes to Drupal's various buttons. It's just... classier this way. ;)

function megatron_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'btn';
  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }

  return '<input' . drupal_attributes($element['#attributes']) . ' />';
}

LESS

We might think about standardizing LESS in develop branch. For example, off.canvas.drawer.less exists, but navigation.sticky.less does not.

We might also suggest a standard approach to minification in README.md, like less-plugin-clean-css

Breadcrumbs and home button don't use $base_path

The template seems to assume that the site is deployed at the root of a domain. Not always true :)

The $breadcrumb in megatron_breadcrumb() simply has an a href="/" for the home breadcrumb, better would be to use $base_path, which defaults to "/" if its not set.

The megatron_ubc_clf_header() function makes the same assumption.

Regions for Breadcrumbs left and right

We had added these regions to our customization. I just updated megatron and these regions were overwritten. I still have the code and we include them in the master repo if it might be useful for other units. Do you see this become part of Megatron or do I need to handle this in a child theme?

Decoupling off-canvas drawer and hamburger menu

Jens asked me to clarify the functionality of the off-canvas drawer after playing around with it this week.

We assumed that we could place arbitrary blocks into the drawer and it would persist and be separate from the main menu and hamburger menu, which isn't what happens in our testing.

I've enabled the drawer region and disabled the "Use the primary menu in the off-canvas drawer" option. I've placed a menu block into the region and it all works fine. On mobile, the drawer transforms into the hamburger menu and contains the menu block. Again, I assumed the drawer would persist and the hamburger would display the main menu as it normally does.

Let us know if our assumptions are incorrect in how the drawer is designed.

Path to libraries incorrect with subthemes

html.tpl.php adds modernizr JS files with a call to path_to_theme. When using a subtheme this path will be wrong (pointing to the subtheme/js folder instead of megatron/js). Solution would be to use drupal_get_path or to integrate with libraries module as dependency to use maybe libraries_get_path.

Issue in template.php

function megatron_preprocess_html(&$vars) {
...

// add a body class that reflects content placement
$vars['classes_array'][] = drupal_html_class('section-' . megatron_id_safe($section));
$vars['classes_array'][] = drupal_html_class('path-' . megatron_id_safe($path));

These can pick ip the string 'span' due to bootstrap css and apply the bootstrap span styles to the body, breaking the layouts. Need to fix

Login Page button duplicated

Hello James,

Here is a pic that shows you the duplicate Log In button bug I'm encountering. The button itself works but there is duplicated text next to it. Its just text with no link.

HTML

<div class="form-actions form-wrapper" id="edit-actions">
<input type="submit" id="edit-submit" name="op" value="Log in" class="btn form-submit">
Log in
</div>

CSS properties (not inherited)

background-color: rgb(245, 245, 245);
border-top-color: rgb(229, 229, 229);
border-top-style: solid;
border-top-width: 1px;
color: rgb(34, 34, 34);
display: block;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
height: 30px;
line-height: 22px;
margin-bottom: 20px;
margin-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 19px;
width: 803px;

screen shot 2014-07-09 at 1 52 45 pm

Port to Drupal 8?

Hello, does UBC Web Services have a timeline for the Drupal 8 release of the megatron theme? Is a Drupal 8 version on the roadmap?

Empty delimiter in megatron_breadcrumb()

On the site's home page only, the breadcrumb function gets upset, presumably because there's only one item to display.

Warning: strpos() [function.strpos]: Empty delimiter in megatron_breadcrumb() (line 132 of sites/all/themes/megatron/template.php).

Breadcrumbs in panels - Placement

The theme settings only allow display of breadcrumbs or hiding breadcrumbs. However, if breadcrumbs are configured to be hidden, they get completely removed. Instead, they should get loaded for use and placement in panels, but not output in the default location as defined by the theme.

Moreover, the current panel title always appears on top of the grid which does not allow placement of breadcrumbs above the title through panels. It is possible to create a child theme to remove the standard elements and to use panels for placement of all required page elements such as breadcrumbs, tabs and title as needed.

Menu question

The theme seems heavily integrated to use Drupal's primary menu system. Basically the first thing I do on a new site is turn those off ;) We're using Menu Block with Menu Minipanels because we need more flexibility in our main menu than simply a list of links. Are there plans to make the theme more menu-agnostic for different uses? (I realize it's a long shot ;)

Search Block style

When I first turn on megatron on a fresh drupal install, I see couple of white blocks around the search block that look out of place.

screen shot 2013-09-25 at 10 21 53 am

X-UA-Compatible meta tag needs to be first

in html.tpl.php:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

... needs to be first after the TITLE tag, or it gets ignored, for some silly reason.

Bootstrap pagers

If anybody needs this... Creates next12345prev pagers like in the CLF specification.

Stolen from the Drupal bootstrap theme module.

    .pager li a {
        margin-left: -1px;
    }
 /**
 * Returns HTML for a query pager.
 *
 * Menu callbacks that display paged query results should call theme('pager') to
 * retrieve a pager control so that users can view other results. Format a list
 * of nearby pages with additional query results.
 *
 * @param $vars
 *   An associative array containing:
 *   - tags: An array of labels for the controls in the pager.
 *   - element: An optional integer to distinguish between multiple pagers on
 *     one page.
 *   - parameters: An associative array of query string parameters to append to
 *     the pager links.
 *   - quantity: The number of pages in the list.
 *
 * @ingroup themeable
 */
function megatron_pager($variables) {
  $output = "";
  $tags = $variables['tags'];
  $element = $variables['element'];
  $parameters = $variables['parameters'];
  $quantity = $variables['quantity'];

  global $pager_page_array, $pager_total;

  // Calculate various markers within this pager piece:
  // Middle is used to "center" pages around the current page.
  $pager_middle = ceil($quantity / 2);
  // current is the page we are currently paged to
  $pager_current = $pager_page_array[$element] + 1;
  // first is the first page listed by this pager piece (re quantity)
  $pager_first = $pager_current - $pager_middle + 1;
  // last is the last page listed by this pager piece (re quantity)
  $pager_last = $pager_current + $quantity - $pager_middle;
  // max is the maximum page number
  $pager_max = $pager_total[$element];
  // End of marker calculations.

  // Prepare for generation loop.
  $i = $pager_first;
  if ($pager_last > $pager_max) {
    // Adjust "center" if at end of query.
    $i = $i + ($pager_max - $pager_last);
    $pager_last = $pager_max;
  }
  if ($i <= 0) {
    // Adjust "center" if at start of query.
    $pager_last = $pager_last + (1 - $i);
    $i = 1;
  }

  // End of generation loop preparation.
  $li_first = theme('pager_first', array('text' => (isset($tags[0]) ? $tags[0] : t('first')), 'element' => $element, 'parameters' => $parameters));
  $li_previous = theme('pager_previous', array('text' => (isset($tags[1]) ? $tags[1] : t('previous')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
  $li_next = theme('pager_next', array('text' => (isset($tags[3]) ? $tags[3] : t('next')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
  $li_last = theme('pager_last', array('text' => (isset($tags[4]) ? $tags[4] : t('last')), 'element' => $element, 'parameters' => $parameters));

  if ($pager_total[$element] > 1) {
    /*
    if ($li_first) {
      $items[] = array(
        'class' => array('pager-first'), 
        'data' => $li_first,
      );
    }
    */
    if ($li_previous) {
      $items[] = array(
        'class' => array('prev'), 
        'data' => $li_previous,
      );
    }

    // When there is more than one page, create the pager list.
    if ($i != $pager_max) {
      if ($i > 1) {
        $items[] = array(
          'class' => array('pager-ellipsis', 'disabled'),
          'data' => '<span>…</span>',
        );
      }
      // Now generate the actual pager piece.
      for (; $i <= $pager_last && $i <= $pager_max; $i++) {
        if ($i < $pager_current) {
          $items[] = array(
           'class' => array('pager-item'), 
            'data' => theme('pager_previous', array('text' => $i, 'element' => $element, 'interval' => ($pager_current - $i), 'parameters' => $parameters)),
          );
        }
        if ($i == $pager_current) {
          $items[] = array(
            'class' => array('active'), // Add the active class 
            'data' => l($i, '#', array('fragment' => '','external' => TRUE)),
          );
        }
        if ($i > $pager_current) {
          $items[] = array(
            'class' => array('pager-item'), 
            'data' => theme('pager_next', array('text' => $i, 'element' => $element, 'interval' => ($i - $pager_current), 'parameters' => $parameters)),
          );
        }
      }
      if ($i < $pager_max) {
        $items[] = array(
          'class' => array('pager-ellipsis', 'disabled'),
          'data' => '<span>…</span>',
        );
      }
    }
    // End generation.
    if ($li_next) {
      $items[] = array(
        'class' => array('next'), 
        'data' => $li_next,
      );
    }
    /*
    if ($li_last) {
      $items[] = array(
        'class' => array('pager-last'), 
        'data' => $li_last,
      );
    }
    */

    return '<div class="pagination pagination-centered">'. theme('item_list', array(
      'items' => $items, 
      'attributes' => array('class' => array('pager')),
    )) . '</div>';
  }

  return $output;
}

OPtimization of modernizr

Google Webmaster tools complains about the integration of modernizr. Apparently, it does not get compressed, but compressing the file could save 57%. It doesn't get minified either while all other JS libraries have a minified version.

Another complaint is that it is render-blocking which might be by design if modernizr has to execute before page rendering. I am not sure how crucial it is and if there would be an option to load asynchronously?

Panels layouts fluid vs. fixed

The adaptive layouts (fixed) do not cover the elements "tabs" and "page-header". The content is correctly centered within the span12 grid, but navigation tabs and title expand full width.

DHTML Menu - info only

i was trying to emulate the submenu in the ubc wordpress template and installed DHTML Menu (https://drupal.org/project/dhtml_menu). bad idea. does not play well with the megatron template, insofar as throwing php errors and wrecking one's site constitutes not playing well.

fyi.

Element h2 not allowed as child of element ul in this context.

Trying to figure out how to fix the validator error "Element h2 not allowed as child of element ul in this context."

Here is the offending html:

<div class="container"> <div class="nav-collapse collapse" id="ubc7-unit-navigation">
<ul id="main-menu" class="nav"><h2 class="element-invisible">Main menu</h2><li class="menu-1713 home active"><a href="/" class="active">Home</a></li>

Its created by this code in the template.php file, megatron_preprocess_page function :

// Primary nav
  $variables['primary_nav'] = FALSE;
  if($variables['main_menu']) {
    // Build links
    $tree = menu_tree_page_data(variable_get('menu_main_links_source', 'main-menu'));
    $variables['main_menu'] = megatron_menu_navigation_links($tree);

    // Build list
    $variables['primary_nav'] = theme('megatron_links', array(
      'links' => $variables['main_menu'],
      'attributes' => array(
        'id' => 'main-menu',
        'class' => array('nav'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      ),
    ));
  }

Can we just move the H2 element infront of the UL? How do I do that? Is this here in this way due to screen reader support or something?

Thanks!

Error if RDF module not enabled?

Warning: Creating default object from empty value in megatron_preprocess_html() (line 99 of C:\xampp\htdocs\iem\sites\all\themes\megatron\template.php).

As reported by Jen Locher. To be investigated.

fontawesome icon-white set not in ubc-clf-full.min.css

Trying to use the font awesome icons, and creating white icon (appending "icon-white") doesn't work -- it doesn't appear to be specified within the CLF css with the other icon halflings specifications.

The CLF page does seem to indicate that it's included as a feature, though, as it uses several examples with icon-white. Tried with those specific icons and their markup, and it still doesn't work.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.