Step 15: Case Screen "Shell"
From PikaDocs
| Table of contents |
What is the Case Screen "Shell"?
Okay. Enough about workflow. Let's just talk about work. Let's talk about the basic Pika case record screen based on the case_screen.html template. In this article we refer to it as the case screen "shell." This is the subtemplate that itself includes or "holds" any one of several case-related subtemplates built into Pika, such as:
- activityN.html (case notes)
- case_conflict.html (case conflict triggers)
- case_elig.html (post-screening eligibility elements)
- case_info.html (case-specific information)
In this series of articles about the Claire design, we will be looking closely at each of these basic case record subtemplates. But before we do so, we need to deconstruct and then rebuild their "parent" template, the case record screen.
As usual, for this step we've posted full-size screenshots of the finished template at the Project Claire Design Gallery (http://www.openpika.org/gallery.html), in both Firefox (http://www.openpika.org/beta_gallery/beta_case_screen01_firefox.html) and Internet Explorer (http://www.openpika.org/beta_gallery/beta_case_screen01_ie.html) versions. Take a look at those screenshots and you'll see the three basic structural zones which are the object of the redesign of this particular template:
- The red "warning" flags below the horizontal menu
- The "side-content" areas listed under "Case Summary" and "Actions"
- The "case-tabs" sitting on top of the "main-content" area
Let's pull each of these apart and put them back together, in turn. But first -- and you know this coming -- Nuke the tables! We're not going to go into great detail about this other than to repeat our now familiar refrain: "Remove tables whenever practical." The case_screen.html is one of those instances where tables were used in the default Pika design to control the page layout, not to contain tabular results. (Actually, we count three tables were used.) You can view the Claire case_screen.html template to see how the structure has been simplified and the presentation controlled via the external CSS style sheet, explained below.
Warning Flags
Those clever folks at Pika Software anticipated the real world, i.e., the practical problem of users overlooking "blank" fields. Built into Pika is a handy "gotcha" feature: those ever pesky "red flags" that appear at the top of every case record page, immediately below the horizontal navigation bar, whenever certain required fields are left blank. Here's how they display in the Claire design:
Feel a touch of PikaDocs déjà vu suddenly coming on? Or at least a fit of "been there, done that." Rightly so, my friend. Several months ago, when we were first working up our earlier alpha redesign, we posted Warning Flags: Changing the Icon and Labels. That article contains the core technical details of how to modify the both the icon and the labels for the warning flags. Enough said on that point.
Here are the missing details for the Claire design:
If you look at the original Pika case_screen.html template, the very first line states the template target for the warning flags, shrewdly called "flags":
%%[flags]%%
To acquire hooks so the "flags" could be targeted with external CSS, first we enclosed %%[flags]%% within a div and gave the div a class name, shrewdly called "warning-flags" (hey, two can play this game!) ...
<div class="warning-flags"> %%[flags]%% </div>
Next, we went into the two PHP files that in the default design define the structural markup for this part of the page as well as the presentation or display of the warning flags using embedded styles. Because we want to control the display characteristics of the warning flags by using external CSS, we made the following changes. In the original pika_cms.php file (located in the Pika root directory) at lines 506-07 you find these lines of code:
$C .= '<span style="line-height: 25px; border: 1px solid #999999; padding: 1px;" class=thinborder><img width=16 height=16 src="images/redflag.gif" alt="red flag"> '; $C .= "$message2</span> ";
We removed all the style elements, removed the excess space characters, assigned a "warning" class to the span tag so we could use it as a external CSS design hook, and modified the alt attribute to make it clearer what the image actually is:
$C .= '<span class=\"warning\"><img src=\"images/redflag.gif\" alt=\"warning flag icon\" />'; $C .= "$message2</span>";
In the pikaMisc.php file (located in the /app/lib/ subdirectory), we needed to make similar changes to lines 668-70:
$C .= "<span style=\"line-height: 25px; border: 1px solid #999999; padding: 1px;\" class=\"thinborder\">";
$C .= "<img width=\"16\" height=\"16\" src=\"{$base_url}/images/redflag.gif\" alt=\"red flag\"/> ";
$C .= "{$message2}</span> ";
These three lines were changed to read:
$C .= "<span class=\"warning\">";
$C .= "<img class=\"warning-icon\" src=\"{$base_url}/images/redflag.gif\" alt=\"warning flag icon\" />";
$C .= "{$message2}</span>";
Then we targeted these redesigned elements with corresponding selectors in the external style sheet:
span.warning {
color: red;
font-size: 80%;
font-weight: bold;
margin-right: -6px;
}
div.warning-flags {
text-align: center;
background-color: #F0E7D7;
height: 20px;
padding-top: 3px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
div.warning-flags p {
vertical-align: middle;
margin: 0;
}
img.warning-icon {
vertical-align: top;
margin-left: 16px; /* creates space between warnings */
}
The excess "space" characters removed from the PHP code served their purpose in the original configuration by providing double spaces between the warning flags. But such presentation is more easily controlled in the Claire design by instead using the external style sheet. As commented in the CSS code, above, the img.warning-icon { margin-left: 16px; } selector does the trick by providing a left margin for each instance of the redflag.gif image. Want to change the distance between the images? Just tweak this CSS setting, with no need to hack at the PHP file.
Case Summary and Action Content
As mentioned above, we've removed all the tables from the case_screen.html template. In rebuilding the "side-content" area of the template, we essentially have repeated what we did with the templates discussed in earlier steps of this project. Other than to make these Claire-characteristic structural changes, we have largely retained the "side-content" page elements from the original Pika design, vintage 3.04. You can review the case_screen.html template and corresponding CSS selectors to glean our game on this particular page.
Having said that, we will note one particular detail: Under the "Actions" section in the "side-content" area, we chose to remove the pointer graphic used in the original template and instead used an unordered list (ul and li tags), and then reordered the items to conform to our perceptions of user hierarchy. Here's an excerpt (itself embedded within a table) from the orginal template:
<h2>Actions</h2>
<p>
<img src="%%[base_url]%%/images/point.gif" alt="Arrow"/>
<a class="butt" href="javascript:popUp('%%[base_url]%%/timer.php?case_id=%%[case_id]%%&funding=%%[funding]%%&number=%%[number]%%')">Popup Timer</a><br/>
<img src="%%[base_url]%%/images/point.gif" alt="Arrow"/> Add
<a class="butt" href="%%[base_url]%%/activity.php?screen=compose&case_id=%%[case_id]%%&completed=1&act_code=1&funding=%%[funding]%%&number=%%[number]%%&act_type=K">Tickle</a><br/>
...
...
</p>
In the Claire design we simplify this structure somewhat by using an unordered list, removing the img tags, relying on external CSS to style the "bullet" or pointer effect for each item, and applying a single "list-item-special" class for the last li tag which allows us to set apart the "Add this case item" with a different font color and font-weight, as well as a visible space separation:
<h2>Actions</h2>
<ul>
<li><a href="%%[base_url]%%/activity.php?screen=compose&case_id=%%[case_id]%%&completed=1&act_code=1&funding=%%[funding]%%&number=%%[number]%%&act_type=K">Add new Tickle</a></li>
<li><a href="%%[base_url]%%/activity.php?screen=compose&case_id=%%[case_id]%%&completed=1&act_code=1&funding=%%[funding]%%&number=%%[number]%%&problem=%%[problem]%%&act_type=L">Add new MSR</a></li>
<li><a href="%%[base_url]%%/ops/duplicate_case.php?case_id=%%[case_id]%%">Duplicate Case</a></li>
<li><a onClick="return confirm('Are you sure you want to remove %%[full_name]%% from this case?');" href="%%[base_url]%%/dataops.php?action=delete_conflict&conflict_id=%%[conflict_id]%%&case_id=%%[case_id]%%">Remove from Case</a></li>
<li><a href="javascript:popUp('%%[base_url]%%/timer.php?case_id=%%[case_id]%%&funding=%%[funding]%%&number=%%[number]%%')">Popup Timer</a></li>
<li class="list-item-special">Add to this case:</li>
</ul>
The appearance of these list items rely on the default ul and li CSS code styling we created earlier for other templates. For this particular template, however, we added the following additional selector to target the list-item-special class (including an IE hack to deal with the margin-bottom property) ...
li.list-item-special {
margin: 10px 0 0px 0;
color: #7F7C6A;
font-size: 90%;
font-weight: bold;
}
* html li.list-item-special {
margin-bottom: -10px;
}
With all the CSS code applied, this structure as styled looks like this:
Case Tabs Makeover
One of the very user friendly features in Pika is the "case tab" feature enabling the user to quickly tab or jump to case record pages for case notes, eligibility, case documents, and so on. (These case-tab pages are typically built from the various "activity" subtemplates described in the first part of this article.) In the original design, functionality is built in to support one or two rows of tabs that look like this:
Structurally and functionally, these case tabs are anchor (http://www.htmldog.com/reference/htmltags/a/) tags or hyperlinks that trigger the presentation of the particular page. In the case_screen template they are embedded in a two tables (themselves nested within a third, "parent" table that acts as a container for the whole template):
<table summary="" cellpadding="0" cellspacing="0" width="95%" class="nopad">
<tr valign="top">
<td nowrap class="rt" style="border-left: 1px solid black;">%%[case_tabs]%%</td>
</tr>
</table>
<table summary="" cellpadding="0" cellspacing="0" width="95%" class="nopad" style="margin-bottom: 0.5em;">
<tr valign="top">
<td nowrap class="rt" style="border-left: 1px solid black;">%%[case_tabs2]%%</td>
</tr>
</table>
For the Claire design, we initially have committed to using a single row across the top of the case record "main-content" area, admittedly a touch less complicated than the original design. But other than that, it was remarkably easy to simplify the markup to support an alternate design using a single div. We didn't even have to do our usual "float" shtick! Here's our sans-table markup for the case tabs:
<div id="case-tabs"> %%[case_tabs]%% </div>
That's it. Deeply embedded in the Pika PHP, the program does its magic dynamically generating the case tabs. The "active" case tab corresponds to the particular activity page being displayed, e.g., activityN.html with the case notes for that particular case record. This display of the "active" page, which is not linked to anything since it is being actively displayed, is controlled via an embedded span tag. The other case tabs you see are actually just anchor (http://www.htmldog.com/reference/htmltags/a/) tags with links to the corresponding case record page. Knowing this, all you have to do is build your CSS code to target those structural elements.
We built our case-tab styles around the same color scheme used for the horizontal navigation elements used in the default.html template. Here's the CSS code we came up with to close the deal:
div#case-tabs {
background-color: #F7F2EA;
padding: 5px 0 6px 1px;
margin-bottom: -6px;
border-right: 3px solid #BFBCB5;
}
div#case-tabs a,
div#case-tabs span {
font-size: 90%;
background-color: #F7F2EA;
padding: 3px 7px 5px 7px;
margin-right: -4px;
border: 1px solid #B5C6A5;
}
div#case-tabs a:hover {
background-color: #F0E7D7;
}
div#case-tabs span {
background-color: white;
font-weight: bold;
font-size: 100%;
border-bottom: 1px solid white;
}
div#case-tabs a:link,
div#case-tabs a:visited {
color: #777777;
background-color: #F7F2EA;
border-top: 1px solid #FFFFEE;
border-right: 1px solid #AAAB9C;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #FFFFFF;
}
div#case-tabs a:hover,
div#case-tabs a:active {
color: #800000;
background-color: #F0E7D7;
border-color: #AAAB9C #FFFFFF #FFFFFF #CCCCCC;
}
With these styling elements applied, the Claire case tabs are simply styled anchor tags displayed horizontally, with one tab for the current activity page in contrasting white and a larger, bold font for visual emphasis:
You can view full-screen shots of the redesigned case tabs in context of the entire case screen "shell" at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
Next: Step 16: Case Notes Screen
Related articles and files:
