fix: styling

This commit is contained in:
eugene 2024-08-14 16:08:42 +03:00
parent 64dbd7d479
commit d41d577c29
6 changed files with 50 additions and 20 deletions

View File

@ -50,6 +50,7 @@
.pdfImageWrapper { .pdfImageWrapper {
position: relative; position: relative;
user-select: none; user-select: none;
margin-bottom: 10px;
&.drawing { &.drawing {
cursor: crosshair; cursor: crosshair;

View File

@ -17,20 +17,21 @@ const FileList = ({
}: FileListProps) => { }: FileListProps) => {
const isActive = (file: CurrentUserFile) => file.id === currentFile.id const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return ( return (
<div className={styles.container}> <div className={styles.wrap}>
<div className={styles.files}></div> <div className={styles.container}>
<ul> <ul className={styles.files}>
{files.map((file: CurrentUserFile) => ( {files.map((file: CurrentUserFile) => (
<li <li
key={file.id} key={file.id}
className={`${styles.fileItem} ${isActive(file) && styles.active}`} className={`${styles.fileItem} ${isActive(file) && styles.active}`}
onClick={() => setCurrentFile(file)} onClick={() => setCurrentFile(file)}
> >
<span className={styles.fileNumber}>{file.id}</span> <span className={styles.fileNumber}>{file.id}</span>
<span className={styles.fileName}>{file.filename}</span> <span className={styles.fileName}>{file.filename}</span>
</li> </li>
))} ))}
</ul> </ul>
</div>
<Button variant="contained" fullWidth onClick={handleDownload}> <Button variant="contained" fullWidth onClick={handleDownload}>
Download Files Download Files
</Button> </Button>

View File

@ -7,6 +7,29 @@
grid-gap: 0px; 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 { .files {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -33,6 +56,10 @@
cursor: grab; cursor: grab;
} }
.wrap {
margin-top: 5px;
}
.fileItem { .fileItem {
transition: ease 0.2s; transition: ease 0.2s;
display: flex; display: flex;
@ -49,6 +76,7 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
&.active { &.active {
background: #4c82a3; background: #4c82a3;
color: white; color: white;

View File

@ -34,9 +34,7 @@ const PdfPageItem = ({
<div <div
className={styles.pdfImageWrapper} className={styles.pdfImageWrapper}
style={{ style={{
border: '1px solid #c4c4c4', border: '1px solid #c4c4c4'
marginBottom: '10px',
marginTop: '10px'
}} }}
> >
<img draggable="false" src={page.image} style={{ width: '100%' }} /> <img draggable="false" src={page.image} style={{ width: '100%' }} />

View File

@ -42,9 +42,9 @@ const PdfView = ({
) )
} }
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean => const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
!(index !== files.length - 1) index !== files.length - 1
return ( return (
<Box sx={{ width: '100%' }}> <>
{files.map((currentUserFile, index, arr) => { {files.map((currentUserFile, index, arr) => {
const { hash, pdfFile, filename, id } = currentUserFile const { hash, pdfFile, filename, id } = currentUserFile
if (!hash) return if (!hash) return
@ -65,7 +65,7 @@ const PdfView = ({
</div> </div>
) )
})} })}
</Box> </>
) )
} }

View File

@ -19,6 +19,7 @@
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
.pdfView { .pdfView {
@ -26,4 +27,5 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
gap: 10px;
} }