Step 17: Case Record Eligibility Screen
From PikaDocs
| Table of contents |
Overview of Case Eligibility
At this juncture we revisit "client eligibility." Yes, we've alread been there. Remember Step 12: Economic Eligibility?
To recap, in working on a redesign of Pika, LSNC has built a custom workflow (http://pikasoftware.net/docs/index.php/Image:Workflow_104b.jpg) that screens for citizen/alien and economic eligibility before an actual case record is created.
Beginning with Step 15: Case Screen "Shell", we began to build the core screens for the actual case record created after all the initial workflow screening is completed. In Step 16: Case Notes Screen we detailed the first page in an actual case record. Here we review the minor tweaks used in the Claire design to adapt select page elements from the initial economic screening template used during intake, and use them to flesh out the Case Record Eligibility page tab.
Eligibility déjà vu
Let's get oriented here. Take a quick gander at the screenshot of the Claire beta design of LSNC's intake Step 2: Income | Asset Screening. To create the Eligibility page tab within the Pika case record, what we've done is simply lift the structural markup from that page and plopped it down into the case_elig.html template that provides, within the Pika case screen shell, the content for the case record Eligibility page. Compare that screenshot with the Claire redesign of case eligibility screen:
... and you'll notice that there is actually only one significant change: The Eligibility page tab includes not just the economic information entered earlier at the second step of the initial client screening, but also the basic information about the client's citizenship or alien status also entered during the initial screening:
You can review the structural markup for this part of the case record by looking at the Project Claire: case_elig.html template.
Tweaking the CSS Code
Because the case record Eligibility page tab is essentially identical to its counterpart page elements used in the intake step2.html template, the CSS code used earlier to target that template pretty much gets the job done here. Having said that, we still needed to create CSS code to control display of the citizen and alien status elements, illustrated above. Here's the markup for those parts of the case record Eligibility page we added:
<div id="status-wrapper">
<div class="status01">
<h4>Citizenship Status</h4>
%%[citizen,citizen]%%
<br />
%%[citizen_check,yes_no,checkbox]%% <span>Confirmed?</span>
</div>
<div class="status02">
<h4>Alien Status</h4>
%%[noncitizentype,noncitizentype]%%
<h4 id="document">Document Type</h4>
%%[noncitizendoc,noncitizendoc]%%
</div>
</div> <!-- "status-wrapper" closing DIV -->
<!-- pop-up help ~ citizen and aliens status -->
<div class="status-help">
<ul>
<li><a class="context-help" href="javascript:popUp('%%[base_url]%%/helpdocs/help_citizen.html')" title="Click to see definitions and applicable rules for each of these terms.">What do these terms mean?</a></li>
</ul>
</div>
The corresponding CSS for this particular part of the page involves a lot of little nip/tucks, but works on design elements you've already seen elsewhere in the Claire (including the predictable IE hacks to deal with differences between it and Firefox in handlign margin and padding of certain elements):
#calculate {
padding: 0;
}
#percentage {
vertical-align: top;
margin-top: 1px;
}
#status-wrapper {
float: left;
margin-top: 0;
margin-bottom: 14px;
background-color: #F7F2EA;
padding: 0 12px 12px 12px;
border-top: 1px solid #F4E1CC;
border-right: 1px solid #C6B6A5;
border-bottom: 1px solid #C6B6A5;
border-left: 1px solid #F4E1CC;
}
* html #status-wrapper {
padding: 12px 12px;
}
.status01,
.status02 {
float: left;
line-height: 40%;
}
.status01 select,
.status02 select {
background-color: white;
}
.status01 {
clear: both;
margin-right: 10px;
}
.status01 h4 {
width: 136px;
}
.status01 input {
width: 50px;
border: 0;
margin-top: 6px;
}
.status01 #citizen_check {
width: 14px;
margin-top: 10px;
margin-left: 10px;
}
* html .status01 #citizen_check {
width: 40px;
margin-left: -6px;
margin-right: -10px;
}
.status01 span {
font-size: 90%;
vertical-align: 80%;
}
.status02 h4 {
width: 165px;
}
.status02 h4#document {
margin-top: 10px;
}
* html .status02 h4 {
width: 232px;
}
.status-help {
float: left;
width: 120px;
margin-top: 10px;
}
.status-help ul {
margin-left: -10px;
}
* html .status-help ul {
margin-left: 30px;
}
.status-help a {
font-size: 90%;
}
p.save-update {
margin-top: 10px;
}
What's up with the buttons?
The one design difference you may notice is that at this juncture we have begun to substitute standardized button images for all input buttons in the Claire design. Earlier, we had used standard CSS to style input buttons in Firefox and proprietary CSS "gradient" styles for the same buttons in Internet Explorer, as illustrated in our article about rebuilding the default page template. However, as the volume of redesigned templates piled up, we realized how much work was involved in tweaking two sets of buttons using two different sets of CSS code, and having to account for the differing impact of the cascade on different template pages. Arghhhh!
We now cry uncle (http://www.answers.com/cry+uncle&r=67). We haven't completed the process yet, but eventually we will be substituting clickable images for all input submit buttons, with corresponding changes in the markup, along these lines:
<input id="save" type="image" src="images/buttons/save.gif" value"submit" name="update_case" tabindex="2" accesskey="s" />
With this substitution, the differences in the rendering of the Claire design in Firefox and Internet Explorer are hardly distinguishable. For example, see if you can tell the difference in the rendering of the redesigned Eligibility screen in Firefox (http://www.openpika.org/beta_gallery/beta_case_eligibility_firefox.html) and Internet Explorer (http://www.openpika.org/beta_gallery/beta_case_eligibility_ie.html). There are differences, but they are pretty subtle.
We have posted an initial set of sample buttons to cover all "submit" scenarios thus far. Until we complete the button conversion throughout the Claire redesign, we'll preserve the earlier "button" code in the beta version of the Claire CSS code to assure it will continue to work with the earlier Project Claire templates.
Next: Step 18: Case Information Screen
Related articles and files:
