Commit 457cc47b authored by Pierre.Vriens's avatar Pierre.Vriens Committed by David Metzler
Browse files

#2124777 Added Custom Skin report.

parent a7105479
@CHARSET "UTF-8";
/* Apply some custom styling for some Forena items (eg: enlarge the tiny icons) */
div.forena-editor-links {
width: 5em;
}
/* Enlarge the (tiny) edit icons a bit + align them right + surround them with a (black) border */
div.forena-editor-links img,
div.forena-edit-links img,
div.content a img {
height: 1.5em;
width: 1.5em;
margin: 0.25em 0.25em;
border: thin solid #000000;
float: right;
}
/* Align data block related edit icons to the right + surround them with a (red) border */
div.forena-edit-links {
border: thin solid #CC0000;
float: right;
height: 2.0em;
}
/* Style output rendered via frx:renderer=FrxMyReports */
div.FrxMyReports {
font-weight: bold;
font-size: 1.0em;
white-space: nowrap;
overflow: auto;
padding: 0em 0.5em;
margin: 0.75em;
line-height: 100%;
background-color: #ccffee;
background: linear-gradient(
to bottom,
#ffffff,
#eeffcc 50%,
#ffffff 50%,
#bbcc99
);
background-size: 100% 2.0em;
border: medium dashed #ffaa33;
}
/* Temporary (?) fixes below */
/* Align textual edit links (without a corresponding edit icon) at the top */
div.forena-edit-links a {
vertical-align: top;
}
/* Try to show all edit links/icons above (not in between) an UL-list (i.e. in frx:block ULs) */
div.content ul.frx-block {
padding: 2.0em 0.5em 0em 2.5em;
}
\ No newline at end of file
;
; skinfo file used for my reports.
;
name = Custom Skin
description = Skin used in customized reports.
;
; -----------------------------------------------------------
;
; JavaScript libraries to be added.
;
; Make the dataTables plugin available:
;
scripts[] = dataTables/media/js/jquery.dataTables.min.js
;
; Use (enable) some dataTables features (by specifying so in a custom JS file):
;
scripts[] = datatables_features.js
;
; -----------------------------------------------------------
;
; Stylesheet inclusions:
;
stylesheets[all][] = datatables_styling.css
stylesheets[all][] = custom_forena_styling.css
;
; -----------------------------------------------------------
;
; Settings for Forena Classes to further control how Forena renders reports:
;
; Disable helper classes such as even and odd:
; FrxReport[noHelperClasses] = true
;
; Control the root element tag name using the following:
; FrxXMLDoc[rootElementName] = node
;
; ---------------------------------------------------------
;
; Add arbitrary values to reference them in the report using the skin data context:
;
; company_name = My Cool Company
;
; (doing so allows for referencing {skin.company_name} anywhere in a report).
\ No newline at end of file
/**
* @file
* Set behaviors related to dataTables Features.
*/
(function ($) {
Drupal.behaviors.SetDatatablesFeatures = {
attach: function (context, settings) {
$('table').dataTable({
"sPaginationType": "full_numbers",
"stateSave": true
});
}
};
})(jQuery);
/**
* More dataTables features to pick from (use a comma to separate them, except for the last one):
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"sPaginationType": "two_button"
});
*/
\ No newline at end of file
@CHARSET "UTF-8";
/*Styling of dataTables displays*/
div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
padding: 0.35em 0.25em;
font-size: 1.0em;
margin: 1.0em 0.5em;
line-height: 100%;
}
div.dataTables_length {
float: right;
width: 31%;
}
div.dataTables_filter {
float: left;
width: 62%;
}
div.dataTables_info {
float: left;
width: 31%;
}
div.dataTables_paginate {
float: right;
width: 62%;
}
table.dataTable {
float: left;
}
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE root [
<!ENTITY nbsp "&#160;">
]>
<html xmlns:frx="urn:FrxReports">
<head>
<title>7. Customized Simple Table of States</title>
<frx:category>Sample</frx:category>
<frx:options hidden="0" skin="custom_skin"></frx:options>
<frx:parameters>
</frx:parameters>
<frx:docgen>
</frx:docgen>
<frx:fields>
<frx:field id="{sample_states}" link="reports/sample.states"/>
</frx:fields>
<frx:menu />
<frx:cache />
</head>
<body>
<div>
<p>
This report is a variation of the <a href="./sample.states"
target="_self">Simple Table of States</a> report that uses a <strong>custom skin</strong> for the
following customizations:
</p>
<ul>
<li>The table is displayed using the dataTables plugin by
adding the JavaScript <strong>datatables_features.js</strong> in
the custom skin. which adds various widgets to operate on the
data contained in the table, such as (above the table) the search
box and the number of entries to be shown, and (below the table)
the pagination and the number of rows. Type a few
letters in the search box to get the idea. See the dataTables documentation
for more information on this JQuery plugin.
</li>
<li>The presentation of the dataTables controls are themed by adding the stylesheet <strong>datatables_styling.css</strong>
in the custom skin.
</li>
<li>Some of Forena's default styling is refined (e.g. the size
of the edit icons), by adding the stylesheet <strong>forena_styling.css</strong>
in the custom skin.
</li>
</ul>
</div>
<div frx:block="sampledb/states" id="state-block" class="FrxTable">
<table>
<thead>
<tr>
<th>code</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr frx:foreach="*" id="state" class="test {code}">
<td>{code}</td>
<td>{name}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment