You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@answer.apache.org by sh...@apache.org on 2024/04/28 06:25:24 UTC
(incubator-answer) 02/02: update: add style for admin/Answers and Timeline pages
This is an automated email from the ASF dual-hosted git repository.
shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 9792e1f6011a546d1896d6f7e34211fbf2375763
Author: hgaol <dh...@hotmail.com>
AuthorDate: Thu Apr 25 23:07:48 2024 +0800
update: add style for admin/Answers and Timeline pages
---
ui/src/pages/Admin/Answers/index.tsx | 6 ++----
ui/src/pages/Admin/Questions/index.tsx | 2 +-
ui/src/pages/Admin/index.scss | 18 +++++++++++++++---
ui/src/pages/Timeline/components/Item/index.tsx | 3 +--
ui/src/pages/{Admin => Timeline}/index.scss | 19 +++++++++++++------
ui/src/pages/Timeline/index.tsx | 6 ++++--
6 files changed, 36 insertions(+), 18 deletions(-)
diff --git a/ui/src/pages/Admin/Answers/index.tsx b/ui/src/pages/Admin/Answers/index.tsx
index 091fe2db..ad66e3d5 100644
--- a/ui/src/pages/Admin/Answers/index.tsx
+++ b/ui/src/pages/Admin/Answers/index.tsx
@@ -96,7 +96,7 @@ const Answers: FC = () => {
<Table responsive>
<thead>
<tr>
- <th>{t('post')}</th>
+ <th className="min-w-15">{t('post')}</th>
<th style={{ width: '11%' }}>{t('votes')}</th>
<th style={{ width: '14%' }}>{t('created')}</th>
<th style={{ width: '11%' }}>{t('status')}</th>
@@ -127,9 +127,7 @@ const Answers: FC = () => {
className="ms-2 text-success"
/>
)}
- <div
- className="text-truncate-2 small"
- style={{ maxWidth: '30rem' }}>
+ <div className="text-truncate-2 small max-w-30">
{escapeRemove(li.description)}
</div>
</td>
diff --git a/ui/src/pages/Admin/Questions/index.tsx b/ui/src/pages/Admin/Questions/index.tsx
index 906885b5..b2f4b38c 100644
--- a/ui/src/pages/Admin/Questions/index.tsx
+++ b/ui/src/pages/Admin/Questions/index.tsx
@@ -94,7 +94,7 @@ const Questions: FC = () => {
<Table responsive>
<thead>
<tr>
- <th className="post-column">{t('post')}</th>
+ <th className="min-w-15">{t('post')}</th>
<th style={{ width: '8%' }}>{t('votes')}</th>
<th style={{ width: '8%' }}>{t('answers')}</th>
<th style={{ width: '15%' }}>{t('created')}</th>
diff --git a/ui/src/pages/Admin/index.scss b/ui/src/pages/Admin/index.scss
index 5a78d5f3..27a9af01 100644
--- a/ui/src/pages/Admin/index.scss
+++ b/ui/src/pages/Admin/index.scss
@@ -22,8 +22,20 @@
padding-bottom: 1.5rem;
}
-.table {
- .post-column {
- min-width: 15rem;
+.min-w-15 {
+ min-width: 15rem;
+}
+
+.max-w-30 {
+ max-width: 30rem;
+}
+
+@media screen and (max-width: 768px) {
+ .max-w-30 {
+ max-width: 15rem;
}
}
+
+.table tr th {
+ white-space: nowrap;
+}
diff --git a/ui/src/pages/Timeline/components/Item/index.tsx b/ui/src/pages/Timeline/components/Item/index.tsx
index 5c26732a..e327ed32 100644
--- a/ui/src/pages/Timeline/components/Item/index.tsx
+++ b/ui/src/pages/Timeline/components/Item/index.tsx
@@ -70,7 +70,7 @@ const Index: FC<Props> = ({ data, isAdmin, objectInfo, revisionList }) => {
<br />
{data.cancelled_at > 0 && <FormatTime time={data.cancelled_at} />}
</td>
- <td>
+ <td className="text-nowrap">
{(data.activity_type === 'rollback' ||
data.activity_type === 'edited' ||
data.activity_type === 'asked' ||
@@ -139,7 +139,6 @@ const Index: FC<Props> = ({ data, isAdmin, objectInfo, revisionList }) => {
</td>
</tr>
<tr className={isOpen ? '' : 'd-none'}>
- {/* <td /> */}
<td colSpan={5} className="p-0 py-5">
<Row className="justify-content-center">
<Col xxl={8}>
diff --git a/ui/src/pages/Admin/index.scss b/ui/src/pages/Timeline/index.scss
similarity index 81%
copy from ui/src/pages/Admin/index.scss
copy to ui/src/pages/Timeline/index.scss
index 5a78d5f3..5748d053 100644
--- a/ui/src/pages/Admin/index.scss
+++ b/ui/src/pages/Timeline/index.scss
@@ -17,13 +17,20 @@
* under the License.
*/
-.admin-container {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
+.min-w-15 {
+ min-width: 15rem;
}
-.table {
- .post-column {
- min-width: 15rem;
+.max-w-30 {
+ max-width: 30rem;
+}
+
+@media screen and (max-width: 768px) {
+ .max-w-30 {
+ max-width: 15rem;
}
}
+
+.table tr th {
+ white-space: nowrap;
+}
diff --git a/ui/src/pages/Timeline/index.tsx b/ui/src/pages/Timeline/index.tsx
index 0a7816fa..66c7b03c 100644
--- a/ui/src/pages/Timeline/index.tsx
+++ b/ui/src/pages/Timeline/index.tsx
@@ -31,6 +31,8 @@ import * as Type from '@/common/interface';
import HistoryItem from './components/Item';
+import './index.scss';
+
const Index: FC = () => {
const { t } = useTranslation('translation', { keyPrefix: 'timeline' });
const { qid = '', aid = '', tid = '' } = useParams();
@@ -116,13 +118,13 @@ const Index: FC = () => {
onChange={(e) => handleSwitch(e.target.checked)}
/>
)}
- <Table hover>
+ <Table hover responsive>
<thead>
<tr>
<th style={{ width: '20%' }}>{t('datetime')}</th>
<th style={{ width: '15%' }}>{t('type')}</th>
<th style={{ width: '19%' }}>{t('by')}</th>
- <th>{t('comment')}</th>
+ <th className="min-w-15">{t('comment')}</th>
</tr>
</thead>
<tbody>