🎨 Version mobile
Johan Girod
parent
4b8c58d9b9
commit
01a5e40c92
|
|
@ -39,11 +39,15 @@ h2 {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0rem;
|
||||
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
h5 {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
.comparaison-grid {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
grid-template-columns: [row-legend] 16rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 1fr [end];
|
||||
grid-template-columns: [row-legend] 16rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end];
|
||||
}
|
||||
|
||||
.comparaison-grid > * {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
padding: 0.6rem 1.2rem;
|
||||
|
|
@ -19,6 +18,7 @@
|
|||
margin: 0;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
.comparaison-grid > .legend {
|
||||
justify-content: flex-end;
|
||||
|
|
@ -35,10 +35,12 @@
|
|||
.comparaison-grid > .indep {
|
||||
grid-column: indépendant;
|
||||
}
|
||||
.comparaison-grid > .auto {
|
||||
.comparaison-grid > .auto:not(.button) {
|
||||
grid-column: auto-entrepreneur;
|
||||
border-right: none;
|
||||
}
|
||||
.comparaison-grid > .all {
|
||||
border-right: none;
|
||||
text-align: left;
|
||||
grid-column: row-legend / end;
|
||||
background-color: var(--lightestColour);
|
||||
|
|
@ -46,9 +48,11 @@
|
|||
|
||||
.comparaison-grid > .indep-et-auto {
|
||||
grid-column: indépendant / end;
|
||||
border-right: none;
|
||||
}
|
||||
.comparaison-grid > .AS-indep-et-auto {
|
||||
grid-column: assimilé-salarié / end;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.comparaison-grid.hide-auto-entrepreneur {
|
||||
|
|
@ -75,3 +79,66 @@
|
|||
place-self: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.comparaison-grid {
|
||||
grid-template-columns: [row-legend] 10rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end];
|
||||
}
|
||||
.comparaison-grid > * {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.comparaison-grid {
|
||||
display: block;
|
||||
}
|
||||
.comparaison-grid > h2 {
|
||||
display: none;
|
||||
}
|
||||
.comparaison-grid > *::before {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
.comparaison-grid > :not(.button)::before {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
color: var(--lighterInverseTextColour);
|
||||
}
|
||||
.comparaison-grid > .AS::before {
|
||||
content: 'Assimilé-salarié : ';
|
||||
}
|
||||
.comparaison-grid > .indep::before {
|
||||
content: 'Indépendant : ';
|
||||
}
|
||||
.comparaison-grid > .auto::before {
|
||||
content: 'Auto-entrepreneur : ';
|
||||
}
|
||||
.comparaison-grid > .indep-et-auto::before {
|
||||
content: 'Indépendant et auto-entrepreneur : ';
|
||||
}
|
||||
.comparaison-grid > .AS-et-indep::before {
|
||||
content: 'Assimilé salarié et indépendant : ';
|
||||
}
|
||||
.comparaison-grid > .legend {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
}
|
||||
.comparaison-grid > * {
|
||||
border: none;
|
||||
text-align: right;
|
||||
justify-content: right;
|
||||
}
|
||||
.comparaison-grid > :not(.all):not(.button) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.comparaison-grid > .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
.comparaison-grid > h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,10 @@ import Simulation from 'Components/Simulation'
|
|||
import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
|
||||
import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
|
||||
import { compose, map, tryCatch } from 'ramda'
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { connect } from 'react-redux'
|
||||
import { noUserInputSelector } from 'Selectors/analyseSelectors'
|
||||
import { règleAvecMontantSelector } from 'Selectors/regleSelectors'
|
||||
import Animate from 'Ui/animate'
|
||||
import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
|
||||
|
|
@ -37,9 +36,9 @@ const SchemeComparaisonPage = ({
|
|||
indépendant,
|
||||
autoEntrepreneur,
|
||||
conversationStarted,
|
||||
noUserInput,
|
||||
startConversation
|
||||
}: Props) => {
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
|
|
@ -59,39 +58,48 @@ const SchemeComparaisonPage = ({
|
|||
<div className="ui__ full-width">
|
||||
<div className="comparaison-grid">
|
||||
<h2 className="AS">
|
||||
{emoji('☂')} Assimilé salarié
|
||||
{emoji('☂')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
Assimilé salarié
|
||||
</span>
|
||||
<small>Le régime tout compris</small>
|
||||
</h2>
|
||||
<h2 className="indep">
|
||||
{emoji('👩🔧')} Indépendant
|
||||
{emoji('👩🔧')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
Indépendant
|
||||
</span>
|
||||
<small>La protection à la carte</small>
|
||||
</h2>
|
||||
<h2 className="auto">
|
||||
{emoji('🚶♂️')} Auto-entrepreneur
|
||||
{emoji('🚶♂️')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
Auto-entrepreneur
|
||||
</span>
|
||||
<small>Pour les petites activités</small>
|
||||
</h2>
|
||||
|
||||
<div className="legend">Sécurité sociale</div>
|
||||
<h3 className="legend">Sécurité sociale</h3>
|
||||
<div className="AS">Régime général</div>
|
||||
<div className="indep-et-auto">
|
||||
Sécurité sociale des indépendants (SSI)
|
||||
</div>
|
||||
|
||||
<div className="legend">Accidents du travail couverts</div>
|
||||
<h3 className="legend">Accidents du travail couverts</h3>
|
||||
<div className="AS">Oui</div>
|
||||
<div className="indep-et-auto">Non</div>
|
||||
|
||||
<div className="legend">Assurance maladie</div>
|
||||
<h3 className="legend">Assurance maladie</h3>
|
||||
<div className="green AS">++</div>
|
||||
<div className="green indep-et-auto">+</div>
|
||||
|
||||
<div className="legend">Indémnités journalières</div>
|
||||
<h3 className="legend">Indémnités journalières</h3>
|
||||
<div className="green AS">++</div>
|
||||
<div className="indep-et-auto green">+</div>
|
||||
|
||||
{!conversationStarted && (
|
||||
<>
|
||||
<div className="legend">Retraite</div>
|
||||
<h3 className="legend">Retraite</h3>
|
||||
<div className="green AS">++</div>
|
||||
<div className="green indep">+</div>
|
||||
<div className="red auto">−</div>
|
||||
|
|
@ -100,7 +108,7 @@ const SchemeComparaisonPage = ({
|
|||
|
||||
{conversationStarted && (
|
||||
<>
|
||||
<div className="legend">Période</div>
|
||||
<h3 className="legend">Période</h3>
|
||||
<div className="AS-indep-et-auto">
|
||||
<PeriodSwitch />
|
||||
</div>
|
||||
|
|
@ -125,7 +133,7 @@ const SchemeComparaisonPage = ({
|
|||
|
||||
{conversationStarted && (
|
||||
<>
|
||||
<div className="legend">Revenu net</div>
|
||||
<h3 className="legend">Revenu net</h3>
|
||||
<div className="AS big">
|
||||
{assimiléSalarié && (
|
||||
<Animate.appear className="ui__ plain card">
|
||||
|
|
@ -154,7 +162,7 @@ const SchemeComparaisonPage = ({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="legend">Retraite</div>
|
||||
<h3 className="legend">Retraite</h3>
|
||||
<div className="AS big">
|
||||
{assimiléSalarié && (
|
||||
<a>
|
||||
|
|
@ -182,39 +190,55 @@ const SchemeComparaisonPage = ({
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="legend">ACCRE</div>
|
||||
<div className="AS-et-indep">Une année, plafonné</div>
|
||||
<div className="auto">3 années, progressif, non plafonné</div>
|
||||
|
||||
<div className="legend">Déduction des charges</div>
|
||||
<div className="AS-et-indep">Régime réel </div>
|
||||
<div className="auto">Abattement forfaitaire </div>
|
||||
{showMore ? (
|
||||
<>
|
||||
<h3 className="legend">ACCRE</h3>
|
||||
<div className="AS-et-indep">Une année, plafonné</div>
|
||||
<div className="auto">3 années, progressif, non plafonné</div>
|
||||
|
||||
<div className="legend">Comptabilité</div>
|
||||
<div className="AS">Expert</div>
|
||||
<div className="indep">Compliquée</div>
|
||||
<div className="auto">Simplifiée</div>
|
||||
<h3 className="legend">Déduction des charges</h3>
|
||||
<div className="AS-et-indep">Régime réel </div>
|
||||
<div className="auto">Abattement forfaitaire </div>
|
||||
|
||||
<div className="legend">Paiment des cotisations</div>
|
||||
<div className="AS">Mensuel (à la source)</div>
|
||||
<div className="indep">Annuel avec deux ans de décalage</div>
|
||||
<div className="auto">Mensuel ou trimestriel</div>
|
||||
<h3 className="legend">Comptabilité</h3>
|
||||
<div className="AS">Expert</div>
|
||||
<div className="indep">Compliquée</div>
|
||||
<div className="auto">Simplifiée</div>
|
||||
|
||||
<div className="legend">
|
||||
Complémentaires retraite et santé déductibles
|
||||
</div>
|
||||
<div className="AS">Oui (jusqu'à 50%)</div>
|
||||
<div className="indep">Oui (Loi Madelin)</div>
|
||||
<div className="auto">Non</div>
|
||||
<h3 className="legend">Paiment des cotisations</h3>
|
||||
<div className="AS">Mensuel (à la source)</div>
|
||||
<div className="indep">Annuel avec deux ans de décalage</div>
|
||||
<div className="auto">Mensuel ou trimestriel</div>
|
||||
|
||||
<div className="legend">Statuts juridiques</div>
|
||||
<h3 className="legend">
|
||||
Complémentaires retraite et santé déductibles
|
||||
</h3>
|
||||
<div className="AS">Oui (jusqu'à 50%)</div>
|
||||
<div className="indep">Oui (Loi Madelin)</div>
|
||||
<div className="auto">Non</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="legend">Information détaillés</h3>
|
||||
<div className="AS-indep-et-auto">
|
||||
<button
|
||||
onClick={() => setShowMore(true)}
|
||||
className="ui__ simple button">
|
||||
Voir plus
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<h3 className="legend">Statuts juridiques</h3>
|
||||
<div className="AS">SAS, SASU, SARL minoritaire</div>
|
||||
<div className="indep">EI, EURL, SARL majoritaire</div>
|
||||
<div className="auto">Micro-entreprise</div>
|
||||
|
||||
<button className="AS ui__ button">Choisir ce régime</button>
|
||||
<button className="indep ui__ button">Choisir ce régime</button>
|
||||
<button className="auto ui__ button">Choisir ce régime</button>
|
||||
{/* <h3className="legend" /> */}
|
||||
<button className="AS ui__ plain button">Choisir</button>
|
||||
<button className="indep ui__ button">Choisir</button>
|
||||
<button className="auto ui__ button">Choisir</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -225,7 +249,6 @@ export default (compose(
|
|||
connect(
|
||||
state => ({
|
||||
conversationStarted: state.conversationStarted,
|
||||
noUserInput: noUserInputSelector(state),
|
||||
...map(
|
||||
situationBranchName =>
|
||||
tryCatch(
|
||||
|
|
|
|||
Loading…
Reference in New Issue