maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-30 09:36:42 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor Modal to use flexbox

Browse source
This commit is contained in:
Vesa Luusua 2017-05-04 18:20:50 +03:00
parent 4db5f31e84
commit d12330d3a7
5 changed files with 85 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Modal/Modal.css
View file

@ -1,6 +1,7 @@
/* Content is visible as modal layer */
.isOpen {
display: block;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
height: 100vh;
@ -58,3 +59,9 @@
background-color: transparent;
}
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
}

4
src/components/Modal/Modal.js
View file

@ -75,7 +75,9 @@ export class ModalComponent extends Component {
return (
<div className={classes}>
{header}
{children}
<div className={css.content}>
{children}
</div>
</div>
);
}

5
src/components/Modal/__snapshots__/Modal.test.js.snap
View file

@ -1,6 +1,9 @@
exports[`Modal no extra classes when window is missing 1`] = `
<div
className="test-class-from-props">
Content
<div
className={undefined}>
Content
</div>
</div>
`;

5
src/components/ModalInMobile/__snapshots__/ModalInMobile.test.js.snap
View file

@ -1,6 +1,9 @@
exports[`ModalInMobile no extra classes when window is missing 1`] = `
<div
className="test-class-from-props">
Content
<div
className={undefined}>
Content
</div>
</div>
`;

126
src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
View file

@ -46,36 +46,39 @@ exports[`InboxPage matches snapshot 1`] = `
className={undefined}>
<div
className={undefined}>
<a
className=""
href="/signup"
onClick={[Function]}
style={Object {}}>
<span>
Sign up
</span>
</a>
<a
className=""
href="/login"
onClick={[Function]}
style={Object {}}>
<span>
Log in
</span>
</a>
</div>
<div
className={undefined}>
<a
className=""
href="/l/new"
onClick={[Function]}
style={Object {}}>
<span>
+ Add your sauna
</span>
</a>
<div
className={undefined}>
<a
className=""
href="/signup"
onClick={[Function]}
style={Object {}}>
<span>
Sign up
</span>
</a>
<a
className=""
href="/login"
onClick={[Function]}
style={Object {}}>
<span>
Log in
</span>
</a>
</div>
<div
className={undefined}>
<a
className=""
href="/l/new"
onClick={[Function]}
style={Object {}}>
<span>
+ Add your sauna
</span>
</a>
</div>
</div>
</div>
</div>
@ -230,36 +233,39 @@ exports[`InboxPage matches snapshot 2`] = `
className={undefined}>
<div
className={undefined}>
<a
className=""
href="/signup"
onClick={[Function]}
style={Object {}}>
<span>
Sign up
</span>
</a>
<a
className=""
href="/login"
onClick={[Function]}
style={Object {}}>
<span>
Log in
</span>
</a>
</div>
<div
className={undefined}>
<a
className=""
href="/l/new"
onClick={[Function]}
style={Object {}}>
<span>
+ Add your sauna
</span>
</a>
<div
className={undefined}>
<a
className=""
href="/signup"
onClick={[Function]}
style={Object {}}>
<span>
Sign up
</span>
</a>
<a
className=""
href="/login"
onClick={[Function]}
style={Object {}}>
<span>
Log in
</span>
</a>
</div>
<div
className={undefined}>
<a
className=""
href="/l/new"
onClick={[Function]}
style={Object {}}>
<span>
+ Add your sauna
</span>
</a>
</div>
</div>
</div>
</div>