diff --git a/src/components/Action/ActionBegin/actionBegin.scss b/src/components/Action/ActionBegin/actionBegin.scss
index 36f0ca97ff68e2ce8b7532a227d8643b709b8abc..f43c66285b2b55829bbd8d225d7f53b54274567b 100644
--- a/src/components/Action/ActionBegin/actionBegin.scss
+++ b/src/components/Action/ActionBegin/actionBegin.scss
@@ -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;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index e0c7c02d7bc93a9d8d0bb79f6286f62879a5b475..9d4ede330879fbfef11f774f43fe5d5c4f974650 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -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>
+ </>
)}
</>
)}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 2eb6eab658f91cabdb7560f83b1debfc62a9f673..a325dcfbc3ac7c0e6f8ca3d5b769140546602c52 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -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;
-}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 80bc7cd3771049bbc40773786a115ea63df3569f..3f01eb6b2a5d8e56f896fe40db0c594eadaea908 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -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;
+ }
}
}
diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss
index 8cb5481971e6fc83c49d89160890c19a7a36eefd..b4e493995f710e64e8ce03ad01c14c027ab1f885 100644
--- a/src/styles/base/_breakpoint.scss
+++ b/src/styles/base/_breakpoint.scss
@@ -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})';