ui: style fixes for mobile devices

SCOAP3 · Dec 14, 2023 · c4f2276 · c4f2276
1 parent 2ce98c4
commit c4f2276
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 47 deletions.
diff --git a/ui/src/components/search/SearchPagination.tsx b/ui/src/components/search/SearchPagination.tsx
@@ -26,6 +26,7 @@ const SearchPagination: React.FC<SearchPagination> = ({ count, params }) => {
       showSizeChanger={false}
       current={Number(params?.page) || 1}
       hideOnSinglePage
+      className="md:mb-0 mb-3"
     />
   );
 };

diff --git a/ui/src/components/search/SearchResults.tsx b/ui/src/components/search/SearchResults.tsx
@@ -44,8 +44,8 @@ const SearchResults: React.FC<SearchResultsProps> = ({
 
   return (
     <div>
-      <div className="mt-4 mb-6 flex justify-between align-center">
-        <p className="flex items-center">Found {count} results.</p>
+      <div className="mt-4 mb-6 flex justify-center md:justify-between items-center flex-col md:flex-row">
+        <p className="flex items-center md:mb-0 mb-3">Found {count} results.</p>
         <SearchPagination count={count} params={params} />
         <div className="sort flex items-center">
           {count > 0 && (
@@ -72,7 +72,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
             <ResultItem key={article?.id} article={article} />
           ))}
       </ul>
-      <div className="flex justify-center">
+      <div className="flex justify-center mb-7">
         <SearchPagination count={count} params={params} />
       </div>
     </div>

diff --git a/ui/src/components/shared/Header.tsx b/ui/src/components/shared/Header.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import React, { useState } from "react";
+import React, { MouseEventHandler, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Button } from "antd";
@@ -10,6 +10,7 @@ import { BASE_URL } from "@/utils/utils";
 
 interface MenuProps {
   items: MenuItem[];
+  onClick?: MouseEventHandler<HTMLLIElement>;
   mobile?: boolean;
   collapsed?: boolean;
 }
@@ -48,6 +49,7 @@ const labels = [
 
 const Menu: React.FC<MenuProps> = ({
   items,
+  onClick = () => {},
   mobile = false,
   collapsed = true,
 }) => (
@@ -57,7 +59,7 @@ const Menu: React.FC<MenuProps> = ({
     }`}
   >
     {items.map((item: MenuItem) => (
-      <li className="ant-menu-item" key={item.key}>
+      <li className="ant-menu-item" key={item.key} onClick={onClick}>
         {item.label}
       </li>
     ))}
@@ -90,7 +92,12 @@ const Header: React.FC = () => {
         <Menu items={headerItems} />
         <Button onClick={toggleCollapsed}>{<MenuOutlined />}</Button>
       </div>
-      <Menu mobile items={headerItems} collapsed={collapsed} />
+      <Menu
+        mobile
+        items={headerItems}
+        collapsed={collapsed}
+        onClick={toggleCollapsed}
+      />
     </div>
   );
 };

diff --git a/ui/src/components/shared/JsonPreview.tsx b/ui/src/components/shared/JsonPreview.tsx
@@ -10,6 +10,7 @@ interface JsonPreviewProps {
 export const JsonPreview = ({ article }: JsonPreviewProps) => {
   return (
     <Collapse
+      className="mt-5"
       items={[
         {
           key: "1",

diff --git a/ui/src/pages/records/[recordId].tsx b/ui/src/pages/records/[recordId].tsx
@@ -15,9 +15,9 @@ interface RecordPageProps {
 
 const RecordPage: React.FC<RecordPageProps> = ({ article }) => {
   return (
-    <div className="container grid grid-cols-4 gap-8">
-      <div id="abstract_and_preview" className="col-span-3">
-        <div id="abstract">
+    <div className="container">
+      <div className="container-inner">
+        <div className="flex flex-col md:flex-row">
           <div className="detail-page-main">
             <h2 className="font-normal mb-3">
               <MathJax inline>{ReactHtmlParser(article?.title)}</MathJax>
@@ -31,14 +31,12 @@ const RecordPage: React.FC<RecordPageProps> = ({ article }) => {
             <p className="text-justify leading-relaxed">
               <MathJax inline>{ReactHtmlParser(article?.abstract)}</MathJax>
             </p>
+            <JsonPreview article={article} />
+          </div>
+          <div className="detail-page-right">
+            <DetailPageInfo article={article} />
           </div>
         </div>
-        <div id="preview">
-          <JsonPreview article={article} />
-        </div>
-      </div>
-      <div id="abstract_and_preview" className="col-span-1 detail-page-right">
-        <DetailPageInfo article={article} />
       </div>
     </div>
   );

diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
@@ -125,7 +125,7 @@ a {
     align-items: flex-start;
     margin: 10px 0;
     border-top: 1px solid #7a5380;
-    height: 280px;
+    height: 300px;
   }
 
   .header .ant-btn {
@@ -297,11 +297,6 @@ a {
   padding: 15px 0;
 }
 
-.search-facets {
-  width: 25%;
-  padding: 0 15px;
-}
-
 .search-results {
   width: 75%;
   padding: 0 15px;
@@ -364,7 +359,25 @@ a {
   font-size: 85%;
 }
 
+@media (max-width: 1024px) {
+  .search {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-results {
+    order: 1;
+    width: 100%;
+  }
+}
+
 /* Facets */
+.search-facets {
+  width: 25%;
+  padding: 0 15px;
+}
+
 .badge.dark {
   font-weight: bold;
   color: #fff;
@@ -446,10 +459,23 @@ a {
   left: 80% !important;
 }
 
+@media (max-width: 1024px) {
+  .search-facets {
+    order: 2;
+    width: 100%;
+  }
+}
+
 /* DETAIL */
 
 .detail-page-main {
   padding: 0 15px;
+  width: 75%;
+}
+
+.detail-page-right {
+  width: 20%;
+  padding-left: 15px;
 }
 
 .detail-page-right dt {
@@ -498,7 +524,12 @@ a {
   display: block;
 }
 
-@media (max-width: 1024px) {
+.json-preview-content {
+  background: rgba(0, 0, 0, 0.02);
+  line-break: anywhere;
+}
+
+@media (max-width: 767px) {
   .detail-page-main {
     width: 100%;
     padding: 0;
@@ -528,31 +559,6 @@ a {
   font-size: 1.2rem;
 }
 
-.json-preview-content {
-  background: rgba(0, 0, 0, 0.02);
-}
-
-#json-preview-card .ant-card-body {
-  padding: 0;
-}
-
- /* ERROR PAGES */
-
-.error-page {
-  color: #777;
-  margin: 15% auto;
-  text-align: center;
-}
-
-.error-page .anticon {
-  font-size: 5rem;
-  margin-bottom: 1rem;
-}
-
-.error-page p {
-  font-size: 1.2rem;
-}
-
 /* PARTNERS */
 
 .partners {