diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/WEB-INF/jsp/documentation.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/WEB-INF/jsp/documentation.jsp index 256c385f99..3b7ae8825e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/WEB-INF/jsp/documentation.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/WEB-INF/jsp/documentation.jsp @@ -19,6 +19,7 @@ + NiFi Documentation @@ -29,104 +30,110 @@ -
-
NiFi Documentation
-
-
-
-
-
-
-
General
- + +
+
NiFi Documentation
+
+
-
-
Processors
- +
+
+
+
+
General
+ -
-
-
Controller Services
- +
+
+
Processors
+ +
+
+
Controller Services
+ +
+
+
Reporting Tasks
+ +
+
+
Developer
+ +
+
+
+
+ +
+
+ Displaying ${totalComponents} of ${totalComponents} +
-
-
Reporting Tasks
- -
-
-
Developer
- +
+
-
-
- -
-
- Displaying ${totalComponents} of ${totalComponents} -
-
-
- -
+ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/component-usage.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/component-usage.css index 19f6dffac0..83574a012b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/component-usage.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/component-usage.css @@ -23,7 +23,6 @@ html, html a { } body { - width: 62.5em; margin: 0 auto; display: block; font-family: "Open Sans","DejaVu Sans",sans-serif; @@ -114,7 +113,6 @@ table tr:last-child td:last-child { } td#allowable-values, td#default-value, td#name, td#value { - white-space:nowrap; } /* links */ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/main.css index 918eb7ad71..b67a6e7dd5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/main.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/css/main.css @@ -32,32 +32,26 @@ div.main-banner-header { display: none; - z-index: 100; font-weight: bold; font-size: 1em; text-align: center; line-height: 15px; color: #7e7e7e; margin: 0px auto; - width: 900px; - height: 17px; + width: 100%; + height: 1em; background-color: #fff; - z-index: 100; background-image: url(../images/bgHeader.png); + background-position: center; + background-repeat: no-repeat; } div.main-banner-footer { display: none; - position: absolute; - left: 0px; - right: 0px; - bottom: 0px; - height: 15px; color: #fff; text-align: center; font-weight: bold; font-size: 1em; - line-height: 15px; overflow: visible; background-color: #9eb9c7; background-image: url(../images/bgBannerFoot.png); @@ -68,52 +62,72 @@ div.main-banner-footer { /* documentation */ div.documentation-header { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 45px; border-bottom: 1px solid #d1dee5; color: #365c6a; font-size: 13px; + display: flex; +} + +#component-list-toggle-link { + padding: 4px; + font-size: 14px; + font-weight: bold; + color: #264c58; + cursor: pointer; + width: 12px; + text-align: center; + align-self: flex-end; +} + +#header-contents { + display: flex; + flex-wrap: wrap; } #nf-title { - float: left; - height: 50px; - padding: 5px; font-size: 20px; - margin-top: 10px; + margin: 5px 5px 0px 5px; } #nf-version { - float: left; font-size: 14px; - margin-left: 10px; - margin-top: 21px; font-style: italic; color: #aaa; + margin: 11px 5px 0px 5px; + flex-grow: 1; } #selected-component { - float: right; - height: 50px; - padding: 5px; - margin-top: 10px; font-size: 20px; + margin: 5px 5px 0px 5px; +} + +/* content flex-box containers */ + +#component-root-container { + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; +} + +#component-listing-container { + flex-grow: 1; + min-width: 312px; + padding: 0px 4px 0px 4px; +} + +#component-usage-container { + flex-grow: 4; + min-width: 300px; + padding: 0px 4px 0px 4px; } /* component listing */ div.component-listing { - width: 300px; - position: absolute; - top: 46px; - left: 0; - bottom: 40px; overflow: auto; font-size: 16px; - padding: 4px; } div.component-listing div.section { @@ -161,25 +175,17 @@ div.component-links span.no-components { /* component filter control */ #component-filter-controls { - width: 308px; - height: 40px; - position: absolute; - bottom: 0; - left: 0; } #component-filter-container { - height: 24px; margin-left: 2px; - margin-top: 1px; } #component-filter { - padding: 1px; font-size: 12px; height: 18px; line-height: 20px; - width: 299px; + width: 98%; float: left; } @@ -195,20 +201,13 @@ input.component-filter-list { clear: left; line-height: normal; margin-left: 7px; - margin-top: 2px; } /* component usage */ -#component-usage-container { - position: absolute; - top: 46px; - right: 0px; - bottom: 0px; - left: 312px; - overflow: hidden; -} - #component-usage { overflow: auto; + width: 100%; + height: 100%; + position: absolute; } \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/js/application.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/js/application.js index f22477fe71..d0e3c57cac 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/js/application.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-docs/src/main/webapp/js/application.js @@ -131,6 +131,8 @@ $(document).ready(function () { }; // get the banners if we're not in the shell + var bannerHeaderHeight = 0; + var bannerFooterHeight = 0; var banners = $.Deferred(function (deferred) { if (top === window) { $.ajax({ @@ -143,32 +145,13 @@ $(document).ready(function () { if (isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { // update the header text var bannerHeader = $('#banner-header').text(response.banners.headerText).show(); - - // show the banner - var updateTop = function (elementId) { - var element = $('#' + elementId); - element.css('top', (parseInt(bannerHeader.css('height')) + parseInt(element.css('top'))) + 'px'); - }; - - // update the position of elements affected by top banners - updateTop('documentation-header'); - updateTop('component-listing'); - updateTop('component-usage-container'); + bannerHeaderHeight = bannerHeader.height(); } if (isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { // update the footer text and show it var bannerFooter = $('#banner-footer').text(response.banners.footerText).show(); - - var updateBottom = function (elementId) { - var element = $('#' + elementId); - element.css('bottom', parseInt(bannerFooter.css('height')) + parseInt(element.css('bottom')) + 'px'); - }; - - // update the position of elements affected by bottom banners - updateBottom('component-filter-controls'); - updateBottom('component-listing'); - updateBottom('component-usage-container'); + bannerFooterHeight = bannerFooter.height(); } } @@ -208,25 +191,111 @@ $(document).ready(function () { } }).addClass('component-filter-list').val('Filter'); - // get the component usage container to install the window listener - var componentUsageContainer = $('#component-usage-container'); + // get the component containers to install the window listener + var documentationHeader = $('#documentation-header'); + var componentRootContainer = $('#component-root-container'); + var componentListingContainer = $('#component-listing-container', componentRootContainer); + var componentListing = $('#component-listing', componentListingContainer); + var componentFilterControls = $('#component-filter-controls', componentRootContainer); + var componentUsageContainer = $('#component-usage-container', componentUsageContainer); + var componentUsage = $('#component-usage', componentUsageContainer); - // size the iframe accordingly - var componentUsage = $('#component-usage').css({ - width: componentUsageContainer.width(), - height: componentUsageContainer.height() - }); + var componentListingContainerPaddingX = 0; + componentListingContainerPaddingX += parseInt(componentListingContainer.css("padding-right"), 10); + componentListingContainerPaddingX += parseInt(componentListingContainer.css("padding-left"), 10); + + var componentListingContainerPaddingY = 0; + componentListingContainerPaddingY += parseInt(componentListingContainer.css("padding-top"), 10); + componentListingContainerPaddingY += parseInt(componentListingContainer.css("padding-bottom"), 10); + + var componentUsageContainerPaddingX = 0; + componentUsageContainerPaddingX += parseInt(componentUsageContainer.css("padding-right"), 10); + componentUsageContainerPaddingX += parseInt(componentUsageContainer.css("padding-left"), 10); + + var componentUsageContainerPaddingY = 0; + componentUsageContainerPaddingY += parseInt(componentUsageContainer.css("padding-top"), 10); + componentUsageContainerPaddingY += parseInt(componentUsageContainer.css("padding-bottom"), 10); + + var componentListingContainerMinWidth = parseInt(componentListingContainer.css("min-width"), 10) + componentListingContainerPaddingX; + var componentUsageContainerMinWidth = parseInt(componentUsageContainer.css("min-width"), 10) + componentUsageContainerPaddingX; + var smallDisplayBoundary = componentListingContainerMinWidth + componentUsageContainerMinWidth; + + var cssComponentListingNormal = { backgroundColor: "#ffffff" }; + var cssComponentListingSmall = { backgroundColor: "#fbfbfb" }; // add a window resize listener $(window).resize(function () { - componentUsage.css({ - width: componentUsageContainer.width(), - height: componentUsageContainer.height() + // This -1 is the border-top of #component-usage-container + var baseHeight = window.innerHeight - 1; + baseHeight -= bannerHeaderHeight; + baseHeight -= bannerFooterHeight; + baseHeight -= documentationHeader.height(); + + // resize component list accordingly + if (smallDisplayBoundary > window.innerWidth) { + // screen is not wide enough to display content usage + // within the same row. + componentListingContainer.css(cssComponentListingSmall); + componentListingContainer.css({ + borderBottom: "1px solid #ddddd8" + }); + componentListing.css({ + height: "200px" + }); + // resize the iframe accordingly + var componentUsageHeight = baseHeight; + if (componentListingContainer.is(":visible")) { + componentUsageHeight -= componentListingContainer.height(); + componentUsageHeight -= 1; // border-bottom + } + componentUsageHeight -= componentListingContainerPaddingY; + componentUsageHeight -= componentUsageContainerPaddingY; + componentUsage.css({ + width: componentUsageContainer.width(), + height: componentUsageHeight + }); + componentUsageContainer.css({ + height: componentUsage.height() + }); + } else { + componentListingContainer.css(cssComponentListingNormal); + + var componentListingHeight = baseHeight; + componentListingHeight -= componentFilterControls.height(); + componentListingHeight -= componentListingContainerPaddingY; + componentListing.css({ + height: componentListingHeight + }); + + // resize the iframe accordingly + componentUsage.css({ + width: componentUsageContainer.width(), + height: baseHeight - componentUsageContainerPaddingY + }); + componentUsageContainer.css({ + height: componentUsage.height() + }); + componentListingContainer.css({ + borderBottom: "0px" + }); + } + }); + + + var toggleComponentListing = $('#component-list-toggle-link'); + toggleComponentListing.click(function(){ + componentListingContainer.toggle(0, function(){ + toggleComponentListing.text($(this).is(":visible") ? "-" : "+"); + $(window).resize(); }); }); // listen for loading of the iframe to update the title $('#component-usage').on('load', function () { + + // resize window accordingly. + $(window).resize(); + var componentName = ''; var href = $(this).contents().get(0).location.href;