fix: footer layout adjustment

Author: shuashuai

i18n/en_US.yaml

@@ -1208,9 +1208,7 @@ ui:
  search:
  placeholder: Search
  footer:
- build_on: >-
- Powered by <1> Apache Answer </1>- the open-source software that powers Q&A
- communities.<br />Made with love © {{cc}}.
+ build_on: Powered by <1> Apache Answer </1>
  upload_img:
  name: Change
  loading: loading...
@@ -1807,6 +1805,7 @@ ui:
  branding: Branding
  legal: Legal
  write: Write
+ terms: Terms
  tos: Terms of Service
  privacy: Privacy
  seo: SEO

i18n/zh_CN.yaml

@@ -1190,8 +1190,7 @@ ui:
  search:
  placeholder: 搜索
  footer:
- build_on: >-
- 由 <1>Apache Answer</1> 提供动力 - 驱动问答社区的开源软件。<br />用爱制造 © {{cc}}.
+ build_on: 由 <1>Apache Answer</1> 提供动力
  upload_img:
  name: 更改
  loading: 加载中...
@@ -1768,6 +1767,7 @@ ui:
  branding: 品牌
  legal: 法律条款
  write: 撰写
+ terms: 服务条款
  tos: 服务条款
  privacy: 隐私政策
  seo: SEO

ui/src/components/Footer/index.tsx

@@ -21,6 +21,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
+import Row from 'react-bootstrap/Row';
 import dayjs from 'dayjs';
 
 import { siteInfoStore } from '@/stores';
@@ -29,34 +30,37 @@ const Index = () => {
  const { t } = useTranslation('translation', { keyPrefix: 'footer' }); // Scoped translations for footer
  const fullYear = dayjs().format('YYYY');
  const siteName = siteInfoStore((state) => state.siteInfo.name);
- const cc = `${fullYear} ${siteName}`;
+ const cc = `${siteName} © ${fullYear}`;
 
  return (
- <footer className="py-3 w-100">
- <p className="text-center mb-0 small">
- {/* Link to Terms of Service with right margin */}
- <Link to="/tos" className="me-3">
- {t('label', { keyPrefix: 'admin.legal.terms_of_service' })}
- </Link>
-
- {/* Link to Privacy Policy with right margin for spacing */}
- <Link to="/privacy">
- {t('label', { keyPrefix: 'admin.legal.privacy_policy' })}
- </Link>
- </p>
- <p className="text-center mb-0 small">
- <Trans i18nKey="footer.build_on" values={{ cc }}>
- Powered by
- {/* eslint-disable-next-line react/jsx-no-target-blank */}
- <a href="https://answer.apache.org" target="_blank">
- Apache Answer
- </a>
- - the open-source software that powers Q&A communities.
- <br />
- Made with love. © 2022 Answer.
- </Trans>
- </p>
- </footer>
+ <Row>
+ <footer className="py-3 d-flex flex-wrap align-items-center justify-content-between text-secondary small">
+ <div className="d-flex align-items-center">
+ <div className="me-3">{cc}</div>
+
+ <Link to="/tos" className="me-3 link-secondary">
+ {t('terms', { keyPrefix: 'nav_menus' })}
+ </Link>
+
+ {/* Link to Privacy Policy with right margin for spacing */}
+ <Link to="/privacy" className="link-secondary">
+ {t('privacy', { keyPrefix: 'nav_menus' })}
+ </Link>
+ </div>
+ <div>
+ <Trans i18nKey="footer.build_on" values={{ cc }}>
+ Powered by
+ <a
+ href="https://answer.apache.org"
+ target="_blank"
+ className="link-secondary"
+ rel="noreferrer">
+ Apache Answer
+ </a>
+ </Trans>
+ </div>
+ </footer>
+ </Row>
  );
 };
 

ui/src/index.scss

@@ -127,8 +127,6 @@ img[src=''] {
  margin-top: auto !important;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
- padding-left: 12px !important;
- padding-right: 12px !important;
 }
 
 .bg-f5 {

ui/src/pages/SideNavLayout/index.tsx

@@ -36,9 +36,10 @@ const Index: FC = () => {
  <div className="d-flex justify-content-center px-0 px-md-4">
  <div className="answer-container">
  <Outlet />
+
+ <Footer />
  </div>
  </div>
- <Footer />
  </div>
  </div>
  );