Author Topic: CSS support in report formats for tabular results  (Read 4170 times)

Offline tom_hampton

  • BeerSmith Grandmaster Brewer
  • *****
  • Posts: 929
  • BeerSmith 2 Rocks!
    • Tom's Miata Racing Blog
CSS support in report formats for tabular results
« on: November 18, 2011, 11:30:46 AM »
Typical tabular results like: $BOIL_INGREDIENTS, and all the other "ingredients" lists don't provide any way to reformat the HTML.  The result is always in the form:

Code: [Select]
<center><u><b>Ingredients</b></u></center>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" align="left"><b>
Amt</b></td>
<td width="50%" align="left"><b>
Name</b></td>
<td width="11%" align="left"><b>
Type</b></td>
<td width="4%" align="left"><b>
#</b></td>
<td width="11%" align="left"><b>
%/IBU</b></td>
</tr>
<tr>
<td align="left">
10 lbs 6.0 oz</td>
<td align="left">
Pale Malt, Ale (Barrett Burston) (2.0 SRM)</td>
<td align="left">
Grain</td>
<td align="left">
1</td>
<td align="left">
89.0 %</td>
</tr>
</table>

Basically, this results in a centered, underlined, and bold Title, followed by a 100% width table with no gridlines.  The header row of the table is bolded, and the data rows are plain text. 

I'd like to be able to control some/all aspects of these tables (fonts, spacing, grid lines, etc).  This could be accomplished with some simple changes to the generated HTML:

<table class="ingredients boil_ingredients" id="boil_ingredients_1">
<caption>Boil Ingredients</caption>

<tr>
<th></th>
...
<th></th>
</tr>

<tr>
<td></td>
...
<td></td>
</tr>
...
</table>

There are a few of changes above:

1.  Use of the <caption> tag for the table "title", instead of having the title outside of the table. 
2.  Use of the <th> tag for the header titles.
3.  Addition of the "class" and "id" attributes to each tag, allowing each tag to be styled separately to any desired level of detail.

From the above I can style all ingredients lists (.ingredients selector) the same way, or I can style all boil ingredients (.boil_ingredients selector) lists the same way, or I can style a specific copy of the boil ingredients (#boil_ingredients_1 selector) a certain way. 

In addition, I can style each tag within the above:

.ingredients caption { style choices; } // all captions for ingredients lists
.boil_ingredients th { style choices; } // all headers for .boil_ingredients lists specifically
#boil_ingredients_1 td { style choices; } //all table data for the boil_ingredients_1 lists only

Looking through the list of tags that generate tables:

TAGClassesID
$MASH_INGREDIENTS 
ingredients, grains, mash_ingredients_table
mash_ingredients_n
$FERMENTABLES
ingredients, grains, fementables_table
fermentables_n
$STEEP_INGREDIENTS
ingredients, grains, steep_ingredients
steep_ingredients_n
$FERMENT_INGREDIENTS
ingredients, misc, ferment_ingredients_table
ferment_ingredients_n
$BOTTLING_INGREDIENTS
ingredients, misc, bottling_ingredients_table
bottling_ingredients_n
$PRIMARY_INGREDIENTS
ingredients, misc, primary_ingredients_table
primary_ingredients_n
$SECONDARY_INGREDIENTS
ingredients, misc, secondary_ingredients_table
secondary_ingredients_n
$INGREDIENTS
ingredients, misc, ingredients_table
ingredients_n
$MISCS
ingredients, misc, miscs_table
miscs_n
$FIRST_WORT_HOPS
ingredients, hops, first_wort_hops_table
first_wort_hops_n
$HOPS
ingredients, hops, hops_table
hops_n
$STEEP_HOPS
ingredients, hops, steep_hops_table
steep_hops_n
$YEASTS
ingredients, yeasts_table
yeasts_n
$MASH_STEPS
steps, mash_steps_table
mash_steps_n
$SPARGE_STEPS
steps, sparge_steps_table
sparge_steps_n
$WATER_PREP
water, water_prep
water_prep_n

All of the above could be simply "hard coded" in the existing HTML snippets within BeerSmith with the exception of the "ID" attribute because that would be a unique incrementing counter for each usage of the element (still not exactly rocket science).  Even without the "ID" attribute, it would give us a great deal of control over the look of these tables with very minor modifications to the BeerSmith source.

My ultimate wishlist for BeerSmith would be to allow the report writer to select the data elements to include in the tablular output (maybe I just want the "amount" and the "description"), and perhaps even include my own custom column(s).




« Last Edit: November 18, 2011, 01:01:23 PM by tom_hampton »
R.I.P.:Belgian Blonde
On Tap: Apfelwein, Kolsch(v2), Pumpkin Ale, Belgian Specialty 
Aging/Storing: Coffee Porter, Chocolate Porter, Flanders Red, English Barlywine
Fermenting: Maggie's Altbier
Next Up: PtE(1.1), Belgian Dubbel?

Working thru all BCS recipes

Offline tom_hampton

  • BeerSmith Grandmaster Brewer
  • *****
  • Posts: 929
  • BeerSmith 2 Rocks!
    • Tom's Miata Racing Blog
Re: CSS support in report formats for tabular results
« Reply #1 on: November 20, 2011, 09:56:16 AM »
I actually could fix this myself using <div class="xxxx"> elements, EXCEPT for the fact that beersmith is assigning properties inline to the TD elements

Note in the example above the "WIDTH=xx%" and the "ALIGN=left" items.  I can't override these with CSS classes (the "closest" style takes precedence), so I'm stuck with some funky formatting that I'd like to change.  Moreover, Beersmith is not 100% consistent in is application of inline properties: sometimes it assigns a width, sometimes it doesn't.

Admitedly, I'm probably farther afield than most in creating my own custom report....but, changing from a local formatting to a CSS based approach would allow custom report writers to do what we want, and with a default CSS would still allow the default reports to work for the masses.
R.I.P.:Belgian Blonde
On Tap: Apfelwein, Kolsch(v2), Pumpkin Ale, Belgian Specialty 
Aging/Storing: Coffee Porter, Chocolate Porter, Flanders Red, English Barlywine
Fermenting: Maggie's Altbier
Next Up: PtE(1.1), Belgian Dubbel?

Working thru all BCS recipes

Offline BeerSmith

  • Brewer, Author, Patriot
  • BeerSmith Administrator
  • BeerSmith Grandmaster Brewer
  • *****
  • Posts: 5592
  • BeerSmith - take the guesswork out of brewing!
    • BeerSmith
Re: CSS support in report formats for tabular results
« Reply #2 on: November 20, 2011, 08:20:54 PM »
Tom,
  I did not give a lot of thought to CSS support, but I can see how it might help on the PC side.  Unfortunately the Mac previewer is a very simple implementation that does not handle the CSS classes well.  Until I can get a better embedded browser for the Mac it won't be able to handle CSS.

  I think it might be possible to conditionally add CSS classes as you mention on the PC version.  However I'm not sure what to do with the width constructs as many of the formats need a proper width for each column so it is calculated and added inline.  I suppose I would need to define a CSS file for the various reports to have them work without the width constructs. 

  In any case I've bookmarked this one and put it on my list of items to look at enhancing in the future with CSS.

Brad
Get a free trial of BeerSmith 3 here

Offline tom_hampton

  • BeerSmith Grandmaster Brewer
  • *****
  • Posts: 929
  • BeerSmith 2 Rocks!
    • Tom's Miata Racing Blog
Re: CSS support in report formats for tabular results
« Reply #3 on: November 20, 2011, 08:47:39 PM »
Brad-

The beauty of the above is that you could define a SINGLE CSS file that includes the style definitions for each class.  For example:

Code: [Select]
.ingredients_table th:nth-of-type(1){ width:22%; align:left;}
.ingredients_table th:nth-of-type(2){ width:50%; align:left;}
.ingredients_table th:nth-of-type(3){ width:11%; align:left;}
.ingredients_table th:nth-of-type(4){ width:04%; align:left;}
.ingredients_table th:nth-of-type(5){ width:11%; align:left;}

The "nth-of-type" selector is less than ideal because of its a hard-coded, positional dependence.  That would be easily fixable by defining another class name for each table header...eg:

Code: [Select]
.ingredients_table_header_1 { width:22%; align:left;}
.ingredients_table_header_2 { width:50%; align:left;}
.ingredients_table_header_3 { width:11%; align:left;}
.ingredients_table_header_4 { width:04%; align:left;}
.ingredients_table_header_5 { width:11%; align:left;}

<table class="ingredients_table">
<tr>
<th class="ingredients_table_header_1"></th>
<th class="ingredients_table_header_2"></th>
<th class="ingredients_table_header_3"></th>
<th class="ingredients_table_header_4"></th>
<th class="ingredients_table_header_5"></th>
</tr>
</table>
R.I.P.:Belgian Blonde
On Tap: Apfelwein, Kolsch(v2), Pumpkin Ale, Belgian Specialty 
Aging/Storing: Coffee Porter, Chocolate Porter, Flanders Red, English Barlywine
Fermenting: Maggie's Altbier
Next Up: PtE(1.1), Belgian Dubbel?

Working thru all BCS recipes

Offline tom_hampton

  • BeerSmith Grandmaster Brewer
  • *****
  • Posts: 929
  • BeerSmith 2 Rocks!
    • Tom's Miata Racing Blog
Re: CSS support in report formats for tabular results
« Reply #4 on: November 20, 2011, 08:50:59 PM »
Tom,
  I did not give a lot of thought to CSS support, but I can see how it might help on the PC side.  Unfortunately the Mac previewer is a very simple implementation that does not handle the CSS classes well.  Until I can get a better embedded browser for the Mac it won't be able to handle CSS.


That's a real bummer for the Mac folks.  Glad I'm not one.   :P

I do a lot of fun things with CSS in the reports on the PC side.  I'd be really frustrated without CSS, I'd have to save as HTML and use a proper browser to print.
R.I.P.:Belgian Blonde
On Tap: Apfelwein, Kolsch(v2), Pumpkin Ale, Belgian Specialty 
Aging/Storing: Coffee Porter, Chocolate Porter, Flanders Red, English Barlywine
Fermenting: Maggie's Altbier
Next Up: PtE(1.1), Belgian Dubbel?

Working thru all BCS recipes

 

modification