Responsiveness and tabs #179
12
src/App.scss
12
src/App.scss
@ -70,6 +70,18 @@ input {
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none; /* Removes bullet points */
|
||||||
|
margin: 0; /* Removes default margin */
|
||||||
|
padding: 0; /* Removes default padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none; /* Removes the bullets */
|
||||||
|
margin: 0; /* Removes any default margin */
|
||||||
|
padding: 0; /* Removes any default padding */
|
||||||
|
}
|
||||||
|
|||||||
|
|
||||||
// Shared styles for center content (Create, Sign, Verify)
|
// Shared styles for center content (Create, Sign, Verify)
|
||||||
.files-wrapper {
|
.files-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -22,30 +22,26 @@ const FileList = ({
|
|||||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrap}>
|
<div className={styles.wrap}>
|
||||||
<div className={styles.container}>
|
<ul className={styles.files}>
|
||||||
<ul className={styles.files}>
|
{files.map((currentUserFile: CurrentUserFile) => (
|
||||||
{files.map((currentUserFile: CurrentUserFile) => (
|
<li
|
||||||
<li
|
key={currentUserFile.id}
|
||||||
key={currentUserFile.id}
|
className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
|
||||||
className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
|
onClick={() => setCurrentFile(currentUserFile)}
|
||||||
onClick={() => setCurrentFile(currentUserFile)}
|
>
|
||||||
>
|
<div className={styles.fileNumber}>{currentUserFile.id}</div>
|
||||||
<div className={styles.fileNumber}>{currentUserFile.id}</div>
|
<div className={styles.fileInfo}>
|
||||||
<div className={styles.fileInfo}>
|
<div className={styles.fileName}>{currentUserFile.file.name}</div>
|
||||||
<div className={styles.fileName}>
|
</div>
|
||||||
{currentUserFile.file.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.fileVisual}>
|
<div className={styles.fileVisual}>
|
||||||
{currentUserFile.isHashValid && (
|
{currentUserFile.isHashValid && (
|
||||||
<FontAwesomeIcon icon={faCheck} />
|
<FontAwesomeIcon icon={faCheck} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||||
{downloadLabel || 'Download Files'}
|
{downloadLabel || 'Download Files'}
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -1,12 +1,3 @@
|
|||||||
.container {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
padding: 15px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-gap: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filesPageContainer {
|
.filesPageContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -15,18 +6,6 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none; /* Removes bullet points */
|
|
||||||
margin: 0; /* Removes default margin */
|
|
||||||
padding: 0; /* Removes default padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none; /* Removes the bullets */
|
|
||||||
margin: 0; /* Removes any default margin */
|
|
||||||
padding: 0; /* Removes any default padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -34,14 +13,16 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.files {
|
.files {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-gap: 15px;
|
grid-gap: 15px;
|
||||||
max-height: 350px;
|
overflow-y: auto;
|
||||||
overflow: auto;
|
overflow-x: none;
|
||||||
padding: 0 5px 0 0;
|
|
||||||
margin: 0 -5px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.files::-webkit-scrollbar {
|
.files::-webkit-scrollbar {
|
||||||
|
Loading…
Reference in New Issue
Block a user
loving these comments