You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2017/10/19 11:12:20 UTC
[myfaces-tobago] branch master updated: Fix margin for fixed
tc:footer + margins set after resize * fixes a bug where 'margin-bottom'
not correctly set on if a fixed tc:footer is set. * margins for
fixed tc:header and tc:footer now set after resize * demo: tc:header /
tc:footer example improved
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 664e608 Fix margin for fixed tc:footer + margins set after resize * fixes a bug where 'margin-bottom' not correctly set on <body> if a fixed tc:footer is set. * margins for fixed tc:header and tc:footer now set after resize * demo: tc:header / tc:footer example improved
664e608 is described below
commit 664e6086e03435b5862231aaee381d33a6db4ec4
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 19 13:12:12 2017 +0200
Fix margin for fixed tc:footer + margins set after resize
* fixes a bug where 'margin-bottom' not correctly set on <body> if a fixed tc:footer is set.
* margins for fixed tc:header and tc:footer now set after resize
* demo: tc:header / tc:footer example improved
---
.../50-header+footer/header+footer.xhtml | 17 ++++---
.../50-header+footer/x-header-footer-example.xhtml | 25 +++++-----
.../tobago-bootstrap/_version/js/tobago-layout.js | 55 ++++++++++++++++------
3 files changed, 62 insertions(+), 35 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/header+footer.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/header+footer.xhtml
index 539945e..122b78d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/header+footer.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/header+footer.xhtml
@@ -31,19 +31,18 @@
<tc:link label="new tab" link="x-header-footer-example.xhtml" target="_blank"/>.</p>
<pre><code class="language-markup"><tc:header fixed="true">
- <tc:style customClass="bg-inverse"/>
- <p>This is the header.</p>
- </tc:header>
+ <tc:style customClass="bg-warning"/>
+ <p>This is the header.</p>
+</tc:header>
+<tc:box label="Content Box">
<p>Content between header and footer.</p>
...
- <tc:footer fixed="true">
- <p>This is the footer.</p>
+</tc:box>
+<tc:footer fixed="true">
+ <tc:style customClass="bg-info"/>
+ <p>This is the footer.</p>
</tc:footer></code></pre>
- <!-- FIXME -->
- <span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Warning!</span>
- The object example is currently broken!
- <!-- FIXME -->
<tc:object src="x-header-footer-example.xhtml">
<tc:style height="300px" width="100%"/>
</tc:object>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/x-header-footer-example.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/x-header-footer-example.xhtml
index fe94886..2b21176 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/x-header-footer-example.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/50-header+footer/x-header-footer-example.xhtml
@@ -22,20 +22,23 @@
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
<tc:header fixed="true">
- <tc:style customClass="bg-inverse"/>
+ <tc:style customClass="bg-warning"/>
<p>This is the header.</p>
</tc:header>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
- <p>Content between header and footer.</p>
+ <tc:box label="Content Box">
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ <p>Content between header and footer.</p>
+ </tc:box>
<tc:footer fixed="true">
+ <tc:style customClass="bg-info"/>
<p>This is the footer.</p>
</tc:footer>
</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-layout.js b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-layout.js
index b918697..7f00253 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-layout.js
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-layout.js
@@ -20,25 +20,50 @@ Tobago.Layout = {};
Tobago.Layout.init = function (elements) {
// fixing fixed header/footer: content should not scroll behind the footer
- // XXX Is there a CSS solution?
- // TODO: this might be reevaluated after a "resize"
-
- var header = Tobago.Utils.selectWithJQuery(elements, ".fixed-top");
- header.each(function () {
- var content = header.next();
- content.css({
- marginTop: (parseInt(content.css("margin-top").replace("px", "")) + header.outerHeight(true)) + "px"
- });
+
+ var body = Tobago.Utils.selectWithJQuery(elements, "body");
+ var headers = Tobago.Utils.selectWithJQuery(elements, ".fixed-top");
+ var footers = Tobago.Utils.selectWithJQuery(elements, ".fixed-bottom");
+
+ setMargins(body, headers, footers);
+
+ jQuery(window).resize(function () {
+ setMargins(body, headers, footers);
});
+};
+
+var setMargins = function (body, headers, footers) {
+ var maxHeaderHeight = getMaxHeaderHeight(headers);
+ var maxFooterHeight = getMaxFooterHeight(footers);
- var footer = Tobago.Utils.selectWithJQuery(elements, ".fixed-bottom");
- footer.each(function () {
- var content = footer.prev();
- content.css({
- marginBottom: (parseInt(content.css("margin-bottom").replace("px", "")) + footer.outerHeight(true)) + "px"
- });
+ if (maxHeaderHeight > 0) {
+ body.css("margin-top", maxHeaderHeight + "px");
+ }
+ if (maxFooterHeight > 0) {
+ body.css("margin-bottom", maxFooterHeight + "px");
+ }
+};
+
+var getMaxHeaderHeight = function (headers) {
+ var maxHeaderHeight = 0;
+ headers.each(function () {
+ var height = jQuery(this).outerHeight(true);
+ if (height > maxHeaderHeight) {
+ maxHeaderHeight = height;
+ }
});
+ return maxHeaderHeight;
+};
+var getMaxFooterHeight = function (footers) {
+ var maxFooterHeight = 0;
+ footers.each(function () {
+ var height = jQuery(this).outerHeight(true);
+ if (height > maxFooterHeight) {
+ maxFooterHeight = height;
+ }
+ });
+ return maxFooterHeight;
};
Tobago.registerListener(Tobago.Layout.init, Tobago.Phase.DOCUMENT_READY);
--
To stop receiving notification emails like this one, please contact
['"commits@myfaces.apache.org" <co...@myfaces.apache.org>'].