fix: footer layout adjustment

Author: shuashuai

ui/src/common/sideNavLayout.scss

@@ -16,13 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-.answer-container {
+.main-mx-with {
   width: 100%;
-  min-height: calc(100vh - 95px - 62px);
   max-width: 1072px;
 }
 
+.answer-container {
+  min-height: calc(100vh - 53px - 62px);
+}
+
 .page-right-side {
   flex: none;
   width: 300px;
@@ -31,7 +33,7 @@
 
 // lg
 @media screen and (max-width: 1199.9px) {
-  .answer-container {
+  .main-mx-with {
     padding-left: 12px;
     padding-right: 12px;
   }

ui/src/pages/Admin/index.tsx

@@ -54,7 +54,7 @@ const Index: FC = () => {
       </div>
       <div className="flex-fill w-100">
         <div className="d-flex justify-content-center px-0 px-md-4">
-          <div className="answer-container">
+          <div className="answer-container main-mx-with">
             <Row className="py-4">
               <Col className="page-main flex-auto">
                 <Outlet />
@@ -65,7 +65,11 @@ const Index: FC = () => {
             </Row>
           </div>
         </div>
-        <Footer />
+        <div className="d-flex justify-content-center px-0 px-md-4">
+          <div className="main-mx-with">
+            <Footer />
+          </div>
+        </div>
       </div>
     </div>
   );

ui/src/pages/SideNavLayout/index.tsx

@@ -34,9 +34,12 @@ const Index: FC = () => {
       </div>
       <div className="flex-fill w-100 overflow-x-hidden">
         <div className="d-flex justify-content-center px-0 px-md-4">
-          <div className="answer-container">
+          <div className="answer-container main-mx-with">
             <Outlet />
-
+          </div>
+        </div>
+        <div className="d-flex justify-content-center">
+          <div className="main-mx-with">
             <Footer />
           </div>
         </div>

ui/template/footer.html

@@ -19,21 +19,25 @@
 
 -->
 {{define "footer"}}
-        <footer class="py-3 bg-light w-100">
-          <p class="text-center mb-0 small">
-            <a class="me-3" href="{{$.baseURL}}/tos" data-discover="true">
-              {{translator $.language "ui.admin.legal.terms_of_service.label"}}
-            </a>
-            <a href="{{$.baseURL}}/privacy" data-discover="true">
-              {{translator $.language "ui.admin.legal.privacy_policy.label"}}
-            </a>
-          </p>
-          <p class="text-center mb-0 small text-secondary">
-            {{$cc := (join " " .siteinfo.Year .siteinfo.General.Name) -}}
-            {{- $ft := translator $.language "ui.footer.build_on" "cc" $cc -}}
-            {{templateHTML (replaceHTMLTag $ft "<a href=\"https://answer.apache.org/\" target=\"_blank\"> Answer </a>")}}
-          </p>
-        </footer>
+        <div class="main-mx-with">
+          <div class="row">
+            <footer class="py-3 d-flex flex-wrap align-items-center justify-content-between text-secondary small">
+              <div class="d-flex align-items-center">
+                {{$cc := (join " " .siteinfo.General.Name .siteinfo.Year)}}
+                <div className="me-3">{{- $ft := translator $.language "ui.footer.build_on" "cc" $cc -}}</div>
+                <a class="me-3" href="{{$.baseURL}}/tos" data-discover="true" class="link-secondary">
+                  {{translator $.language "ui.admin.legal.terms_of_service.label"}}
+                </a>
+                <a href="{{$.baseURL}}/privacy" data-discover="true" class="link-secondary">
+                  {{translator $.language "ui.admin.legal.privacy_policy.label"}}
+                </a>
+              </div>
+              <div class="text-center mb-0 small text-secondary link-secondary">
+                {{templateHTML (replaceHTMLTag $ft "<a href=\"https://answer.apache.org/\" target=\"_blank\"> Answer </a>")}}
+              </div>
+            </footer>
+          </div>
+        </div>
       </div>
     </div>
   </div>