You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ro...@apache.org on 2014/12/02 13:13:47 UTC
fauxton commit: updated refs/heads/master to dca437a
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master 052375645 -> dca437a54
Componentize footer
Take the elements that were all baked into all-docs-list
and inject them into the all-docs-list. This enables us to have
a separate footer component in the layout which can be initialized
without the all-docs-list viewobject.
This enables us to remove the `position: fixed` from the footer
and use `position: absolute`. Without having the element
`position: fixed;` we do not need to calculate it's width via JS
and can apply a css based pane layout.
Part of: COUCHDB-2471
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/dca437a5
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/dca437a5
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/dca437a5
Branch: refs/heads/master
Commit: dca437a546130b1233f5c65b87f888effb373ee5
Parents: 0523756
Author: Robert Kowalski <ro...@apache.org>
Authored: Thu Nov 27 15:30:26 2014 +0100
Committer: Robert Kowalski <ro...@apache.org>
Committed: Tue Dec 2 13:12:37 2014 +0100
----------------------------------------------------------------------
app/addons/documents/assets/less/documents.less | 2 +-
app/addons/documents/resources.js | 13 ++--
app/addons/documents/routes-documents.js | 76 +++++++++++++++++---
.../documents/templates/all_docs_footer.html | 20 ++++++
.../documents/templates/all_docs_header.html | 32 +++++++++
.../documents/templates/all_docs_list.html | 5 --
.../documents/templates/header_alldocs.html | 30 --------
app/addons/documents/tests/viewsSpec.js | 24 +++++--
app/addons/documents/views.js | 54 +++++---------
app/addons/fauxton/components.js | 5 ++
app/templates/layouts/with_tabs_sidebar.html | 12 ++--
assets/less/fauxton.less | 18 +++--
assets/less/templates.less | 5 +-
13 files changed, 192 insertions(+), 104 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 9a780ba..b444044 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -151,7 +151,7 @@ button.string-edit[disabled] {
.show-select {
#doc-list {
- padding: 30px 0 0 0;
+ padding: 30px 0 30px 0;
.custom-inputs {
display: block;
float: left;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/resources.js b/app/addons/documents/resources.js
index a5acf81..1eaa6bb 100644
--- a/app/addons/documents/resources.js
+++ b/app/addons/documents/resources.js
@@ -637,8 +637,13 @@ function(app, FauxtonAPI, PagingCollection) {
this.view = options.view;
this.design = options.design.replace('_design/','');
this.params = _.extend({limit: 20, reduce: false}, options.params);
-
this.idxType = "_view";
+
+ this.viewMeta = {
+ total_rows: this.rows.length,
+ offset: 0,
+ update_seq: false
+ };
},
url: function () {
@@ -668,12 +673,6 @@ function(app, FauxtonAPI, PagingCollection) {
var deferred = FauxtonAPI.Deferred();
this.reset(this.rows, {silent: true});
- this.viewMeta = {
- total_rows: this.rows.length,
- offset: 0,
- update_seq: false
- };
-
deferred.resolve();
return deferred;
},
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/routes-documents.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-documents.js b/app/addons/documents/routes-documents.js
index fbd62c3..3b49878 100644
--- a/app/addons/documents/routes-documents.js
+++ b/app/addons/documents/routes-documents.js
@@ -97,11 +97,20 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
this.listenTo(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase);
},
+ establish: function () {
+ return [
+ this.designDocs.fetch({reset: true}),
+ this.allDatabases.fetchOnce()
+ ];
+ },
+
initViews: function (dbName) {
this.databaseName = dbName;
this.database = new Databases.Model({id: this.databaseName});
this.allDatabases = new Databases.List();
+ this.footer = this.setView("#footer", new Documents.Views.Footer());
+
this.designDocs = new Documents.AllDocs(null, {
database: this.database,
paging: {
@@ -116,7 +125,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
});
this.rightHeader = this.setView("#right-header", new Documents.Views.RightAllDocsHeader({
- database: this.database
+ database: this.database
}));
this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
@@ -216,10 +225,6 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
};
},
- establish: function () {
- return [this.designDocs.fetch({reset: true}), this.allDatabases.fetchOnce()];
- },
-
createParams: function (options) {
var urlParams = app.getParams(options),
params = Documents.QueryParams.parse(urlParams),
@@ -239,7 +244,8 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
allDocs: function(databaseName, options) {
var params = this.createParams(options),
urlParams = params.urlParams,
- docParams = params.docParams;
+ docParams = params.docParams,
+ collection;
if (this.eventAllDocs) {
this.eventAllDocs = false;
@@ -249,6 +255,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
this.leftheader.updateCrumbs(crumbs.allDocs(this.database));
this.database.buildAllDocs(docParams);
+ collection = this.database.allDocs;
if (docParams.startkey && docParams.startkey.indexOf("_design") > -1) {
this.sidebar.setSelectedTab("design-docs");
@@ -259,11 +266,35 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
this.viewEditor && this.viewEditor.remove();
this.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10));
+ if (!docParams) {
+ docParams = {};
+ }
+ this.perPageDefault = docParams.limit || FauxtonAPI.constants.MISC.DEFAULT_PAGE_SIZE;
+
+ this.pagination = new Components.IndexPagination({
+ collection: collection,
+ scrollToSelector: '.scrollable',
+ docLimit: urlParams.limit,
+ perPage: this.perPageDefault
+ });
+ this.setView('#documents-pagination', this.pagination);
+
+ this.allDocsNumber = new Documents.Views.AllDocsNumber({
+ collection: collection,
+ pagination: this.pagination,
+ perPageDefault: this.perPageDefault
+ });
+
+ this.setView('#item-numbers', this.allDocsNumber);
+
+ // documentsView will populate the collection
this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
+ pagination: this.pagination,
+ allDocsNumber: this.allDocsNumber,
database: this.database,
- collection: this.database.allDocs,
+ collection: collection,
docParams: docParams,
- params: urlParams,
+ perPageDefault: this.perPageDefault,
bulkDeleteDocsCollection: new Documents.BulkDeleteDocCollection([], {databaseId: this.database.get('id')})
}));
@@ -341,13 +372,37 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
},
createViewDocumentsView: function (options) {
+ if (!options.docParams) {
+ options.docParams = {};
+ }
+
+ this.perPageDefault = options.docParams.limit || FauxtonAPI.constants.MISC.DEFAULT_PAGE_SIZE;
+
+ this.pagination = new Components.IndexPagination({
+ collection: options.indexedDocs,
+ scrollToSelector: '.scrollable',
+ docLimit: options.urlParams.limit,
+ perPage: this.perPageDefault
+ });
+ this.setView('#documents-pagination', this.pagination);
+
+ this.allDocsNumber = new Documents.Views.AllDocsNumber({
+ collection: options.indexedDocs,
+ pagination: this.pagination,
+ perPageDefault: this.perPageDefault
+ });
+
+ this.setView('#item-numbers', this.allDocsNumber);
+
return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
+ pagination: this.pagination,
+ allDocsNumber: this.allDocsNumber,
database: options.database,
collection: options.indexedDocs,
viewList: true,
ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view),
docParams: options.docParams,
- params: options.urlParams
+ perPageDefault: this.perPageDefault,
}));
},
@@ -534,6 +589,9 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
if (this.sidebar) {
this.removeView('#sidebar');
}
+ if (this.footer) {
+ this.removeView('#footer');
+ }
}
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/templates/all_docs_footer.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_footer.html b/app/addons/documents/templates/all_docs_footer.html
new file mode 100644
index 0000000..752cd78
--- /dev/null
+++ b/app/addons/documents/templates/all_docs_footer.html
@@ -0,0 +1,20 @@
+<%
+/*
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+%>
+
+<footer class="index-pagination pagination-footer window-resizeable">
+ <div id="item-numbers"></div>
+ <div id="documents-pagination"></div>
+</footer>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/templates/all_docs_header.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_header.html b/app/addons/documents/templates/all_docs_header.html
new file mode 100644
index 0000000..f20dd69
--- /dev/null
+++ b/app/addons/documents/templates/all_docs_header.html
@@ -0,0 +1,32 @@
+<%
+/*
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+%>
+
+ <!-- floats right -->
+ <div id="header-api-bar" class="button"></div>
+
+ <!-- Query Options-->
+ <div id="header-query-options" class="button">
+ <div id="query-options"></div>
+ </div>
+
+ <!-- search (jump to doc)-->
+ <div id="header-search" class="js-search searchbox-container"></div>
+
+ <!-- Select toggle -->
+ <!--<div id="header-select-all" class="button">
+ <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
+ </div>-->
+
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/templates/all_docs_list.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_list.html b/app/addons/documents/templates/all_docs_list.html
index c41ff20..7f7a2ca 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -36,9 +36,4 @@
</p>
</div>
<% } %>
-
- <footer class="index-pagination pagination-footer window-resizeable<%=resizeLayout%>">
- <div id="item-numbers"> </div>
- <div id="documents-pagination"></div>
- </footer>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/templates/header_alldocs.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html
deleted file mode 100644
index a4da0fb..0000000
--- a/app/addons/documents/templates/header_alldocs.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
--->
-
- <!-- floats right -->
- <div id="header-api-bar" class="button"></div>
-
- <!-- Query Options-->
- <div id="header-query-options" class="button">
- <div id="query-options"></div>
- </div>
-
- <!-- search (jump to doc)-->
- <div id="header-search" class="js-search searchbox-container"></div>
-
- <!-- Select toggle -->
- <!--<div id="header-select-all" class="button">
- <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
- </div>-->
-
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/tests/viewsSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/viewsSpec.js b/app/addons/documents/tests/viewsSpec.js
index 06b782a..3d0a008 100644
--- a/app/addons/documents/tests/viewsSpec.js
+++ b/app/addons/documents/tests/viewsSpec.js
@@ -13,8 +13,9 @@ define([
'addons/documents/views',
'addons/documents/resources',
'addons/databases/base',
+ 'addons/fauxton/components',
'testUtils'
-], function (Views, Resources, Databases, testUtils) {
+], function (Documents, Resources, Databases, Components, testUtils) {
var assert = testUtils.assert,
ViewSandbox = testUtils.ViewSandbox,
viewSandbox;
@@ -29,10 +30,25 @@ define([
params: {}
});
- var view = new Views.Views.AllDocsList({
+ var pagination = new Components.IndexPagination({
+ collection: database.allDocs,
+ scrollToSelector: '#dashboard-content',
+ docLimit: 20,
+ perPage: 20
+ });
+
+ var allDocsNumber = new Documents.Views.AllDocsNumber({
+ collection: database.allDocs,
+ pagination: pagination,
+ perPageDefault: 20
+ });
+
+ var view = new Documents.Views.AllDocsList({
viewList: false,
bulkDeleteDocsCollection: bulkDeleteDocCollection,
- collection: database.allDocs
+ collection: database.allDocs,
+ pagination: pagination,
+ allDocsNumber: allDocsNumber
});
beforeEach(function (done) {
@@ -45,7 +61,7 @@ define([
});
it('should load', function () {
- assert.equal(typeof Views.Views.AllDocsList, 'function');
+ assert.equal(typeof Documents.Views.AllDocsList, 'function');
});
it('pressing SelectAll should fill the delete-bulk-docs-collection', function () {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 66b5c35..7de7030 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -38,9 +38,13 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
});
}
+ Views.Footer = FauxtonAPI.View.extend({
+ template: "addons/documents/templates/all_docs_footer",
+ });
+
Views.RightAllDocsHeader = FauxtonAPI.View.extend({
className: "header-right",
- template: "addons/documents/templates/header_alldocs",
+ template: "addons/documents/templates/all_docs_header",
events: {
'click .toggle-select-menu': 'selectAllMenu'
},
@@ -235,6 +239,12 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
'change #select-per-page': 'updatePerPage'
},
+ establish: function () {
+ return this.collection.fetch({
+ reset: true
+ });
+ },
+
updatePerPage: function (event) {
this._perPage = parseInt(this.$('#select-per-page :selected').val(), 10);
this.pagination.updatePerPage(this.perPage());
@@ -279,8 +289,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
}
});
-
- // TODO: Rename to reflect that this is a list of rows or documents
Views.AllDocsList = FauxtonAPI.View.extend({
template: "addons/documents/templates/all_docs_list",
@@ -307,11 +315,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
this.designDocs = options.ddocInfo.designDocs;
this.ddocID = options.ddocInfo.id;
}
- this.newView = options.newView || false;
this.docParams = options.docParams || {};
- this.params = options.params || {};
this.expandDocs = true;
- this.perPageDefault = this.docParams.limit || 20;
+ this.perPageDefault = options.perPageDefault;
// some doclists don't have an option to delete
if (!this.viewList) {
@@ -323,7 +329,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
FauxtonAPI.when(ids.map(function (id) {
return this.removeDocument(id);
}.bind(this))).done(function () {
- this.pagination.updatePerPage(parseInt(this.$('#select-per-page :selected').val(), 10));
+ var perPage = this.pagination.getPerPage();
+ this.pagination.updatePerPage(perPage);
FauxtonAPI.triggerRouteEvent('perPageChange', this.pagination.documentsLeftToFetch());
FauxtonAPI.addNotification({
msg: 'Successfully deleted your docs',
@@ -448,7 +455,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
serialize: function() {
return {
viewList: this.viewList,
- resizeLayout: "", //this.viewList ? "-half":"",
expandDocs: this.expandDocs,
endOfResults: !this.pagination.canShowNextfn()
};
@@ -479,17 +485,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
this.bulkDeleteDocsCollection.bulkDelete();
},
- addPagination: function () {
- this.pagination = new Components.IndexPagination({
- collection: this.collection,
- scrollToSelector: '#dashboard-content',
- docLimit: this.params.limit,
- perPage: this.perPageDefault
- });
- },
-
cleanup: function () {
- this.pagination && this.pagination.remove();
this.allDocsNumber && this.allDocsNumber.remove();
_.each(this.rows, function (row) {row.remove();});
},
@@ -504,24 +500,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
beforeRender: function() {
var docs;
- if (!this.pagination) {
- this.addPagination();
- }
-
- this.insertView('#documents-pagination', this.pagination);
-
- if (!this.allDocsNumber) {
- this.allDocsNumber = new Views.AllDocsNumber({
- collection: this.collection,
- newView: this.newView,
- pagination: this.pagination,
- perPageDefault: this.perPageDefault
- });
- }
-
- this.setView('#item-numbers', this.allDocsNumber);
this.removeNestedViews();
+ this.pagination.setCollection(this.collection);
+ this.allDocsNumber.setCollection(this.collection);
+
docs = this.expandDocs ? this.collection : this.collection.simple();
docs.each(function(doc) {
@@ -546,9 +529,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions)
setCollection: function (collection) {
this.collection = collection;
- if (!this.pagination) {
- this.addPagination();
- }
this.pagination.setCollection(collection);
this.allDocsNumber.setCollection(collection);
},
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index bb8260c..312f19b 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -496,8 +496,13 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
setCollection: function (collection) {
this.collection = collection;
this.setDefaults();
+ this.render();
},
+ getPerPage: function () {
+ return this.perPage;
+ }
+
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/app/templates/layouts/with_tabs_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html
index 2c6c95b..af0198d 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -24,15 +24,19 @@ the License.
<aside id="sidebar-content" class="sidebar"></aside>
<section id="dashboard-content" class="list pull-right window-resizeable">
- <div class="inner">
- <div id="dashboard-upper-content">
+ <div class="scrollable">
+ <div class="inner">
+ <div id="dashboard-upper-content">
+ </div>
+
+ <div id="dashboard-lower-content"></div>
</div>
+ </div>
+ <div id="footer">
- <div id="dashboard-lower-content"></div>
</div>
</section>
-
</div>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 6ae2164..68d0137 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -249,6 +249,19 @@ table.databases {
}
}
+.scrollable {
+ height: auto;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ width: 100%;
+ position: absolute;
+ padding: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ top: 60px;
+}
/*ONE PANEL TEMPLATE ONLY STYLES AKA _all_dbs */
@@ -733,7 +746,6 @@ REUSEABLE SHADOW BORDER
//----footer--///
footer.pagination-footer {
z-index: 1;
- min-width: 600px;
position:fixed;
background-color:#fff;
bottom:0;
@@ -758,10 +770,6 @@ footer.pagination-footer {
}
}
-footer.index-pagination {
- margin-left: -20px;
-}
-
#item-numbers{
p {
margin: 20px;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/dca437a5/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index 7ba4288..482440b 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -330,6 +330,7 @@ with_tabs_sidebar.html
#dashboard-content {
padding-left: 15px;
+ padding-right: 15px;
padding-top: 20px;
&.row-fluid,
@@ -345,9 +346,9 @@ with_tabs_sidebar.html
.left-shadow-border;
border-right: 1px solid #999;
width: auto;
- padding: 0px;
+ padding: 15px;
bottom: 0px;
- top: 60px;
+ top: 0px;
position: fixed;
overflow-x: hidden;
overflow-y: auto;