Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 02:22:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ModalDialog buttons moved outside of the scroll area

Browse source
This commit is contained in:
nklhrstv 2020-02-05 13:47:43 +02:00
parent dbfec0cae0
commit 7540265a46
2 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/common/ModalDialog/ModalDialog.js
View file

@ -70,30 +70,30 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
</div>
<div className={styles['modal-dialog-content']}>
{children}
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
</Modal>
);

22
src/common/ModalDialog/styles.less
View file

@ -60,15 +60,25 @@
.modal-dialog-content {
flex: 1;
align-self: stretch;
margin: 2rem 1rem;
margin: 2rem 1rem 0;
padding: 0 1rem;
overflow-y: auto;
.buttons-container {
margin-top: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:last-child {
margin-bottom: 2rem;
}
}
.buttons-container {
flex: none;
align-self: stretch;
margin: 1rem 2rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:last-child {
margin-bottom: 2rem;
}
}
}