Repository: couchdb-fauxton Updated Branches: refs/heads/master abc3e697f -> 5bc8bcd10
No Docs Found screen style update Small aesthetic thing. The "no documents found" page had a hardcoded minimum height which often caused the panel to have the text hidden offscreen and a scrollbar to appear. This just vertically centers the watermark and label so it works on any screen size. Also now exports the NoResultsScreen component for use elsewhere. Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/5bc8bcd1 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/5bc8bcd1 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/5bc8bcd1 Branch: refs/heads/master Commit: 5bc8bcd10d20b3886e1ee75ccbe3047c8fd7d07b Parents: abc3e69 Author: Ben Keen <ben.k...@gmail.com> Authored: Tue Feb 16 13:49:41 2016 -0800 Committer: Ben Keen <ben.k...@gmail.com> Committed: Thu Feb 18 12:00:06 2016 -0800 ---------------------------------------------------------------------- .../documents/assets/less/index-results.less | 25 ++++++++++++++------ .../index-results.components.react.jsx | 19 +++++++++------ 2 files changed, 30 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5bc8bcd1/app/addons/documents/assets/less/index-results.less ---------------------------------------------------------------------- diff --git a/app/addons/documents/assets/less/index-results.less b/app/addons/documents/assets/less/index-results.less index 591c520..5b2f55f 100644 --- a/app/addons/documents/assets/less/index-results.less +++ b/app/addons/documents/assets/less/index-results.less @@ -28,17 +28,28 @@ } } +.no-results-screen { + position: absolute; + margin: -15px; + top: 50%; + margin-top: -125px; + width: 100%; + h3 { + border-top: 1px solid #ccc; + height: 45px; + font-size: 20px; + font-weight: normal; + width: 400px; + text-align: center; + padding-top: 8px; + margin: 0 auto; + } +} .watermark-logo { background: transparent url('../img/couch-watermark.png') no-repeat 50% 50%; - min-height: 400px; - padding-top: 60%; + height: 205px; text-align: center; margin: 0 20%; - h3 { - border-bottom: 1px solid #ccc; - padding-bottom: 10px; - margin-bottom: 20px; - } .preview { margin: 0 10px; } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5bc8bcd1/app/addons/documents/index-results/index-results.components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/index-results/index-results.components.react.jsx b/app/addons/documents/index-results/index-results.components.react.jsx index f809883..dd9758a 100644 --- a/app/addons/documents/index-results/index-results.components.react.jsx +++ b/app/addons/documents/index-results/index-results.components.react.jsx @@ -19,12 +19,9 @@ define([ 'addons/components/react-components.react', 'addons/documents/resources', 'addons/fauxton/components.react', - 'libs/react-bootstrap', 'react-autocomplete', - - 'plugins/prettify', - + 'plugins/prettify' ], @@ -37,10 +34,16 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, Fauxto var SplitButton = ReactBootstrap.SplitButton; var MenuItem = ReactBootstrap.MenuItem; - var NoResultScreen = React.createClass({ + + var NoResultsScreen = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired + }, + render: function () { return ( - <div className="watermark-logo"> + <div className="no-results-screen"> + <div className="watermark-logo"></div> <h3>{this.props.text}</h3> </div> ); @@ -536,7 +539,7 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, Fauxto }, render: function () { - var view = <NoResultScreen text={this.state.textEmptyIndex}/>; + var view = <NoResultsScreen text={this.state.textEmptyIndex}/>; if (this.state.hasResults) { view = <ResultsScreen @@ -558,8 +561,10 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, Fauxto } }); + var Views = { List: ViewResultListController, + NoResultsScreen: NoResultsScreen, ResultsScreen: ResultsScreen, WrappedAutocomplete: WrappedAutocomplete };
