diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js index ca2ca255a..f1b94033a 100644 --- a/src/main/webapp/scripts/project/browsing-engine.js +++ b/src/main/webapp/scripts/project/browsing-engine.js @@ -48,6 +48,11 @@ BrowsingEngine.prototype._initializeUI = function() { this._div.html( '
' + + '
' + + '

Explore data ...

' + + '

by choosing a facet or filter method from the menus at the top of each column.

' + + '

Not sure how to get started? Watch this screencast.

' + + '
' + '
refreshing facets ...
' + '
' + '

' + @@ -174,7 +179,10 @@ BrowsingEngine.prototype.update = function(onDone) { self._elmts.indicator.hide(); if (self._facets.length > 0) { + self._elmts.help.hide(); self._elmts.controls.show(); + } else { + self._elmts.help.show(); } if (onDone) { diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css index c8d83838d..119ab588f 100644 --- a/src/main/webapp/styles/project/browsing.css +++ b/src/main/webapp/styles/project/browsing.css @@ -1,6 +1,5 @@ .browsing-panel-header { height: 5em; - text-align: center; } .browsing-panel-indicator { @@ -9,6 +8,19 @@ .browsing-panel-controls { display: none; } +.browsing-panel-help { + padding: 10px; + background: white; + border: 1px solid #ccc; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} +.browsing-panel-help h1 { + margin-top: 0px; + font-size: 150%; + font-weight: bold; + color: #888; +} ul.facets-container { padding: 0;