Skip to content
Snippets Groups Projects
Commit ec2a8b85 authored by Pierre Ecarlat's avatar Pierre Ecarlat
Browse files

fix(a11y): Adapt to small screens 320x256

parent 58df7fd4
No related branches found
No related tags found
2 merge requests!12413.1 Release,!1209fix(a11y): Adapt to small screens 320x256
......@@ -25,7 +25,6 @@
background: $grey-linear-gradient-background;
height: auto;
gap: 1.5rem;
max-height: 63svh;
text-align: center;
position: relative;
padding: 5rem 1rem 1rem 1rem;
......
......@@ -197,94 +197,100 @@ const ElecHalfHourMonthlyAnalysis = ({
<>
{getPowerChart()}
{enedisAnalysisValues && isDataFullyComplete(monthDataloads) && (
<div className="min-max">
<div className="container">
<StyledIcon
icon={MaxPowerIcon}
size={40}
className="minIcon"
/>
<div className="text">
<div className="min text-18-normal">
{t('special_elec.maxPower')}
</div>
</div>
<div className="value kvAval">
{enedisAnalysisValues.maxPower !== 0 &&
enedisAnalysisValues.maxPower !== null ? (
<div className="text-18-bold">
{enedisAnalysisValues.maxPower.toFixed(1)}
<span className="text-18-normal"> kVA</span>
</div>
) : (
<span>----</span>
)}
</div>
</div>
{enedisAnalysisValues?.offPeakHoursRatio != null && (
<>
<div className="elec-infos">
<div className="container">
<StyledIcon
icon={OffPeakHourIcon}
icon={MaxPowerIcon}
size={40}
className="minIcon"
/>
<div className="text">
<div className="min text-18-normal">
{t('special_elec.offPeakHour')}
</div>
</div>
<div className="value kvAval">
<div className="text-18-bold">
{Math.round(
enedisAnalysisValues.offPeakHoursRatio * 100
<div className="text text-18-normal">
<div className="row">
{t('special_elec.maxPower')}
{enedisAnalysisValues.maxPower !== 0 &&
enedisAnalysisValues.maxPower !== null ? (
<div className="value">
<div className="text-18-bold">
{enedisAnalysisValues.maxPower.toFixed(1)}
</div>
<span> kVA</span>
</div>
) : (
<span>----</span>
)}
<span className="text-18-normal"> %</span>
</div>
</div>
</div>
)}
<div className="container consomin">
<StyledIcon icon={MinIcon} size={40} className="minIcon" />
<div className="text text-18-normal">
{enedisAnalysisValues.minimumLoad !== 0 &&
enedisAnalysisValues.minimumLoad !== null ? (
<>
{enedisAnalysisValues?.offPeakHoursRatio != null && (
<div className="container">
<StyledIcon
icon={OffPeakHourIcon}
size={40}
className="minIcon"
/>
<div className="text text-18-normal">
<div className="row">
<div>{t('special_elec.min')}</div>
<div>
{t('special_elec.offPeakHour')}
<div className="value">
<span className="text-18-bold">
{enedisAnalysisValues.minimumLoad.toFixed(1)}
</span>
<span> kWh</span>
</div>
</div>
<div className="row">
<div>{t('special_elec.percentage')}</div>
<div>
<span className="text-18-bold">
{facturePercentage?.toFixed(0) || '---'}
{Math.round(
enedisAnalysisValues.offPeakHoursRatio * 100
)}
</span>
<span> %</span>
</div>
</div>
<div className="row">
<div>{t('special_elec.price')}</div>
<div>
<span className="text-18-bold">
{elecPrice?.price
? (
enedisAnalysisValues.minimumLoad *
elecPrice.price
).toFixed(1)
: '---'}
</span>
<span></span>
</div>
</div>
)}
<div className="container">
<StyledIcon
icon={MinIcon}
size={40}
className="minIcon"
/>
<div className="text text-18-normal">
{enedisAnalysisValues.minimumLoad !== 0 &&
enedisAnalysisValues.minimumLoad !== null ? (
<>
<div className="row">
<div>{t('special_elec.min')}</div>
<div className="value">
<span className="text-18-bold">
{enedisAnalysisValues.minimumLoad.toFixed(1)}
</span>
<span> kWh</span>
</div>
</div>
</div>
</>
) : (
<span>----</span>
)}
<div className="row">
<div>{t('special_elec.percentage')}</div>
<div className="value">
<span className="text-18-bold">
{facturePercentage?.toFixed(0) || '---'}
</span>
<span> %</span>
</div>
</div>
<div className="row">
<div>{t('special_elec.price')}</div>
<div className="value">
<span className="text-18-bold">
{elecPrice?.price
? (
enedisAnalysisValues.minimumLoad *
elecPrice.price
).toFixed(1)
: '---'}
</span>
<span></span>
</div>
</div>
</>
) : (
<span>----</span>
)}
</div>
</div>
</div>
......@@ -294,7 +300,7 @@ const ElecHalfHourMonthlyAnalysis = ({
>
{t('special_elec.showModal')}
</Button>
</div>
</>
)}
</>
)}
......
......@@ -2,6 +2,9 @@
.special-elec-container {
color: white;
display: flex;
flex-direction: column;
gap: 16px;
.elec-icon {
margin: auto;
......@@ -9,7 +12,6 @@
}
.title {
text-align: center;
margin-top: 1rem;
color: $grey-bright;
}
.navigator {
......@@ -18,7 +20,6 @@
align-items: center;
width: 100%;
text-align: center;
margin: 1rem 0;
.text-1 {
color: $grey-bright;
}
......@@ -35,47 +36,38 @@
.activation-text {
margin: 1rem 0 0.7rem 0;
}
.oauthform-button-content {
display: flex;
padding: 0.5rem;
}
.oauthform-button-text {
text-align: left;
margin-left: 1rem;
}
.container {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid $grey-bright;
border-radius: 10px;
.elec-infos {
display: flex;
flex-direction: column;
gap: 8px;
.min {
max-width: 150px;
}
.text {
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 1rem;
border: 1px solid $soft-grey;
border-radius: 10px;
.min {
max-width: 150px;
}
.text {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.row {
display: flex;
justify-content: space-between;
margin: auto 0;
}
.value {
display: flex;
gap: 4px;
margin: auto 0;
}
}
.value {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: self-end;
min-width: 80px;
justify-content: space-between;
}
.kvAval {
margin: auto 0 auto auto;
}
}
.consomin {
min-height: 100px;
}
.no_data {
text-align: center;
......@@ -86,7 +78,3 @@
margin: auto;
}
}
.graph-elec-half-hour {
height: 12rem;
margin-top: 2rem;
}
......@@ -4,20 +4,25 @@
.eg-selection-detail-container {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
color: $grey-bright;
padding: 0 1.5rem;
flex: 1;
max-height: calc(100vh - 60px - 72px - 0px);
padding: 0 1rem;
height: 100vh;
max-height: calc(100vh - 0px - 72px - 72px - 14px);
overflow-y: auto;
@media #{$tablet} {
max-height: calc(100vh - 60px - 72px - 72px - 14px);
}
@media #{$large-phone} {
max-height: calc(100vh - 60px - 72px - 0px - 14px);
}
.content {
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
align-items: center;
overflow-y: auto;
flex: 1;
.title {
color: $soft-grey;
......@@ -48,12 +53,12 @@
}
.buttons {
margin: 1rem 0;
padding: 1rem 0;
display: flex;
gap: 0.5rem;
flex-direction: row;
justify-content: center;
width: 100%;
background-color: $default-background;
button.btnSecondary {
padding: 0.75rem 0.25rem;
......@@ -64,5 +69,10 @@
flex-direction: column;
}
}
@media (min-height: $height-small-phone) {
position: sticky;
bottom: 0;
}
}
}
......@@ -5,6 +5,8 @@ $width-tablet: 1023px;
$width-desktop: 1200px;
$width-large-desktop: 1201px;
$height-small-phone: 667px;
$small-phone: 'only screen and (max-width : #{$width-small-phone})';
$phone: 'only screen and (max-width : #{$width-phone})';
$large-phone: 'only screen and (max-width : #{$width-large-phone})';
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment