Drupal Template: 
UQ Base Template

Fixes, tweaks and enhancements

9/2/2015

The UQ Base theme has been needing some love for a while now. Some bugs have been around for a while needing to be squashed, and some new ones have been introduced over time with changes in other parts of the Drupal platform. We've also move on with our thinking of what we want the theme to do. This patch is also as much a refactoring of our code for easier maintence as it is bug fixing.

These changes shouldn't require any config changes on your behalf. If you have custom styling on your site then you may notice some conflicts so please test anything you've customised. We can't support any customisations you or a third party might have made.

Banners

They now display better on mobile. The caption also should no longer sit at the bottom of the page for the Tall Banner.

You should still only have 1 banner view on a page though, as they multiples will interfere with each other.


List with Lead

Lots of fixes were required here due to changes in other components that adversely affected them. They now all display neatly and the .outline and .reversed styles are available again. Add these classes to the Wrapper Classes field under Custom View Options.

Applying style classes to list with lead view


Toggles

Small style changes here to bring the default and .basic styles inline. Mostly this was code reformatting with little visual or functional change on the front-end.


Tables

Paragraphs were displaying at a different size to plain text within table cells. This was difficult for users to control without editing the source code as pasted content generally wrapped in <p> tags. Font sizes are now consistent, yay!


Vertical menu

The old accordion style side menu has always been a bit chunky and overbearing against the content of the page. We've introduced a new style using the .vertical-menu class to replace the .accordion-menu. The change over process is manual though as we are not removing the accordion-menu styles just yet.

The vertical-menu also comes with a .vertical-menu.vertical-menu--shaded variant.

Vertical menu example vertical menu shaded example


Webforms (to be deprecated late 2015)

The Webform module doesn't give much (any) control over design of a form. Styles on fields are intended to be wrapped in layout divs using the Foundation grid, but that just isn't possible through Webforms. We've included a Webform specific set of styles to address this in order to solve some of the more pressing issues like drop down fields that span full width and make date selectors look awful. You can also display labels inline now. The prefix and suffix fields also display inline now and don't just look like additional labels.

Labels are now the default bold again, and you can set the width of fields as you please. This might mean you will need to put more effort into aligning forms with inline labels, but at least the control to do so is there.

Webform with inline labels

The Webform module is a bit of a thorn for us though; it doesn't do as much as we'd like, as well as being misused. The Checkbox system is still the best option for building forms that don't require direct integration with a Drupal site. Webform's future in UQ Drupal is being reviewed.


Menu and search

For desktop users, top level menu items with children now have an indicator arrow. The active item gradient is gone with just a flat colour in its place.

On mobile the search field was missing its icon and wrapped to 2 lines. This is fixed.

Fixed mobile search display

The mobile menu is better but not perfect. Child items are now indented to show the heirarchy clearly, and the active item is not open all the time so its a bit less cluttered.

The issue where clicking a menu item that has children only opens and closes the children but prevents you going to that page persists. It requires a complete overhaul of the menu to resolve which we haven't had time for.


Unpublished page notice

Previously if you were a site editor and went to an unpublished page you couldn't tell from looking at it that it was unpublished. Unauthenticated users of course wouldn't see it at all. Editors now get a very clear, very red, (Not published) notice at the top of the page.

Example of unpublished notice on page


Header and footer

The obvious change is the gradient is gone. We're moving towards a flat, modern feel and not to mention the gradient wasn't actually the correct brand purple. Otherwise the header hasn't changed but displays a bit better on mobile.

The footer needed some code refactoring, which happily resulted in a better mobile view. We're sporting the correct Go8 logo now which I'm sure they are pleased with, and the UQ Answers button is now a text link for accessibility purposes. Yay WCAG.


Text overlapping images

On some pages, text was overlapping the image on the right hand side. This was due to floated images inside a floated container coming from different settings. This has been fixed so text won't overlap, multiple images will stack neatly, and on mobile images will switch to full width rather than taking only 50% of the page.

Text overlapping images before and after fix


Buttons

They're now flat. Just bringing them inline with the header/footer/menu flattening, but the still function the same and look like buttons.


Print view

Previously if you printed a page you couldn't tell where linked text actually linked to. Links like 'Download the form' became completely useless. We now print the link url after the link text.

urls printed after the link text