Step 19: Conflicts Screen
From PikaDocs
| Table of contents |
Overview of the Conflicts page
At previous steps we rebuilt the Pika page tabs for Notes, Eligibility and Case Info. In this step, we deconstruct and rebuild the fourth and last of the Pika case record "page tabs" in the Claire design: the Conflict page that runs a check of the current case record against potential conflicts with the "primary client" associated with the record, as well as general "name-based" and "Social Security Number-based" conflicts.
For the redesign on this page, we have pretty much accepted the default location and positioning of the Conflict page elements presented in the original Pika design. The Conflict page tab is located in the case_conflict.html subtemplate. Because this particular page is, essentially, a "search results" page, it is appropriately built using table-based structural markup. Our redesign basically just involves a modest simplification of those table elements; removing embedded style elements in the template; and then using now familiar Claire design elements in the CSS code to restyle the page. Here's the look of the basic redesign of the Conflict page elements:
Simplifying the TABLE elements
To simplify the table structural markup, we maintained the basic structure but removed embedded styles (e.g., the strong tags used to present select text as "bold"). We also removed all the embedded table tag attributes because either they are deprecated, or are simply presentational and better handled via CSS (http://www.htmldog.com/reference/htmltags/table/). Assuming the template design relies on an XHTML 1.0 Transitional DOCTYPE declaration (http://www.htmldog.com/guides/htmladvanced/declarations/), as we use here, the following attributes can be safely removed and/or controlled through the style sheet:
- cellpadding
- cellspacing
- border
- nowrap
To get a general idea of the changes we made to the table markup, take a look at the Project Claire: case_conflict.html template.
Hacking the CASE-CONFLICT.PHP file
We made a few additional changes to the markup, not in the template itself but rather in the case-conflict.php file, located in the /modules subdirectory. This particular PHP file dictates how the three conflict tables are dynamically generated. Among other things, it generates the "No conflicts found" message, as well as the three h2 (heading) titles for each of the three conflict tables.
To have some fun with the "No conflict found" message, we located the three instances where it appears in the case-conflict.php file (once for each of the three tables); removed the embedded em (emphasis) tags; changed the messages so each was specific to each type of conflict results; and then added "zip, zero, nada!" to the message because, well, that's the kind of geeks we are. We also added the class name "none" to each instance, so we could control their presentation. (See the related CSS, below.) Here's how each of these read in our modified case-conflict.php file:
$z .= "<p class=\"none\">No primary conflicts found ... zip, zero, nada!\n"; $z .= "<p class=\"none\">No name-based conflicts found ... zip, zero, nada!\n"; $z .= "<p class=\"none\">No SSN conflicts found ... zip, zero, nada!\n";
Call us irresponsible. Now let's move on to the CSS code.
Redundant but useful CSS code
If you have been following our progress with the Claire design, you're already familiar with the basic design elements and CSS coding tricks we've used. For obvious practical reasons, we have often simply repeated bits of CSS code from other pages to replicate a particular type of presentation. For the Conflict page, the most noticeable example of this is how the conflict results are displayed -- a direct lift from the search results design you first viewed in Step 08. At the beta stage, this code redundancy has been useful to assure matching design but keeping the draft CSS code distinct for most page elements on most pages so we can stay on top it. Once we move beyond beta and finalize the design, we will conflate this type of duplicated CSS code once we understand comprehensively which presentational characteristics are multiple and/or universal, and those that require page-specific CSS element control and specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).
Having said that -- and it was probably more than you wanted or needed to hear -- here's the CSS code we cooked up for the redesigned Conflict page:
h2#primary,
h2#name,
h2#ssn {
margin-top: 16px;
margin-bottom: 0;
}
p.none {
margin: 10px 16%;
padding: 4px 0 6px 0;
text-align: center;
font-weight: bold;
color: red;
background-color: #F7F2EA;
border: 1px dotted silver;
}
/* based on CSS for ".intake-search-results" */
.conflict-results {
width: 563px;
border-collapse: collapse;
margin: 4px 0 0 2px;
font-size: 85%;
}
.conflict-results td {
padding: 4px 0 6px 0;
}
.conflict-results th {
padding: 1px 0 3px 0;
color: white; #7F736A;
background-color: #B5C6A5;
border: 1px solid #CAA8B6;
border-right: 1px solid #B5C6A5;
border-bottom: 1px solid #7C806A;
text-align: left;
}
.conflict-results th.first,
.conflict-results td.first {
padding-left: 6px;
}
th.last {
border-right: 1px solid #7C806A;
}
.row1 {
background-color: transparent;
}
.row2 {
background-color: #F7F2EA;
}
.row2 td {
border: 1px solid silver;
border-right: 1px solid #F7F2EA;
border-bottom: 1px solid #F7F2EA;
}
.row2 td.last {
border-right: 1px solid #848982;
}
.row2 td.row-bottom {
border-bottom: 1px solid #848982;
}
/* elements below conflict tables */
.conflicts {
font-size: 90%;
font-weight: normal;
line-height: 3em;
}
ul#conflict-list {
font-size: 90%;
margin-top: 10px;
margin-left: -28px;
margin-bottom: -10px;
}
* html ul#conflict-list {
margin-left: 16px;
}
.conflicts select {
font-size: 100%;
}
The usual full-size screenshots of this latest template are on view at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
Next: Step 20: Case List Search Results
Related articles and files:
