From 930665dca738ed31e03663b3c7f7d46825cbb58f Mon Sep 17 00:00:00 2001
From: Ion Riciu <Ion.Riciu@endava.com>
Date: Fri, 16 Apr 2021 14:19:18 +0300
Subject: [PATCH] fix: manuscripts table displaying
---
.../component-frontpage/src/Frontpage.js | 2 ++
.../component-manuscripts/src/Manuscripts.jsx | 26 ++++++++++---------
.../component-manuscripts/src/style.js | 2 ++
.../src/UsersManager.jsx | 2 ++
app/components/shared/General.js | 7 +++++
app/components/shared/Pagination.jsx | 16 ++++++++++--
app/components/shared/Table.jsx | 6 +++++
7 files changed, 47 insertions(+), 14 deletions(-)
diff --git a/app/components/component-frontpage/src/Frontpage.js b/app/components/component-frontpage/src/Frontpage.js
index 5e74112374..c4ffb3af5f 100644
--- a/app/components/component-frontpage/src/Frontpage.js
+++ b/app/components/component-frontpage/src/Frontpage.js
@@ -17,6 +17,7 @@ import {
HeadingWithAction,
Pagination,
} from '../../shared'
+import { PaginationContainer } from '../../../components/shared/Pagination'
const Frontpage = ({ history, ...props }) => {
const [sortName] = useState('created')
@@ -66,6 +67,7 @@ const Frontpage = ({ history, ...props }) => {
page={page}
setPage={setPage}
totalCount={totalCount}
+ PaginationContainer={PaginationContainer}
/>
{frontpage.length > 0 ? (
diff --git a/app/components/component-manuscripts/src/Manuscripts.jsx b/app/components/component-manuscripts/src/Manuscripts.jsx
index 7b8acd709a..dd3b3632bb 100644
--- a/app/components/component-manuscripts/src/Manuscripts.jsx
+++ b/app/components/component-manuscripts/src/Manuscripts.jsx
@@ -6,9 +6,9 @@ import config from 'config'
import Manuscript from './Manuscript'
import {
Container,
- Table,
+ ManuscriptsTable,
Header,
- Content,
+ ScrollableContent,
Heading,
Carets,
CaretUp,
@@ -19,6 +19,7 @@ import {
import { HeadingWithAction } from '../../shared'
import { GET_MANUSCRIPTS } from '../../../queries'
import getQueryStringByName from '../../../shared/getQueryStringByName'
+import { PaginationContainerShadowed } from '../../../components/shared/Pagination'
const urlFrag = config.journal.metadata.toplevel_urlfragment
@@ -107,8 +108,8 @@ const Manuscripts = ({ history, ...props }) => {
<Heading>Manuscripts</Heading>
)}
- <Content>
- <Table>
+ <ScrollableContent>
+ <ManuscriptsTable>
<Header>
<tr>
{process.env.INSTANCE_NAME === 'aperture' && (
@@ -155,14 +156,15 @@ const Manuscripts = ({ history, ...props }) => {
)
})}
</tbody>
- </Table>
- <Pagination
- limit={limit}
- page={page}
- setPage={setPage}
- totalCount={totalCount}
- />
- </Content>
+ </ManuscriptsTable>
+ </ScrollableContent>
+ <Pagination
+ limit={limit}
+ page={page}
+ setPage={setPage}
+ totalCount={totalCount}
+ PaginationContainer={PaginationContainerShadowed}
+ />
</Container>
)
}
diff --git a/app/components/component-manuscripts/src/style.js b/app/components/component-manuscripts/src/style.js
index 51bc20d335..a3dd9320f7 100644
--- a/app/components/component-manuscripts/src/style.js
+++ b/app/components/component-manuscripts/src/style.js
@@ -23,6 +23,8 @@ export {
ErrorStatus,
NormalStatus,
StatusBadge,
+ ScrollableContent,
+ ManuscriptsTable,
} from '../../shared'
// TODO: Extract common above
diff --git a/app/components/component-users-manager/src/UsersManager.jsx b/app/components/component-users-manager/src/UsersManager.jsx
index 0e17345e2d..9df8af166f 100644
--- a/app/components/component-users-manager/src/UsersManager.jsx
+++ b/app/components/component-users-manager/src/UsersManager.jsx
@@ -16,6 +16,7 @@ import {
CaretDown,
Carets,
} from './style'
+import { PaginationContainer } from '../../../components/shared/Pagination'
const GET_USERS = gql`
query Users(
@@ -124,6 +125,7 @@ const UsersManager = () => {
page={page}
setPage={setPage}
totalCount={totalCount}
+ PaginationContainer={PaginationContainer}
/>
</Content>
</Container>
diff --git a/app/components/shared/General.js b/app/components/shared/General.js
index 737024c03d..bc2c6c2746 100644
--- a/app/components/shared/General.js
+++ b/app/components/shared/General.js
@@ -15,6 +15,13 @@ export const Content = styled.div`
border-radius: ${th('borderRadius')};
`
+export const ScrollableContent = styled(Content)`
+ @media (max-width: 1400px) {
+ margin-top: ${grid(2)};
+ overflow-x: scroll;
+ }
+`
+
export const SectionContent = styled(Section)`
padding: 0;
box-shadow: ${th('boxShadow')};
diff --git a/app/components/shared/Pagination.jsx b/app/components/shared/Pagination.jsx
index e5b5aa3b83..bc0bffcf6a 100644
--- a/app/components/shared/Pagination.jsx
+++ b/app/components/shared/Pagination.jsx
@@ -47,13 +47,19 @@ const Page = styled.div`
`}
`
-const PaginationContainer = styled.div`
+export const PaginationContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: ${grid(2)} ${grid(3)};
`
+export const PaginationContainerShadowed = styled(PaginationContainer)`
+ background-color: ${th('colorBackground')};
+ border-radius: ${th('borderRadius')};
+ box-shadow: ${th('boxShadow')};
+`
+
const PaginationInfo = styled.div`
strong {
font-weight: 500;
@@ -89,7 +95,13 @@ const NextButton = styled(PreviousButton)`
border-radius: 0 ${th('borderRadius')} ${th('borderRadius')} 0;
`
-export const Pagination = ({ setPage, limit, page, totalCount }) => {
+export const Pagination = ({
+ setPage,
+ limit,
+ page,
+ totalCount,
+ PaginationContainer,
+}) => {
const Previous = () => (
<PreviousButton>
<Action disabled={page <= 1} onClick={() => setPage(page - 1)}>
diff --git a/app/components/shared/Table.jsx b/app/components/shared/Table.jsx
index ef21808063..85a4bbb6c9 100644
--- a/app/components/shared/Table.jsx
+++ b/app/components/shared/Table.jsx
@@ -13,6 +13,12 @@ export const Table = styled.table`
}
`
+export const ManuscriptsTable = styled(Table)`
+ @media (max-width: 1400px) {
+ margin-top: 0;
+ }
+`
+
export const Header = styled.thead`
text-align: left;
font-variant: all-small-caps;
--
GitLab