update: add style for admin/Answers and Timeline pages

apache · May 6, 2024 · ae3b43c · ae3b43c
1 parent 2373155
commit ae3b43c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/Timeline/index.scss b/ui/src/pages/Timeline/index.scss
@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.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/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>