Version: Next

Webapp Tables CSS & HTML

Inline List#

<div class="inline-list">
<h3>2 probeSets</h3>
<ul>
<li>FBgn0014159, </li>
<li><a>Complementation group F</a>, </li>
</ul>
</div>
CSSDescription
div.inline-listwrapping the list and title in div makes it more clear what elements belong together and allow you to set a custom ID on the whole thing
div.inline-list h3 (optional)header 3 (see below) styling
div.inline-list ullist will be displayed inline, without margins between items and without list styles (circles, squares etc.)

Inline List (Inactive, No Results)#

<div class="inline-list gray">
<h3>0 probeSets</h3>
</div>
CSSDescription
div.inline-list.grayone can apply an ‘inactive’ theme by attaching a class to the top element

Inline List (Tagging, Right)#

<div class="inline-list">
<h3><div class="right">Right positioned</div> 0 probeSets</h3>
</div>
CSSDescription
div.inline-list div.right (optional)will float element to the right and apply appropriate colors to links; needs to go first, before any other text

'Header' Inline List#

<div class="inline-list">
<ul>
<li><span class="name">synonyms</span>:</li>
<li>FBgn0014159, </li>
<li>Complementation group F, </li>
<li>FBgn0015483, </li>
</ul>
</div>
CSSDescription
div.inline-list .name (optional)the main theme color will be applied to the element

Collection Table#

<div class="collection-table">
<h3>1 protein</h3>
<table>
<thead>
<tr><th>primaryIdentifier</th><th>primaryAccession</th></tr>
</thead>
<tbody>
<tr>
<td>EVE_DROME</td>
<td>P06602</td>
</tr>
<tr>
<td>AUTO_DROME</td>
<td>P65</td>
</tr>
</tbody>
</table>
</div>
CSSDescription
div.collection-table h3table title will pickup theme colors much like Title (Level 3) below
div.collection-table thead th,tdtable expects a thead element, that will apply the same background as the title
div.collection-table.nowrap (optional)row columns do not wrap and are displayed inline

Note Modern browsers will apply alternating background and border on odd row columns, the rubbish (IE) will be fixed by running jQuery on page load.

Collection Table (Type Column, Text Highlight)#

<div class="collection-table">
<h3>1 protein</h3>
<table>
<thead>
<tr><th>primaryIdentifier</th><th>primaryAccession</th></tr>
</thead>
<tbody>
<tr>
<td class="class">EVE_DROME</td>
<td>P06602</td>
</tr>
<tr>
<td class="class">AUTO_DROME</td>
<td>P65</td>
</tr>
</tbody>
</table>
</div>
CSSDescription
div.collection-table table td.classapplying a ‘class’ class will highlight the text in the given column

Collection Table (Vertical Column Border)#

<div class="collection-table column-border">
<-- ... -->
<table>
<-- ... -->
</table>
</div>
CSSDescription
div.collection-table.column-borderuses a pseudoclass to apply a border between columns

Note Modern browsers will apply alternating background and border on odd row columns, the rubbish (IE) will be fixed by running jQuery on page load.

Collection Table (Vertical Column Border by 2)#

<div class="collection-table column-border-by-2">
<-- ... -->
<table>
<-- ... -->
</table>
</div>
CSSDescription
div.collection-table.column-border-by-2uses a pseudoclass to apply a border between every other column

Note Modern browsers will apply alternating background and border on odd row columns, the rubbish (IE) will be fixed by running jQuery on page load.

Collection Table (Inactive, No Results)#

<div class="collection-table gray">
<h3>0 genes</h3>
</div>
CSSDescription
div.collection-table.grayone can apply an ‘inactive’ theme by attaching a class to the top element

Collection Table (Tagging, Right)#

<div class="collection-table">
<h3><div class="right">Right positioned</div> 0 genes</h3>
</div>
CSSDescription
div.collection-table div.right (optional)will float element to the right and apply appropriate colors to links; needs to go first, before any other text

Collection Table (Persistent Table Headers)#

<div class="collection-table persistent">
<-- ... -->
</div>
CSSDescription
div.collection-table.persistentwill make table headers persist as you scroll within the table

Basic Table (Generic)#

<div class="basic-table">
<h3>Some title</h3>
<table>
<tr><td>Row column</td></tr>
</table>
</div>
CSSDescription
div.basic-table h3will apply the heading 3 style (see below)
div.basic-table div.right (optional)will float element to the right and apply appropriate colors to links; needs to go first, before any other text
div.basic-table tablewill make sure that the table is properly collapsed, has padding and does not have cellspacing
div.basic-table.gray (optional)one can apply an ‘inactive’ theme by attaching a class to the top element

Collection of Collection Tables#

<div class="collection-of-collections">
<div class="header">
<h3>Regulatory Regions</h3>
<p>Description</p>
<div class="switchers">
<a class="active">CRM</a> <a>TFBindingSite</a>
</div>
</div>
<div class="collection-table">
<-- ... -->
</div>
<div class="collection-table">
<-- ... -->
</div>
</div>
CSSDescription
div.collection-of-collectionsa div wrapper for collections
div.collection-of-collections div.headerwill apply a background color that of collection table header
div.collection-of-collections div.header a.active (optional)link elements are underlined by default and switched to bold if class ‘active’ is applied to them

Table Togglers (Less, More, Expand, Collapse, Show in table)#

<div class="collection-table">
<-- ... -->
<div class="toggle">
<a class="less">Show less</a>
<a class="more">Show more</a>
</div>
<div class="show-in-table">
<a href="#">Show all in a table</a>
</div>
</div>
CSSDescription
div.collection-table div.toggle a.morewill create apply an expand/more button
div.collection-table div.toggle a.lesswill create apply a collapse/less button; bear in mind that if you want to show it to the right like on report pages, it needs to go before other toggles and be floated right
div.collection-table div.toggle a (optional)a generic button without any upward/downward arrows
div.collection-table div.show-in-table athe appropriate color will be applied to the link contained, no more, no less (in fact, show all)

Title (Level 3)#

<h3 class="goog">Link to other InterMines</h3>
CSSDescription
h3.googwill pickup theme colors and apply Report Page/Google News -style colors, backgrounds, borders

Smallfont, Display one-per-line#

<table class="tiny-font">
<tr><td class="one-line">
<a>One</a>
<a>Two</a>
</td></tr>
</table>
CSSDescription
.one-line *applying class ‘oneline’ will make all descendants appear one per line
.tiny-font *will apply 11px font size to all descendants

Loading spinner (AJAX)#

<div class="loading-spinner"></div>
CSSDescription
.loading-spinnerwill show an inline block positioned loading spinner gif

Table Warning#

<div class="collection-table warning">
<-- ... -->
</div>
CSSDescription
.warningwill show a warning icon and change the color of the div to pale yellow