From acb2b2f85479b050d9be069d6dbd164eec8a8ed7 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 17:24:34 -0500 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=92=84=20ui=20feedback=20and=20refact?= =?UTF-8?q?or?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Footer.tsx | 5 ++- components/NavBar.tsx | 29 +++++++++++------ components/UserDropdown.tsx | 32 +++++++++---------- .../pages/{repository => explorer}/Facets.tsx | 0 .../{repository => explorer}/PageContent.tsx | 0 .../{repository => explorer}/QueryBar.tsx | 0 .../{repository => explorer}/RepoTable.tsx | 0 .../getConfigError.tsx | 4 +-- .../pages/{repository => explorer}/index.tsx | 0 .../{repository => explorer}/sqonTypes.ts | 0 components/pages/login/index.tsx | 1 + global/hooks/useAuthContext.tsx | 4 +-- global/utils/constants.ts | 4 +++ pages/_app.tsx | 4 +-- pages/{repository => explorer}/index.tsx | 8 ++--- pages/index.tsx | 4 +-- pages/logged-in.tsx | 6 ++-- 17 files changed, 60 insertions(+), 41 deletions(-) rename components/pages/{repository => explorer}/Facets.tsx (100%) rename components/pages/{repository => explorer}/PageContent.tsx (100%) rename components/pages/{repository => explorer}/QueryBar.tsx (100%) rename components/pages/{repository => explorer}/RepoTable.tsx (100%) rename components/pages/{repository => explorer}/getConfigError.tsx (98%) rename components/pages/{repository => explorer}/index.tsx (100%) rename components/pages/{repository => explorer}/sqonTypes.ts (100%) rename pages/{repository => explorer}/index.tsx (57%) diff --git a/components/Footer.tsx b/components/Footer.tsx index b5f626fc..619e6765 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -53,12 +53,15 @@ const Footer = () => { line-height: 24px; font-weight: normal; padding-right: 10px; + padding-left: 5px; ` } > powered by - + + + ); }; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 585e66f8..3515c61c 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -1,15 +1,25 @@ import React from 'react'; import { css } from '@emotion/core'; +import { useRouter } from 'next/router'; import UserDropdown from './UserDropdown'; import defaultTheme from './theme'; import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; -import getInternalLink from '../global/utils/getInternalLink'; +import { useTheme } from 'emotion-theming'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); + const router = useRouter(); + const theme: typeof defaultTheme = useTheme(); + + const activeLinkStyle = ` + background-color: ${theme.colors.grey_2}; + color: ${theme.colors.accent2_dark}; + `; + return (
css` @@ -33,7 +43,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', cursor: pointer; `} > - + css` display: flex; @@ -69,15 +79,15 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', align-items: center; justify-content: center; width: 144px; - background-color: ${theme.colors.grey_2}; + background-color: ${theme.colors.white}; height: 100%; &:hover { - background-color: ${theme.colors.grey_3}; + background-color: ${theme.colors.grey_2}; } border-right: 2px solid ${theme.colors.white}; `} > - + css` display: flex; @@ -86,8 +96,9 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', justify-content: center; align-items: center; text-decoration: none; - color: ${theme.colors.accent2_dark}; + color: ${theme.colors.accent_dark}; cursor: pointer; + ${router.pathname === EXPLORER_PATH ? activeLinkStyle : ''} `} > Data Explorer @@ -100,9 +111,9 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', width: 195px; height: 100%; display: flex; - background-color: ${theme.colors.grey_2}; + ${router.pathname === USER_PATH ? activeLinkStyle : ''} &:hover { - background-color: ${theme.colors.grey_3}; + background-color: ${theme.colors.grey_2}; } `} > @@ -117,7 +128,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', justify-content: center; `} > - + css` width: 70px; diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index 238bcca4..e2a71e01 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -7,8 +7,9 @@ import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { UserWithId } from '../global/types'; -import getInternalLink from '../global/utils/getInternalLink'; import { InternalLink as Link } from './Link'; +import { useRouter } from 'next/router'; +import { USER_PATH } from '../global/utils/constants'; const getDisplayName = (user?: UserWithId) => { const greeting = 'Hello'; @@ -28,14 +29,11 @@ const CurrentUser = () => { const { user } = useAuthContext(); return (
- css` - color: ${theme.colors.accent2_dark}; - display: flex; - align-items: center; - justify-content: center; - ` - } + css={css` + display: flex; + align-items: center; + justify-content: center; + `} > { }, [open]); const theme: typeof defaultTheme = useTheme(); const { logout } = useAuthContext(); + const router = useRouter(); + const fillColor = + router.pathname === USER_PATH ? theme.colors.accent2_dark : theme.colors.accent_dark; + return (
{ onClick={() => setOpen(!open)} > { {open ? ( { /> ) : ( { `} >
  • - - - Profile & Token - + + Profile & Token
  • diff --git a/components/pages/repository/Facets.tsx b/components/pages/explorer/Facets.tsx similarity index 100% rename from components/pages/repository/Facets.tsx rename to components/pages/explorer/Facets.tsx diff --git a/components/pages/repository/PageContent.tsx b/components/pages/explorer/PageContent.tsx similarity index 100% rename from components/pages/repository/PageContent.tsx rename to components/pages/explorer/PageContent.tsx diff --git a/components/pages/repository/QueryBar.tsx b/components/pages/explorer/QueryBar.tsx similarity index 100% rename from components/pages/repository/QueryBar.tsx rename to components/pages/explorer/QueryBar.tsx diff --git a/components/pages/repository/RepoTable.tsx b/components/pages/explorer/RepoTable.tsx similarity index 100% rename from components/pages/repository/RepoTable.tsx rename to components/pages/explorer/RepoTable.tsx diff --git a/components/pages/repository/getConfigError.tsx b/components/pages/explorer/getConfigError.tsx similarity index 98% rename from components/pages/repository/getConfigError.tsx rename to components/pages/explorer/getConfigError.tsx index 8ac2d03c..8c8a9a58 100644 --- a/components/pages/repository/getConfigError.tsx +++ b/components/pages/explorer/getConfigError.tsx @@ -2,11 +2,11 @@ import { ReactNode } from 'react'; import { css } from '@emotion/core'; import { Checkmark, Warning } from '../../theme/icons'; -import theme from '../../theme/'; +import theme from '../../theme'; import StyledLink from '../../Link'; import { getConfig } from '../../../global/config'; -import { Project } from './'; +import { Project } from '.'; const ArrangerAdminUILink = () => { const { NEXT_PUBLIC_ARRANGER_ADMIN_UI } = getConfig(); diff --git a/components/pages/repository/index.tsx b/components/pages/explorer/index.tsx similarity index 100% rename from components/pages/repository/index.tsx rename to components/pages/explorer/index.tsx diff --git a/components/pages/repository/sqonTypes.ts b/components/pages/explorer/sqonTypes.ts similarity index 100% rename from components/pages/repository/sqonTypes.ts rename to components/pages/explorer/sqonTypes.ts diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index 123a5179..fc7b8071 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -142,6 +142,7 @@ const LoginPage = () => { ${theme.typography.heading} color: ${theme.colors.accent_dark}; margin: 10px 0; + font-weight: normal; `} > Please choose one of the following log in methods to access your API token for data diff --git a/global/hooks/useAuthContext.tsx b/global/hooks/useAuthContext.tsx index a9b58130..9a163da2 100644 --- a/global/hooks/useAuthContext.tsx +++ b/global/hooks/useAuthContext.tsx @@ -1,7 +1,7 @@ import React, { createContext, useState } from 'react'; import { useRouter } from 'next/router'; -import { EGO_JWT_KEY } from '../utils/constants'; +import { EGO_JWT_KEY, EXPLORER_PATH } from '../utils/constants'; import { decodeToken, extractUser, isValidJwt } from '../utils/egoTokenUtils'; import { UserWithId } from '../../global/types'; import getInternalLink from '../utils/getInternalLink'; @@ -39,7 +39,7 @@ export const AuthProvider = ({ const logout = () => { removeToken(); - router.push(getInternalLink({ path: 'repository' })); + router.push(getInternalLink({ path: EXPLORER_PATH })); }; if (token !== egoJwt) { diff --git a/global/utils/constants.ts b/global/utils/constants.ts index d23f60b1..59a5add4 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -4,3 +4,7 @@ const { NEXT_PUBLIC_EGO_API_ROOT } = getConfig(); export const EGO_JWT_KEY = 'EGO_JWT'; export const EGO_API_KEY_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/api_key`; + +export const EXPLORER_PATH = '/explorer'; +export const USER_PATH = '/user'; +export const LOGIN_PATH = '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/login'; diff --git a/pages/_app.tsx b/pages/_app.tsx index 7f859933..ae0a70c8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import Root from '../components/Root'; import { AppContext } from 'next/app'; -import { EGO_JWT_KEY } from '../global/utils/constants'; +import { EGO_JWT_KEY, LOGIN_PATH } from '../global/utils/constants'; import { PageWithConfig } from '../global/utils/pages/types'; import { useEffect, useState } from 'react'; import Router from 'next/router'; @@ -19,7 +19,7 @@ const DMSApp = ({ const egoJwt = localStorage.getItem(EGO_JWT_KEY) || undefined; setInitialToken(egoJwt); if (!Component.isPublic && !egoJwt) { - Router.push(getInternalLink({ path: 'login' })); + Router.push(getInternalLink({ path: LOGIN_PATH })); } }); diff --git a/pages/repository/index.tsx b/pages/explorer/index.tsx similarity index 57% rename from pages/repository/index.tsx rename to pages/explorer/index.tsx index 972f861e..f54b4b8c 100644 --- a/pages/repository/index.tsx +++ b/pages/explorer/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import Repository from '../../components/pages/repository'; +import Explorer from '../../components/pages/explorer'; import { createPage } from '../../global/utils/pages'; -const RepositoryPage = createPage({ +const ExplorerPage = createPage({ getInitialProps: async ({ query, egoJwt }) => { return { query, egoJwt }; }, isPublic: true, })(() => { - return ; + return ; }); -export default RepositoryPage; +export default ExplorerPage; diff --git a/pages/index.tsx b/pages/index.tsx index 658c4b97..1f988c47 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import RepositoryPage from './repository'; +import ExplorerPage from './explorer'; import { createPage } from '../global/utils/pages'; const HomePage = createPage({ getInitialProps: async () => {}, isPublic: true, })(() => { - return ; + return ; }); export default HomePage; diff --git a/pages/logged-in.tsx b/pages/logged-in.tsx index 27b6187d..9c4548ab 100644 --- a/pages/logged-in.tsx +++ b/pages/logged-in.tsx @@ -4,7 +4,7 @@ import { css } from '@emotion/core'; import { getConfig } from '../global/config'; import { createPage } from '../global/utils/pages'; -import { EGO_JWT_KEY } from '../global/utils/constants'; +import { EGO_JWT_KEY, EXPLORER_PATH, LOGIN_PATH } from '../global/utils/constants'; import Router from 'next/router'; import { isValidJwt } from '../global/utils/egoTokenUtils'; import PageLayout from '../components/PageLayout'; @@ -32,7 +32,7 @@ const fetchEgoToken = () => { .then((jwt) => { if (isValidJwt(jwt)) { localStorage.setItem(EGO_JWT_KEY, jwt); - setTimeout(() => Router.push(getInternalLink({ path: 'repository' })), 2000); + setTimeout(() => Router.push(getInternalLink({ path: EXPLORER_PATH })), 2000); } else { throw new Error('Invalid jwt, cannot login.'); } @@ -40,7 +40,7 @@ const fetchEgoToken = () => { .catch((err) => { console.warn(err); localStorage.removeItem(EGO_JWT_KEY); - Router.push(getInternalLink({ path: 'login' })); + Router.push(getInternalLink({ path: LOGIN_PATH })); }); }; From 591159825e53db836f5e5d23e15489e8b4ba5ac7 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 21:14:44 -0500 Subject: [PATCH 2/9] Add favicon, page subtitles. move static dir to public/ --- components/Head.tsx | 17 ++++++++--- components/PageLayout.tsx | 32 +++++++++++--------- components/pages/explorer/index.tsx | 2 +- components/pages/login/index.tsx | 2 +- components/pages/user/index.tsx | 2 +- public/favicon.ico | Bin 15086 -> 0 bytes public/images/favicon.ico | Bin 0 -> 802 bytes {static => public/static}/avatar.svg | 0 {static => public/static}/checkmark.svg | 0 {static => public/static}/chevron-down.svg | 0 {static => public/static}/facebook.svg | 0 {static => public/static}/github.svg | 0 {static => public/static}/google.svg | 0 {static => public/static}/illustration.svg | 0 {static => public/static}/linkedin.svg | 0 {static => public/static}/logomark.svg | 0 {static => public/static}/orcid.svg | 0 {static => public/static}/overture-user.svg | 0 {static => public/static}/primary.svg | 0 public/vercel.svg | 4 --- 20 files changed, 34 insertions(+), 25 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 public/images/favicon.ico rename {static => public/static}/avatar.svg (100%) rename {static => public/static}/checkmark.svg (100%) rename {static => public/static}/chevron-down.svg (100%) rename {static => public/static}/facebook.svg (100%) rename {static => public/static}/github.svg (100%) rename {static => public/static}/google.svg (100%) rename {static => public/static}/illustration.svg (100%) rename {static => public/static}/linkedin.svg (100%) rename {static => public/static}/logomark.svg (100%) rename {static => public/static}/orcid.svg (100%) rename {static => public/static}/overture-user.svg (100%) rename {static => public/static}/primary.svg (100%) delete mode 100644 public/vercel.svg diff --git a/components/Head.tsx b/components/Head.tsx index c5881318..db4d4e4a 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -1,15 +1,24 @@ import React from 'react'; import NextHead from 'next/head'; -export default function Head() { +const Head = () => { return ( - {/* TODO: need correct favicon link */} - + ); -} +}; + +export const PageHead = ({ subtitle }: { subtitle?: string }) => { + return ( + + Overture DMS{subtitle ? ` - ${subtitle}` : ''} + + ); +}; + +export default Head; diff --git a/components/PageLayout.tsx b/components/PageLayout.tsx index 986afe49..74acad5e 100644 --- a/components/PageLayout.tsx +++ b/components/PageLayout.tsx @@ -3,22 +3,26 @@ import { css } from '@emotion/core'; import NavBar from './NavBar'; import Footer from './Footer'; +import { PageHead } from './Head'; -const PageLayout = ({ children }: { children: React.ReactNode }) => { +const PageLayout = ({ children, subtitle }: { children: React.ReactNode; subtitle?: string }) => { return ( -
    css` - display: grid; - grid-template-rows: 50px 1fr; - min-height: 100vh; - ${theme.typography.regular} - color: ${theme.colors.black}; - `} - > - - {children} -
    -
    + <> + +
    css` + display: grid; + grid-template-rows: 50px 1fr; + min-height: 100vh; + ${theme.typography.regular} + color: ${theme.colors.black}; + `} + > + + {children} +
    +
    + ); }; diff --git a/components/pages/explorer/index.tsx b/components/pages/explorer/index.tsx index 0e2df98b..5a7b14da 100644 --- a/components/pages/explorer/index.tsx +++ b/components/pages/explorer/index.tsx @@ -99,7 +99,7 @@ const RepositoryPage = () => { }); return ( - + {ConfigError ? ( {ConfigError} ) : ( diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index fc7b8071..c74ea49e 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -102,7 +102,7 @@ const providers: ProviderType[] = [ const LoginPage = () => { return ( - +
    { const { user } = useAuthContext(); return ( - +
    css` diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*-AL_t(IjdfE?Pg7wKoqPFi z-?c9UT4=GT6>6c0jUk`}*pZm%LNUg$VB^M(kC+gCfQd$<(I}{FTp0oz2pSR-NiZmH z1uYa%5DP8P*DZbC_jO~NTI#GO^PO|%OlCd|{u9a6tSylmzsa)x20^3@I3|lCRQyGy zXnLViHce%4SRryWHgql;8|tN*RdfCuflQ=MbG1vSx!4B)fae1!dfmJqA9-4c3;@7# zejU00=3Xo@*7%QrD2m88w$u@r*nC8eR_#i5IwzH~=8ZxoS06+i$q{mnD z?cv+!yB}9tRd#lMXL{NN08rv`dYyNA=Yvf5NuDQVxgs3DcNzcyr9&~pM*rl1e{9JC z0Kl`fGy@_%KTN4jhP2iX$6hXuuc`>1I->BRGJLR35Rz(96ba;e|NXZ2-B(A3grsr` z06=@p8ffi#Am9Yy1OPB=%)Ws&cRhd}9Qv;HE7oli!!Q<)uKHVYts%)_L?{*9UvgQd z-e|OBM{q}?N0*bW^sg9WMO=b5<_bg?NN4kt`yQMi?74NdL}JL~muTS2xMuva$`Vhq&3Z(fnxUxdOoWG`EicNRE znk(<0+FA_78F!lD*I5BeH&&bqJX@w~R-%jr03gl^MpSmTdSvg@S{ofnC^7<6n&D|q zzz1i1&cPWUn6$F6_Cz@rWQ3~RMskEja6_Htb>#)uT|zBmvSVxpi!!-EC5cy68+U_@ zpwD-zmln-s&&>D1-5!|!c`e}$yD%Iio=Yt|BrC=!jjGhgKt(>;qC(O0m8!M_cPfga z0RW2ULsadkH~Dxw$sHh<%8SAs$2EO6t)#o)Z_I>;r0ok~`bIF#HSi*oU;sgr63y9l g(jJFiItu{s2W{j$?xS*5Z2$lO07*qoM6N<$g4{Y(eE - - \ No newline at end of file From ed6c03ccfaea34c76cd3b72da6495c8f8d9f4f54 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 21:33:37 -0500 Subject: [PATCH 3/9] fix width on api info list --- components/pages/user/ApiTokenInfo.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/components/pages/user/ApiTokenInfo.tsx b/components/pages/user/ApiTokenInfo.tsx index b41cb171..19cda3a6 100644 --- a/components/pages/user/ApiTokenInfo.tsx +++ b/components/pages/user/ApiTokenInfo.tsx @@ -155,11 +155,7 @@ const ApiTokenInfo = () => { }, [token]); return ( -
    +

    css` @@ -232,6 +228,7 @@ const ApiTokenInfo = () => { justify-content: space-between; margin-bottom: 2rem; margin-top: 1rem; + max-width: 600px; `} >
    Date: Thu, 11 Mar 2021 09:17:19 -0500 Subject: [PATCH 4/9] fix facets height --- components/pages/explorer/Facets.tsx | 5 ++++- components/pages/explorer/PageContent.tsx | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/pages/explorer/Facets.tsx b/components/pages/explorer/Facets.tsx index bc5c1e0c..9c6b28a8 100644 --- a/components/pages/explorer/Facets.tsx +++ b/components/pages/explorer/Facets.tsx @@ -10,6 +10,9 @@ const Aggregations = dynamic( ) as any; const getFacetStyles = (theme: typeof defaultTheme) => css` + height: 100vh; + overflow-y: scroll; + padding-bottom: 2rem; .input-range-wrapper div { ${theme.typography.label2} font-weight: bold; @@ -61,7 +64,7 @@ const getFacetStyles = (theme: typeof defaultTheme) => css` } &.collapsed { background-color: ${theme.colors.grey_2}; - margin: -5px -8px -6px -6px; + margin: -5px -8px -6px -7px; padding: 5px 8px 6px 6px; } & .title { diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index 021ce8ec..fd78f5b9 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -44,7 +44,6 @@ const PageContent = (props: PageContentProps) => { `} > -
    Date: Thu, 11 Mar 2021 10:41:25 -0500 Subject: [PATCH 5/9] hide worker image on smaller screen --- components/Footer.tsx | 4 ++++ components/pages/login/index.tsx | 32 +++++++++++++++++++++----------- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 619e6765..3e1dcad9 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -19,6 +19,10 @@ const Footer = () => { padding-right: 18px; ${theme.shadow.default}; z-index: 10; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; `} > {
      { })}
    -
    css` - flex: 2; - background-color: ${theme.colors.primary}; - `} - >
    - +
    css` + flex: 1; + background-color: ${theme.colors.primary}; + `} + /> +
    + +
    From 314ffac55959f5d2200d08999c683941a121ad7b Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Thu, 11 Mar 2021 11:25:22 -0500 Subject: [PATCH 6/9] fix aggs, footer position. add base_path to favicon link --- components/Footer.tsx | 2 +- components/Head.tsx | 4 +++- components/pages/explorer/Facets.tsx | 2 -- components/pages/explorer/PageContent.tsx | 2 ++ 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 3e1dcad9..d5fa08b1 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -19,7 +19,7 @@ const Footer = () => { padding-right: 18px; ${theme.shadow.default}; z-index: 10; - position: absolute; + position: fixed; bottom: 0px; left: 0px; right: 0px; diff --git a/components/Head.tsx b/components/Head.tsx index db4d4e4a..8792666e 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -1,14 +1,16 @@ import React from 'react'; import NextHead from 'next/head'; +import { getConfig } from '../global/config'; const Head = () => { + const { NEXT_PUBLIC_BASE_PATH } = getConfig(); return ( - + ); }; diff --git a/components/pages/explorer/Facets.tsx b/components/pages/explorer/Facets.tsx index 9c6b28a8..27ca72a4 100644 --- a/components/pages/explorer/Facets.tsx +++ b/components/pages/explorer/Facets.tsx @@ -10,8 +10,6 @@ const Aggregations = dynamic( ) as any; const getFacetStyles = (theme: typeof defaultTheme) => css` - height: 100vh; - overflow-y: scroll; padding-bottom: 2rem; .input-range-wrapper div { ${theme.typography.label2} diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index ec29780e..e30203ce 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -43,6 +43,8 @@ const PageContent = (props: PageContentProps) => { background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; + height: calc(100vh - 94px); + overflow-y: scroll; `} > From c0c44379f39d82753e8e94c94ab70a40fb66e0da Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Thu, 11 Mar 2021 11:45:18 -0500 Subject: [PATCH 7/9] fix overflow on table container. cleanup. --- components/Footer.tsx | 3 ++- components/NavBar.tsx | 4 ++-- components/pages/explorer/PageContent.tsx | 27 +++++++++-------------- global/utils/constants.ts | 6 +++++ 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index d5fa08b1..eec7b15c 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,12 +5,13 @@ import defaultTheme from './theme'; import { OvertureLogoWithText } from './theme/icons'; import StyledLink from './Link'; +import { FOOTER_HEIGHT } from '../global/utils/constants'; const Footer = () => { return (
    css` - height: 47px; + height: ${FOOTER_HEIGHT}px; background-color: ${theme.colors.white}; border-top: 1px solid ${theme.colors.grey_3}; display: flex; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 3515c61c..a3d8ad35 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -8,7 +8,7 @@ import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { useTheme } from 'emotion-theming'; -import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; +import { EXPLORER_PATH, LOGIN_PATH, NAVBAR_HEIGHT, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -25,7 +25,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', css={(theme: typeof defaultTheme) => css` display: flex; justify-content: space-between; - height: 50px; + height: ${NAVBAR_HEIGHT}px; background-color: ${theme.colors.white}; ${theme.shadow.default}; position: sticky; diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index e30203ce..40ed508f 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -1,24 +1,15 @@ import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; -import styled from '@emotion/styled'; - import RepoTable from './RepoTable'; import Facets from './Facets'; import QueryBar from './QueryBar'; import { PageContentProps } from './index'; -import defaultTheme from '../../theme'; -import Footer from '../../Footer'; - -export const Collapsible = styled('div')` - ${({ theme }: { theme: typeof defaultTheme }) => css` - border-top: 1px solid ${theme.colors.grey_2}; - height: 47px; - width: 100%; - `} -`; - -const FACET_MAX_WIDTH = 270; +import { + FACET_MAX_WIDTH, + FACET_MIN_WIDTH, + FOOTER_HEIGHT, + NAVBAR_HEIGHT, +} from '../../../global/utils/constants'; const PageContent = (props: PageContentProps) => { return ( @@ -38,12 +29,12 @@ const PageContent = (props: PageContentProps) => { css={(theme) => css` flex: 3; flex-direction: column; - min-width: 250px; + min-width: ${FACET_MIN_WIDTH}px; max-width: ${FACET_MAX_WIDTH}px; background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; - height: calc(100vh - 94px); + height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); overflow-y: scroll; `} > @@ -54,6 +45,8 @@ const PageContent = (props: PageContentProps) => { display: flex; flex-direction: column; width: 100%; + height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + overflow-y: scroll; `} >
    Date: Mon, 15 Mar 2021 16:40:32 -0400 Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=91=8C=20move=20dimension=20constants?= =?UTF-8?q?=20to=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Footer.tsx | 3 +-- components/NavBar.tsx | 4 ++-- components/pages/explorer/PageContent.tsx | 24 +++++++++++------------ components/theme/dimensions.ts | 20 +++++++++++++++++++ components/theme/index.ts | 2 ++ global/utils/constants.ts | 6 ------ 6 files changed, 36 insertions(+), 23 deletions(-) create mode 100644 components/theme/dimensions.ts diff --git a/components/Footer.tsx b/components/Footer.tsx index eec7b15c..16c4a860 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,13 +5,12 @@ import defaultTheme from './theme'; import { OvertureLogoWithText } from './theme/icons'; import StyledLink from './Link'; -import { FOOTER_HEIGHT } from '../global/utils/constants'; const Footer = () => { return (
    css` - height: ${FOOTER_HEIGHT}px; + height: ${theme.dimensions.footer.height}px; background-color: ${theme.colors.white}; border-top: 1px solid ${theme.colors.grey_3}; display: flex; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index a3d8ad35..bd1ef169 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -8,7 +8,7 @@ import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { useTheme } from 'emotion-theming'; -import { EXPLORER_PATH, LOGIN_PATH, NAVBAR_HEIGHT, USER_PATH } from '../global/utils/constants'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -25,7 +25,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', css={(theme: typeof defaultTheme) => css` display: flex; justify-content: space-between; - height: ${NAVBAR_HEIGHT}px; + height: ${theme.dimensions.navbar.height}px; background-color: ${theme.colors.white}; ${theme.shadow.default}; position: sticky; diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index 40ed508f..cea994fd 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -4,12 +4,6 @@ import Facets from './Facets'; import QueryBar from './QueryBar'; import { PageContentProps } from './index'; -import { - FACET_MAX_WIDTH, - FACET_MIN_WIDTH, - FOOTER_HEIGHT, - NAVBAR_HEIGHT, -} from '../../../global/utils/constants'; const PageContent = (props: PageContentProps) => { return ( @@ -29,31 +23,35 @@ const PageContent = (props: PageContentProps) => { css={(theme) => css` flex: 3; flex-direction: column; - min-width: ${FACET_MIN_WIDTH}px; - max-width: ${FACET_MAX_WIDTH}px; + min-width: ${theme.dimensions.facets.minWidth}px; + max-width: ${theme.dimensions.facets.maxWidth}px; background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; - height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + height: calc( + 100vh - ${theme.dimensions.footer.height + theme.dimensions.navbar.height}px + ); overflow-y: scroll; `} >
    css` display: flex; flex-direction: column; width: 100%; - height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + height: calc( + 100vh - ${theme.dimensions.footer.height + theme.dimensions.navbar.height}px + ); overflow-y: scroll; `} >
    css` flex: 8.5; margin: 0 15px 0 15px; - max-width: calc(100vw - ${FACET_MAX_WIDTH + 10}px); + max-width: calc(100vw - ${theme.dimensions.facets.maxWidth + 10}px); `} > diff --git a/components/theme/dimensions.ts b/components/theme/dimensions.ts new file mode 100644 index 00000000..1a2893a4 --- /dev/null +++ b/components/theme/dimensions.ts @@ -0,0 +1,20 @@ +// dimension constants +export const FACET_MAX_WIDTH = 270; +export const FACET_MIN_WIDTH = 250; +export const FOOTER_HEIGHT = 47; +export const NAVBAR_HEIGHT = 50; + +const dimensions = { + navbar: { + height: 50, + }, + footer: { + height: 47, + }, + facets: { + minWidth: 250, + maxWidth: 270, + }, +}; + +export default dimensions; diff --git a/components/theme/index.ts b/components/theme/index.ts index 02bf3d1e..672ef9fc 100644 --- a/components/theme/index.ts +++ b/components/theme/index.ts @@ -1,9 +1,11 @@ import colors from './colors'; import typography from './typography'; import shadow from './shadow'; +import dimensions from './dimensions'; export default { colors, typography, shadow, + dimensions, }; diff --git a/global/utils/constants.ts b/global/utils/constants.ts index 968a35df..59a5add4 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -8,9 +8,3 @@ export const EGO_API_KEY_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/api_key`; export const EXPLORER_PATH = '/explorer'; export const USER_PATH = '/user'; export const LOGIN_PATH = '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/login'; - -// dimension constants -export const FACET_MAX_WIDTH = 270; -export const FACET_MIN_WIDTH = 250; -export const FOOTER_HEIGHT = 47; -export const NAVBAR_HEIGHT = 50; From 03dc0a7161422795b746e5b2e5648c6abe5812c2 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 15 Mar 2021 16:50:24 -0400 Subject: [PATCH 9/9] cleanup --- components/theme/dimensions.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/theme/dimensions.ts b/components/theme/dimensions.ts index 1a2893a4..5a44d92e 100644 --- a/components/theme/dimensions.ts +++ b/components/theme/dimensions.ts @@ -1,9 +1,3 @@ -// dimension constants -export const FACET_MAX_WIDTH = 270; -export const FACET_MIN_WIDTH = 250; -export const FOOTER_HEIGHT = 47; -export const NAVBAR_HEIGHT = 50; - const dimensions = { navbar: { height: 50,