678 - make footer visible

Build/Sources/components/ReactFlow/ReactFlowComponent.jsx

@@ -121,7 +121,7 @@ export const ReactFlowComponent = (props) => {
     );
 
     return (
-        <div style={{ width: '100%', height: '93vh' }} className="dndflow">
+        <div style={{ width: '100%', height: 'calc(100vh - 45px - 54px)' }} className="dndflow">
             <ReactFlowProvider>
                 <div className="reactflow-wrapper" ref={reactFlowWrapper}>
                     <ReactFlow

Resources/Private/Language/locallang.xlf

@@ -549,16 +549,16 @@ This page is intended to give you some overview about the workflow we suggest.
 				<source>Do you really want to clear the current working board and load the selected pipe? Unsaved changes will get lost!</source>
 			</trans-unit>
 			<trans-unit id="helpSlack" resname="helpSlack">
-				<source>Get help on Slack (#extension-builder)</source>
+				<source>Slack (#extension-builder)</source>
 			</trans-unit>
 			<trans-unit id="becomeSponsor" resname="becomeSponsor">
-				<source>Become a sponsor</source>
+				<source>Sponsoring</source>
 			</trans-unit>
 			<trans-unit id="reportBug" resname="reportBug">
 				<source>Report a bug</source>
 			</trans-unit>
 			<trans-unit id="showDocumentation" resname="showDocumentation">
-				<source>Show Documentation</source>
+				<source>Documentation</source>
 			</trans-unit>
 		</body>
 	</file>

Resources/Private/Templates/BuilderModule/Domainmodelling.html

@@ -6,7 +6,7 @@
 <f:section name="Content">
 	<div id="domainModelEditor">
 		<div id="root"></div>
-		<div class="footer">
+		<div class="footer d-flex justify-content-center position-fixed bottom-0 z-3 py-3 w-100">
 			<f:render partial="Moduler/Footer" arguments="{_all}" />
 		</div>
 	</div>

Resources/Public/Css/extensionbuilder.css

@@ -1,20 +1,26 @@
-footer {
-    padding-bottom: 10px;
-    padding-top: 10px;
+#domainModelEditor {
+    height: calc(100vh - 45px - 54px); /* 45px = top header, 54px = doc header */
+    overflow-y: scroll;
 }
 
-footer ul {
+.footer {
+    box-shadow: 0px -5px 11px 0px rgba(204,204,204,0.7);
+    border-top: 1px solid #ccc;
+    height: 30px;
+}
+
+.footer ul {
     margin-bottom: 0;
 }
 
-footer ul li {
+.footer ul li {
     margin-right: 20px;
     list-style-type: none;
     display: flex;
     align-items: center;
 }
 
-footer ul li:last-child {
+.footer ul li:last-child {
     margin-right: 0;
 }
 
@@ -34,3 +40,7 @@ footer ul li:last-child {
     list-style: none;
     margin-right: 10px;
 }
+
+.footer ul {
+    margin: 0;
+}