betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 Améliore la modale (répare le bug sur iframe) 

fix #1217 et #1326
pull/1345/head
Johan Girod 2021-01-06 11:20:16 +01:00
parent 8dd5983083
commit af7b2f87fc
3 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modele-social/règles/salarié.yaml
View File

@ -1610,7 +1610,8 @@ contrat salarié . plafond sécurité sociale . renonciation proratisation:
D'un commun accord, l'employeur et l'employé peuvent renoncer à la réduction
du plafond de la sécurité sociale (applicable pour les salariés à temps
partiel), notamment afin d'augmenter le montant des cotisations vieillesse.
par défaut: non
formule: non
# TODO : ajouter une question non prioritaire
applicable si: temps de travail . quotité de travail < 100%
remplace:
- règle: plafond sécurité sociale

20
mon-entreprise/source/components/Overlay.tsx
View File

@ -39,11 +39,12 @@ export default function Overlay({
}
}, [])
const offsetTop = useIFrameOffset()
if (offsetTop === null) {
return null
}
return (
<StyledOverlayWrapper offsetTop={offsetTop}>
<StyledOverlayWrapper offsetTop={Math.max(0, offsetTop)}>
<div className="overlayContent">
<animate.fromBottom>
<FocusTrap
@ -97,14 +98,18 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
position: absolute;
}
.overlayCloseButton {
position: absolute;
bottom: 0rem;
position: fixed;
background-color: white;
border-top-left-radius: 100%;
text-decoration: none;
font-size: 3rem;
font-size: 2.5rem;
border-top: 0.5rem solid white;
border-left: 0.5rem solid white;
bottom: 0;
right: 0;
color: rgba(0, 0, 0, 0.6);
color: var(--lighterTextColor);
padding: 0 0.5rem;
right: 0;
padding: 0 1rem;
}
.ui__.card[aria-modal='true'] {
padding-bottom: 4rem;
@ -116,11 +121,12 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
.overlayCloseButton {
top: 0;
bottom: auto;
padding: 0 0.5rem;
font-size: 2rem;
}
.overlayContent {
transform: translateX(-50%)
translateY(calc(${({ offsetTop }) => offsetTop}px + 10rem));
translateY(calc(${({ offsetTop }) => offsetTop}px + 5rem));
left: 50%;
width: 80%;
bottom: auto;

29
publicodes/ui-react/source/Overlay.tsx
View File

@ -20,7 +20,7 @@ const useIFrameOffset = () => {
setOffset(0)
return
}
window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }) => {
window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }: PageInfo) => {
setOffset(scrollTop - offsetTop)
window.parentIFrame.getPageInfo(false)
})
@ -42,11 +42,12 @@ export default function Overlay({
}
}, [])
const offsetTop = useIFrameOffset()
if (offsetTop === null) {
return null
}
return (
<StyledOverlayWrapper offsetTop={offsetTop}>
<StyledOverlayWrapper offsetTop={Math.max(0, offsetTop)}>
<div className="overlayContent">
<FocusTrap
focusTrapOptions={{
@ -98,14 +99,18 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
position: absolute;
}
.overlayCloseButton {
position: absolute;
bottom: 0rem;
position: fixed;
background-color: white;
border-top-left-radius: 100%;
text-decoration: none;
font-size: 3rem;
font-size: 2.5rem;
border-top: 0.5rem solid white;
border-left: 0.5rem solid white;
bottom: 0;
right: 0;
color: rgba(0, 0, 0, 0.6);
color: var(--lighterTextColor);
padding: 0 0.5rem;
right: 0;
padding: 0 1rem;
}
.ui__.card[aria-modal='true'] {
padding-bottom: 4rem;
@ -117,11 +122,12 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
.overlayCloseButton {
top: 0;
bottom: auto;
padding: 0 0.5rem;
font-size: 2rem;
}
.overlayContent {
transform: translateX(-50%)
translateY(calc(${({ offsetTop }) => offsetTop}px + 10rem));
translateY(calc(${({ offsetTop }) => offsetTop}px + 5rem));
left: 50%;
width: 80%;
bottom: auto;
@ -129,8 +135,9 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
max-width: 40em;
min-height: 6em;
}
.ui__.card[aria-modal='true'] {
padding-bottom: 2rem;
margin-bottom: 2rem;
.ui__.card[aria-modal='true'] {
padding-bottom: 2rem;
margin-bottom: 2rem;
}
}
`