youwen5/eexiv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update responsive design

Browse source
This commit is contained in:
Youwen Wu 2024-02-10 21:05:14 -08:00
parent c898ddf51c
commit 4fafe38e8d
8 changed files with 22 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -8,7 +8,6 @@
"name": "eexiv-2", "name": "eexiv-2",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"file-saver": "^2.0.5",
"next": "14.1.0", "next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
@ -1993,11 +1992,6 @@
"node": "^10.12.0 || >=12.0.0" "node": "^10.12.0 || >=12.0.0"
} }
}, },
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

1
package.json
View file

@ -9,7 +9,6 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"file-saver": "^2.0.5",
"next": "14.1.0", "next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",

0
src/app/document/document.module.css
View file

27
src/app/document/view/[slug]/documentViewer.module.css
View file

@ -1,27 +0,0 @@
.itemTitle {
margin: 0;
font-size: 2em;
}
.itemAbstractHeader {
margin-top: 20px;
margin-bottom: 10px;
color: 33;
font-size: 1.5em;
}
.typePresentation {
background-color: #007bff;
}
.typeOther {
background-color: #6c757d;
}
.resultAbstract {
color: #333;
}
.downloadButton {
padding: 10px;
}

22
src/app/document/view/[slug]/page.tsx
View file

@ -1,6 +1,4 @@
import styles from './documentViewer.module.css'
import { Zilla_Slab } from 'next/font/google' import { Zilla_Slab } from 'next/font/google'
import { saveAs } from 'file-saver'
import { import {
DocumentType, DocumentType,
documents, documents,
@ -9,6 +7,7 @@ import {
} from '../../../db/data' } from '../../../db/data'
import Link from 'next/link' import Link from 'next/link'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import { Fragment } from 'react'
const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] }) const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
@ -32,19 +31,11 @@ export default function Page({
const doc = documents[params.slug] const doc = documents[params.slug]
if (!doc) { if (!doc) {
notFound() notFound()
return
} }
const { abstract, file } = doc const { abstract, file } = doc
const { title, authors, topics, dates, references, code, type, latest } = const { title, authors, topics, dates, references, code, type, latest } =
doc.manifest doc.manifest
const handleDownloadLatest = () => {
saveAs(
`/download/${params.slug}/file${latest}.${file}`,
`${params.slug}-rev-${latest}.pdf`
)
}
const generateTopics = () => { const generateTopics = () => {
return ( return (
<> <>
@ -67,12 +58,12 @@ export default function Page({
<> <>
<span className='font-bold'>Code: </span> <span className='font-bold'>Code: </span>
{code.map((c: string, i) => ( {code.map((c: string, i) => (
<> <Fragment key={c}>
<Link href={c} target='_blank'> <Link href={c} target='_blank'>
{c} {c}
</Link> </Link>
{i !== code.length - 1 ? ', ' : null} {i !== code.length - 1 ? ', ' : null}
</> </Fragment>
))} ))}
</> </>
) )
@ -122,15 +113,14 @@ export default function Page({
return ( return (
<div> <div>
<div> <div>
<h3 <h1
className={` className={`
${styles.itemTitle} text-slate-800 font-bold text-5xl mb-8
text-slate-800
${zillaSlab.className} ${zillaSlab.className}
`} `}
> >
{title} {title}
</h3> </h1>
<p className={`text-slate-800 mt-2`}>{generateAuthors()}</p> <p className={`text-slate-800 mt-2`}>{generateAuthors()}</p>
<p className='mt-4'> <p className='mt-4'>
Latest revision published{' '} Latest revision published{' '}

10
src/app/home.module.css
View file

@ -9,20 +9,15 @@
} }
.banner { .banner {
width: 100%;
height: 100px;
padding: 20px;
background-color: #0c5198; background-color: #0c5198;
color: white; color: white;
margin-bottom: 50px;
} }
.title { .title {
position: absolute; /* top: 162.5px; */
top: 162.5px;
color: white; color: white;
font-size: 50px; font-size: 50px;
margin-bottom: 50px; /* margin-bottom: 50px; */
cursor: pointer; cursor: pointer;
} }
@ -34,7 +29,6 @@
.contributions { .contributions {
width: 40vw; width: 40vw;
margin-top: 50px;
margin-left: calc(100% - 40vw - 10px); margin-left: calc(100% - 40vw - 10px);
} }

20
src/app/layout.tsx
View file

@ -29,9 +29,9 @@ export default function RootLayout({
<html lang='en'> <html lang='en'>
<body className={inter.className}> <body className={inter.className}>
<div className={styles.header}> <div className={styles.header}>
<Container width='1200px'> <div className='max-w-[1200px] flex flex-nowrap mx-auto justify-between items-center'>
<img className={styles.wordmark} src='/eecs-wordmark.png' /> <img className='h-[100px] mt-4' src='/eecs-wordmark.png' />
<p className={styles.contributions}> <p className={`max-w-[600px] hidden md:inline`}>
We gratefully acknowledge support from our volunteer peer We gratefully acknowledge support from our volunteer peer
reviewers, member institutions, and all{' '} reviewers, member institutions, and all{' '}
<a <a
@ -42,17 +42,19 @@ export default function RootLayout({
</a> </a>
. .
</p> </p>
</Container> </div>
</div> </div>
<div className={styles.banner}> <div className={`${styles.banner} w-full h-[100px] mb-[50px]`}>
<Container width='1200px'> <div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
<h1 className={`${styles.title} ${zillaSlab.className}`}> <h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
<Link href='/' className='no-link-style'> <Link href='/' className='no-link-style'>
eeXiv<sup>2</sup> eeXiv<sup>2</sup>
</Link> </Link>
</h1> </h1>
</Container> <div className='hidden md:inline'>
<SearchBar /> <SearchBar />
</div>
</div>
</div> </div>
<Container width='1200px' fill> <Container width='1200px' fill>
{children} {children}

6
src/app/searchBar/SearchBar.tsx
View file

@ -3,14 +3,14 @@ import styles from './searchBar.module.css'
export default function SearchBar() { export default function SearchBar() {
return ( return (
<div className={styles.search}> <div className='width-[40vw]'>
<input <input
type='text' type='text'
className={`${styles.searchBox} text-slate-800`} className='py-3 px-5 rounded-xl text-slate-800'
name='q' name='q'
placeholder='Search...' placeholder='Search...'
/> />
<button type='submit' className={styles.searchButton}> <button type='submit' className='p-2.5 mx-4 border-2 rounded-xl bg-'>
Search Search
</button> </button>
</div> </div>