Step 18: Case Information Screen
From PikaDocs
| Table of contents |
Pika's default Case Info screen
Out of the box, the Pika Case Info page tab offers a nutrient-dense array of case-specific data options broken out into three logical clusters. The first cluster is the "Administrative Information" section which includes a dozen input and select fields, as well as links to separate dialogs for locating and assigning counsel and/or co-counsel to the case:
The second cluster is the "Closing Information" section, another half-dozen fields for targeting and tabulating data related to the case at the stage of closure:
The third section is called "Extra Information," essentially an alternate cluster of additional case-related information that a program may want to track for institutional and/or funding reasons:
Redesign rationale for the Case Information page elements
For the Claire redesign, the challenge was two-fold: How to pare down these 20 default input and select field options to the core data essential to the existing LSNC case-handling environment; and how to simplify the display to make it easier to scan, read and/or input the data. Our design approach involved the following considerations:
- Remove extraneous data fields - these included all the page elements in the "Extra Information" section, and three others in the "Closing Information" section ("reason rejected," "destroy date" and "outcome") that are not currently essential to LSNC case handling protocols.
- Eliminate duplicated fields that are not required or elsewhere displayed within the viewport - for example, in the "Administrative Information" section we trim down the number of fields by removing the "Co-counsel #2" field, as well as the "Primary Client" information displayed elsewhere, in the left-hand column of the page within the case screen shell.
- Add three additional funding code fields, to conform to existing LSNC case handling protocols. (Hey, some LSNC folks wanted even more funding fields!)
- Position these page elements into two sections, with a design that draws the eye to the most commonly referenced fields on the left, with generous use of space to make the data fields easier to scan and read, and allow for at least one good jump up in text size.
Here's the basic design for the Case Info page tab we came up with:
Rebuilding the Case Info structural markup
The content area for the original Pika Case Info page derives from the case_info.html subtemplate, and is built on top of traditional table structural markup to control the display of all the varied input and select fields. As we have done on several other Pika pages, we stripped out all the table tags and embedded inline style elements, and instead used floated divs exclusively to control the layout and positioning of the four principal clusters. You can view the rebuilt structural markup at Project Claire: case_info.html.
It's all about the float (http://css.maxdesign.com.au/floatutorial/), baby!
The structural technique used here is pretty much akin to what we've done before several times over in the Claire design. To more easily visualize how this technique works on this page, this is a screenshot of the redesigned page with the four principal floated divs (cleverly called "case-info01," "case-info02," "case-info03" and "case-info04") outlined with 1px blue dashed lines:
Adding the CSS to finish the page design
Of course, to get this effect, one has to use CSS purposefully to control the positioning of all the page elements. While the CSS added for this page seems relatively long, it is actually pretty straightforward. It involves setting the basic floats for each of the four principal areas of the page, and then doing basic CSS cosmetics to nip/tuck everything to get the look or presentation desired. Here is the specific CSS code we added to the danio.css file to make our design work, including the inevitable IE hacks to deal with variances between it and Firefox in how they handle the margin and padding for certain elements:
.case-info01 {
float: left;
width: auto;
margin: 20px 10px 20px 1px;
padding: 8px 10px 12px 10px;
background-color: #F7F2EA;
border-top: 1px solid #F4E1CC;
border-right: 1px solid #C6B6A5;
border-bottom: 1px solid #C6B6A5;
border-left: 1px solid #F4E1CC;
font-size: 85%;
font-weight: bold;
color: gray;
}
.case-info02 {
float: left;
width: auto;
margin: 20px 0 0 10px;
font-size: 85%;
font-weight: bold;
}
* html .case-info01,
* html .case-info02 {
margin-top: 0;
}
.case-info01 input,
.case-info02 input,
.case-info03 input,
.case-info01 select,
.case-info02 select,
.case-info03 select {
margin-bottom: 4px;
font-size: 110%;
background-color: white;
}
.case-info02 select {
background-color: #F5F9F5;
}
h2#case-close {
clear: both;
margin: 0 0 0 0;
}
* html h2#case-close {
margin: -20px 0 16px 0;
}
.case-info03 {
float: left;
width: auto;
margin: 16px 10px 20px 1px;
padding: 8px 10px 12px 10px;
background-color: #F7F2EA;
border-top: 1px solid #F4E1CC;
border-right: 1px solid #C6B6A5;
border-bottom: 1px solid #C6B6A5;
border-left: 1px solid #F4E1CC;
font-size: 85%;
font-weight: bold;
color: gray;
}
* html .case-info03,
* html .case-info04 {
margin-top: 0;
}
.case-info03 select {
background-color: white;
}
.case-info04 {
float: left;
margin-top: 16px;
font-size: 90%;
}
.case-info04 input {
border: 0;
}
p#case-info-save {
float: left;
clear: both;
margin-top: -6px;
}
And, hey, don't you just love the new buttons?
We've posted the full, validated case_info.html template and updated CSS code at the Project Claire front page. Full-sized screenshots, as always, have also been posted at the Project Claire Design Gallery (http://www.openpika.org/gallery.html), including a special screenshot showing how the page resizes (http://www.openpika.org/beta_gallery/beta_case_info_resize_ie.html).
Next: Step 19: Conflicts Screen
Related articles and files:
