Skip to content

Mobile: Campus Home

Jump to bottom Edit New page
Rob Knight edited this page Jan 12, 2018 · 1 revision

The process for updating the campus home page template/assets for the responsive stylesheet.

1. Replace template content

Replace the content in: _library/campus-home/templates/Home Page (link) with the content of app/cascade/templates/Campus-Home.html in this repository.

2. Match region assignments with this chart:

Home page region assignments

3. Remove old/superfluous stuff from <head>.

  1. In site://_library/campus-home/blocks/xhtml/common/html-head, replace the content with this:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Link to development stylesheet. @change before going live  -->
<link href="http://ucsc.github.io/webtemplates2014/css/ucsc.css" rel="stylesheet" type="text/css" />

<!-- jQuery and Modernizr  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="/render/file.act?path=site://static/js/modernizr-1.5.min.js" type="text/javascript"></script>

4. Add class global-nav to the global navigation links.

Why: Standardized naming conventions: scope-component.

  • Scope: global, site, or page.
  • Component: nav, search, etc.
  1. In site://_library/campus-home/blocks/xhtml/common/campus-home-links, add the class global-nav to the <ul>.

5. Add required js to document <head>.

Why: Adds .js class to body tag, and provides menu toggle functionality for browsers with js enabled.

<script>
  $(document).ready(function() {
    $('body').addClass('js');
    var $globalmenu = $('.page-top'),
        $mainmenu = $('#mainNav'),
        $menulink = $('.menu-toggle');
    $menulink.click(function() {
      $globalmenu.toggleClass('active');
      $mainmenu.toggleClass('active');
      return false;
    });
  });
</script>

6. Add the menu toggle button to the logo in the header and wrap the logo link in an <h1>

Why: Responsive menu toggle and header needs an h1.

In site://_library/campus-home/blocks/xhtml/common/campus-home-logo,

  1. The logo should be an <h1>.
  2. Add the menu toggle button for toggling the menus on smaller screens.

The block code should now look like this:

<h1>
  <a href="site://www/index" id="logo" title="Return the UCSC home page">UC Santa Cruz home</a>
</h1>
<a class="menu-toggle" href="#mainNav">Menu <i class="icon-arrow-down-md">&#160;</i></a>

Note the &#160; in the menu button. Unfortunately, it was necessary because the browsers don't like an empty tag.

7. Events block format changes

  1. We will change the <div> to a <section>, which is more semantic and accessible.
  2. The first headline in a page region such as a section should be an <h1>, so we will change the <h2> to an <h1> in the code.
  3. We will move the "more" link to the bottom of the block, which makes more sense from a flow perspective, especially on smaller screens, where the old way makes even less sense (offering a link to more before the user had a chance to read the ones on the page). Additionally, we will stop using just the word, "more" and instead say, "more events" to make the link text more understandable when read aloud.

In /campus-home/formats/home-page/block-home-events, replace the code with:

## Get events for an Featured Events listing
#set ($events = $_XPathTool.selectNodes($contentRoot,"//system-data-structure/event"))

<section id="events">
  <h1>Featured <span>Events</span></h1>
  <dl>
    
#foreach($item in $events)

    ## Get/set vars
    #set ($line1 = $item.getChild("line-one").text.replace("&","&amp;"))
    #set ($line2 = $item.getChild("line-two").text.replace("&","&amp;"))    
    #set ($link = $item.getChild("url").text)
    #set ($dateNode = $item.getChild("date").text)
    ## Get date from text date
    #set($pageDate = $_DateTool.toDate("M-d-y",$dateNode))
    ## Set vars for month and day
    #set ($pageDateMonth = $_DateTool.format('MMM',$pageDate))
    #set ($pageDateDay = $_DateTool.format('d',$pageDate))
    ## Output HTML
    <dt>${pageDateMonth} <strong>${pageDateDay}</strong></dt>
    <dd><a href="${link}">${line1}<br />${line2}</a></dd>
    
#end
  </dl>
  <p><a class="more" title="More events" href="https://events.ucsc.edu">More events &#187;</a></p>
</section>

8. News block format changes

In /campus-home/formats/home-page/block-home-news make the following changes:

  1. Add a class, news to the #news div.
  2. Change the <div> to a <section>. So, <div id="news" class="news"> becomes <section id="news" class="news">.
  3. Change the headline level from <h2> to <h1>.
  4. Wrap news items in a single <a> element to remove superfluous links; accessibility best practice.

So this:

<li>
  #if($imgLink && $imgLink != "")
    <a href="${path}" title="Read more about: ${title}"><img class="fltlft" src="${imgLink}" alt="${_EscapeTool.xml($imgAlt)}" height="52px" /></a>
  #end
    <span class="date">${pageDateText}</span>
    <a href="${path}">${title}</a>
</li>

becomes this:

<li>
  <a href="${path}">
  #if($imgLink && $imgLink != "")
    <span class="thumbnail">
      <img alt="${_EscapeTool.xml($imgAlt)}" class="fltlft" src="${imgLink}" />
    </span>
  #end
    <span class="date">${pageDateText}</span>
    <span class="headline">${title}</span>
  </a>
</li>
Add a custom footer
Add a custom sidebar
Clone this wiki locally