fix: styling
This commit is contained in:
parent
64dbd7d479
commit
d41d577c29
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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%' }} />
|
||||||
|
@ -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>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user