Signing Page - New Design #152
@ -50,6 +50,7 @@
|
||||
.pdfImageWrapper {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.drawing {
|
||||
cursor: crosshair;
|
||||
|
@ -17,20 +17,21 @@ const FileList = ({
|
||||
}: FileListProps) => {
|
||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.files}></div>
|
||||
<ul>
|
||||
{files.map((file: CurrentUserFile) => (
|
||||
<li
|
||||
key={file.id}
|
||||
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
||||
onClick={() => setCurrentFile(file)}
|
||||
>
|
||||
<span className={styles.fileNumber}>{file.id}</span>
|
||||
<span className={styles.fileName}>{file.filename}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.container}>
|
||||
<ul className={styles.files}>
|
||||
{files.map((file: CurrentUserFile) => (
|
||||
<li
|
||||
key={file.id}
|
||||
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
||||
onClick={() => setCurrentFile(file)}
|
||||
>
|
||||
<span className={styles.fileNumber}>{file.id}</span>
|
||||
<span className={styles.fileName}>{file.filename}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||
Download Files
|
||||
</Button>
|
||||
|
@ -7,6 +7,29 @@
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.filesPageContainer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||
grid-gap: 30px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Removes bullet points */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: sticky;
|
||||
top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
.files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -33,6 +56,10 @@
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.fileItem {
|
||||
transition: ease 0.2s;
|
||||
display: flex;
|
||||
@ -49,6 +76,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
|
||||
&.active {
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
|
@ -34,9 +34,7 @@ const PdfPageItem = ({
|
||||
<div
|
||||
className={styles.pdfImageWrapper}
|
||||
style={{
|
||||
border: '1px solid #c4c4c4',
|
||||
marginBottom: '10px',
|
||||
marginTop: '10px'
|
||||
border: '1px solid #c4c4c4'
|
||||
}}
|
||||
>
|
||||
<img draggable="false" src={page.image} style={{ width: '100%' }} />
|
||||
|
@ -42,9 +42,9 @@ const PdfView = ({
|
||||
)
|
||||
}
|
||||
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||
!(index !== files.length - 1)
|
||||
index !== files.length - 1
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<>
|
||||
{files.map((currentUserFile, index, arr) => {
|
||||
const { hash, pdfFile, filename, id } = currentUserFile
|
||||
if (!hash) return
|
||||
@ -65,7 +65,7 @@ const PdfView = ({
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -19,6 +19,7 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.pdfView {
|
||||
@ -26,4 +27,5 @@
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user