From 73d32a69d9fd551d06e90f7e4d9bdc58b1bbea54 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Mon, 1 Jul 2024 22:41:20 +0400 Subject: [PATCH 01/11] Replaced average values component --- src/pages/TabDetails.css | 8 +++- src/pages/TabDetails.tsx | 83 ++++++++++++++++++++++------------------ 2 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 1314fad..7a5f231 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -11,17 +11,21 @@ #average-length { width: 300px; height: 75px; - border-radius: 20px; + border-radius: 15px; display: flex; } #inline-block { width: 149px; - border-radius: 20px; + border-radius: 15px; margin-left: 15px; margin-right: 15px; + + display: flex; + flex-direction: column; + justify-content: center; } #vertical-line { diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 350b7f0..a4b71bd 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -17,6 +17,7 @@ import { getLastStartDate, } from "../state/CalculationLogics"; import { CyclesContext, ThemeContext } from "../state/Context"; +import { Cycle } from "../data/ClassCycle"; import { format } from "../utils/datetime"; import "./TabDetails.css"; @@ -184,9 +185,12 @@ const ListProgress = () => { return <>{list}; }; -const TabDetails = () => { +interface AverageValuesProps { + cycles: Cycle[]; +} + +const AverageValues = ({ cycles }: AverageValuesProps) => { const { t } = useTranslation(); - const cycles = useContext(CyclesContext).cycles; const theme = useContext(ThemeContext).theme; const averageLengthOfCycle = getAverageLengthOfCycle(cycles); @@ -215,6 +219,44 @@ const TabDetails = () => { textAlign: "left" as const, }; + return ( +
+ +
+ +

+ {averageLengthOfCycle && cycles.length > 1 + ? lengthOfCycle + : "---"} +

+

{t("Cycle")}

+ +
+
+ +

+ {averageLengthOfPeriod ? lengthOfPeriod : "---"} +

+

{t("Menstruation")}

+ +
+ +
+ ); +}; + +const TabDetails = () => { + const { t } = useTranslation(); + const cycles = useContext(CyclesContext).cycles; + const theme = useContext(ThemeContext).theme; + return ( { className="ion-padding" color={`transparent-${theme}`} > -
+
-
- -
- -

{t("Cycle length")}

-

- {averageLengthOfCycle && cycles.length > 1 - ? lengthOfCycle - : "---"} -

- -
-
-
- -

{t("Period length")}

-

- {averageLengthOfPeriod ? lengthOfPeriod : "---"} -

- -
- -
+ {cycles.length > 0 ? ( From 7ae19c9d38279771318eb93f5c9048f8d3c0cb17 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Tue, 2 Jul 2024 00:01:07 +0400 Subject: [PATCH 02/11] First version of average values component --- src/pages/TabDetails.css | 37 +++++++++++++++++-------------------- src/pages/TabDetails.tsx | 16 +++++++++++++--- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 7a5f231..9d9ff39 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -1,39 +1,36 @@ -#progress-block { - width: 300px; - height: 70px; - border-radius: 20px; +#inline-block { + width: 149px; display: flex; flex-direction: column; justify-content: center; + align-items: center; } -#average-length { - width: 300px; - height: 75px; - border-radius: 15px; - +ion-label.average-value { + align-items: center; display: flex; + flex-direction: column; } -#inline-block { - width: 149px; - border-radius: 15px; +ion-label.average-values-title{ + display: flex; - margin-left: 15px; - margin-right: 15px; + padding-left: 10px; + padding-top: 5px; + padding-bottom: 10px; +} + +#progress-block { + width: 300px; + height: 70px; + border-radius: 20px; display: flex; flex-direction: column; justify-content: center; } -#vertical-line { - width: 2px; - height: 55px; - background: var(--ion-color-light); -} - ion-progress-bar { height: 8px; border-radius: 20px; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index a4b71bd..5f0347a 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -221,16 +221,26 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { return (
+ + Average values +
- +

{averageLengthOfCycle && cycles.length > 1 ? lengthOfCycle @@ -240,7 +250,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => {

- +

{averageLengthOfPeriod ? lengthOfPeriod : "---"}

From 92dc465fac58559353dccc8b4b77c8046d8ecbcc Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Tue, 2 Jul 2024 12:38:20 +0400 Subject: [PATCH 03/11] Added vertical line between average values --- src/pages/TabDetails.css | 9 +++++++++ src/pages/TabDetails.tsx | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 9d9ff39..ab9c6b7 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -7,6 +7,12 @@ align-items: center; } +#vertical-line { + width: 2px; + height: 40px; + background: var(--ion-color-light); +} + ion-label.average-value { align-items: center; display: flex; @@ -15,6 +21,9 @@ ion-label.average-value { ion-label.average-values-title{ display: flex; + flex-direction: column; + justify-content: center; + align-items: center; padding-left: 10px; padding-top: 5px; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 5f0347a..ff1d032 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -224,7 +224,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { style={{ marginBottom: "15px", borderRadius: "14px", - width: "300px", + width: "320px", height: "90px", background: `var(--ion-color-less-dark-${theme})`, }} @@ -249,6 +249,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => {

{t("Cycle")}
+

From 2271f6eed60fe8ca2e786a99b440eae2b071a3fa Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Tue, 2 Jul 2024 14:08:22 +0400 Subject: [PATCH 04/11] Changed design of cycles length --- src/pages/TabDetails.css | 8 ++--- src/pages/TabDetails.tsx | 77 ++++++++++++++++++---------------------- 2 files changed, 39 insertions(+), 46 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index ab9c6b7..7dd3a58 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -1,5 +1,5 @@ #inline-block { - width: 149px; + width: 150px; display: flex; flex-direction: column; @@ -31,9 +31,9 @@ ion-label.average-values-title{ } #progress-block { - width: 300px; - height: 70px; - border-radius: 20px; + max-width: 320px; + width: 100%; + border-radius: 15px; display: flex; flex-direction: column; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index ff1d032..9fbaed1 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -103,27 +103,22 @@ const CurrentCycle = () => { }, dayOfCycle); return ( -

-
- -

{title}

- - dayOfCycle ? dayOfCycle : lengthOfPeriod, - maxLength, - )} - buffer={setProgressBar(dayOfCycle, maxLength)} - /> - -

{format(startDate, "MMMM d")}

- -
+
+ +

{title}

+ + dayOfCycle ? dayOfCycle : lengthOfPeriod, + maxLength, + )} + buffer={setProgressBar(dayOfCycle, maxLength)} + /> + +

{format(startDate, "MMMM d")}

+
); }; @@ -145,13 +140,7 @@ const ListProgress = () => { const info = useInfoForOneCycle(props.idx + 1); return ( -
+

{info.lengthOfCycleString}

@@ -223,8 +212,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => {
{ - {cycles.length > 0 ? ( - - - {cycles.length > 1 && } - - ) : ( -
-

- {t("You haven't marked any periods yet")} -

-
- )} +
+ {cycles.length > 0 ? ( + + + {cycles.length > 1 && } + + ) : ( +
+

+ {t("You haven't marked any periods yet")} +

+
+ )} +
From 7bc34a232ad7876b46efca2e7b7b7d55d59ac40e Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Tue, 2 Jul 2024 14:59:27 +0400 Subject: [PATCH 05/11] Rewrote the code a bit --- src/pages/TabDetails.css | 37 +++++++++++++++--- src/pages/TabDetails.tsx | 81 +++++++++++++--------------------------- 2 files changed, 57 insertions(+), 61 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 7dd3a58..b83bdcd 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -1,3 +1,17 @@ +#width-details-screen{ + max-width: 320px; + + margin-left: auto; + margin-right: auto; +} + +#general-block { + margin-bottom: 15px; + border-radius: 15px; + height: 90px; + width: 100%; +} + #inline-block { width: 150px; @@ -19,7 +33,10 @@ ion-label.average-value { flex-direction: column; } -ion-label.average-values-title{ +ion-label.average-values-title { + font-size: 17px; + color: var(--ion-color-light); + display: flex; flex-direction: column; justify-content: center; @@ -31,13 +48,8 @@ ion-label.average-values-title{ } #progress-block { - max-width: 320px; width: 100%; border-radius: 15px; - - display: flex; - flex-direction: column; - justify-content: center; } ion-progress-bar { @@ -45,6 +57,19 @@ ion-progress-bar { border-radius: 20px; } +p.p_style { + font-size: 12px; + color: var(--ion-color-light); + text-align: left; + margin-bottom: 5px; +} + +p.h_style { + font-size: 20px; + color: var(--ion-color-light); + text-align: left; +} + ion-progress-bar.current-progress-basic, ion-progress-bar.current-progress-dark { height: 8px; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 9fbaed1..862bcd7 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -195,55 +195,30 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { count: averageLengthOfPeriod, })}`; - const p_style = { - fontSize: "12px" as const, - color: "var(--ion-color-light)" as const, - textAlign: "left" as const, - marginBottom: "5px" as const, - }; - - const h_style = { - fontSize: "20px" as const, - color: "var(--ion-color-light)" as const, - textAlign: "left" as const, - }; - return (
- - Average values - + Average values
-

+

{averageLengthOfCycle && cycles.length > 1 ? lengthOfCycle : "---"}

-

{t("Cycle")}

+

{t("Cycle")}
-

+

{averageLengthOfPeriod ? lengthOfPeriod : "---"}

-

{t("Menstruation")}

+

{t("Menstruation")}
@@ -268,29 +243,25 @@ const TabDetails = () => { className="ion-padding" color={`transparent-${theme}`} > -
- - - - -
- {cycles.length > 0 ? ( - - - {cycles.length > 1 && } - - ) : ( -
-

- {t("You haven't marked any periods yet")} -

-
- )} -
- +
+ +
+ {cycles.length > 0 ? ( + + + {cycles.length > 1 && } + + ) : ( +
+

+ {t("You haven't marked any periods yet")} +

+
+ )} +
From 9f4386faf6ab492165354cf819616957eb2b9314 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Sat, 6 Jul 2024 22:49:13 +0400 Subject: [PATCH 06/11] Added more spaces --- src/pages/TabDetails.css | 3 +++ src/pages/TabDetails.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index b83bdcd..9ce7961 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -50,6 +50,9 @@ ion-label.average-values-title { #progress-block { width: 100%; border-radius: 15px; + + padding-top: 10px; + padding-bottom: 10px; } ion-progress-bar { diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 862bcd7..35c8e09 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -140,7 +140,7 @@ const ListProgress = () => { const info = useInfoForOneCycle(props.idx + 1); return ( -
+

{info.lengthOfCycleString}

From 461912e53fdd6081631015f531c762a7e7d8ece4 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Sun, 7 Jul 2024 13:37:16 +0400 Subject: [PATCH 07/11] Changed the text in AverageValues component --- src/pages/TabDetails.css | 52 +++++++++++----------------------------- src/pages/TabDetails.tsx | 5 ++-- 2 files changed, 16 insertions(+), 41 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 9ce7961..9befc67 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -14,37 +14,26 @@ #inline-block { width: 150px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + height: 70px; } -#vertical-line { - width: 2px; - height: 40px; - background: var(--ion-color-light); -} - -ion-label.average-value { - align-items: center; - display: flex; - flex-direction: column; +p.h_style { + font-size: 20px; + color: var(--ion-color-light); + margin-top: 10px; } -ion-label.average-values-title { - font-size: 17px; +p.p_style { + font-size: 12px; color: var(--ion-color-light); + margin-top: 5px; +} - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - padding-left: 10px; - padding-top: 5px; - padding-bottom: 10px; +#vertical-line { + width: 2px; + height: 70px; + margin-top: 5px; + background: var(--ion-color-light); } #progress-block { @@ -60,19 +49,6 @@ ion-progress-bar { border-radius: 20px; } -p.p_style { - font-size: 12px; - color: var(--ion-color-light); - text-align: left; - margin-bottom: 5px; -} - -p.h_style { - font-size: 20px; - color: var(--ion-color-light); - text-align: left; -} - ion-progress-bar.current-progress-basic, ion-progress-bar.current-progress-dark { height: 8px; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 35c8e09..139e758 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -200,7 +200,6 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { id="general-block" style={{ background: `var(--ion-color-less-dark-${theme})` }} > - Average values
@@ -209,7 +208,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { ? lengthOfCycle : "---"}

-

{t("Cycle")}

+

{t("Cycle length")}
@@ -218,7 +217,7 @@ const AverageValues = ({ cycles }: AverageValuesProps) => {

{averageLengthOfPeriod ? lengthOfPeriod : "---"}

-

{t("Menstruation")}

+

{t("Period length")}

 From f0bc969ac50e947cd93394adda3a1e604d9c48b8 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Sun, 7 Jul 2024 15:55:08 +0400 Subject: [PATCH 08/11] Changed colors in the `AverageValues` component --- src/pages/TabDetails.css | 29 ++++++++++++++++++++++------- src/pages/TabDetails.tsx | 8 ++++---- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 9befc67..73b3ad7 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -17,23 +17,38 @@ height: 70px; } -p.h_style { - font-size: 20px; - color: var(--ion-color-light); +p.h_style-basic { + font-size: 22px; + color: var(--ion-color-dark-basic); margin-top: 10px; + font-weight: bold; +} + +p.h_style-dark { + font-size: 22px; + color: var(--ion-color-dark-dark); + margin-top: 10px; + font-weight: bold; } p.p_style { - font-size: 12px; - color: var(--ion-color-light); + font-size: 13px; + color: var(--ion-color-medium); + margin-top: 5px; +} + +#vertical-line-basic { + width: 2px; + height: 70px; margin-top: 5px; + background: #e2e3e7; } -#vertical-line { +#vertical-line-dark { width: 2px; height: 70px; margin-top: 5px; - background: var(--ion-color-light); + background: #717274; } #progress-block { diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 139e758..8bf0788 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -198,12 +198,12 @@ const AverageValues = ({ cycles }: AverageValuesProps) => { return (
-

+

{averageLengthOfCycle && cycles.length > 1 ? lengthOfCycle : "---"} @@ -211,10 +211,10 @@ const AverageValues = ({ cycles }: AverageValuesProps) => {

{t("Cycle length")}
-
+
-

+

{averageLengthOfPeriod ? lengthOfPeriod : "---"}

{t("Period length")}

From c53e8b5a41e7562b5e88b4d72edf0e54a190ceb6 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Sun, 7 Jul 2024 16:02:12 +0400 Subject: [PATCH 09/11] Made more space --- src/pages/TabDetails.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 73b3ad7..0c54e48 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -6,7 +6,8 @@ } #general-block { - margin-bottom: 15px; + margin-top: 10px; + margin-bottom: 25px; border-radius: 15px; height: 90px; width: 100%; From 526b1f7735cf8595bde44001b64064bc74b4d1d3 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Sun, 7 Jul 2024 20:03:57 +0400 Subject: [PATCH 10/11] Applied formatter --- src/pages/TabDetails.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 0c54e48..81752c7 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -1,4 +1,4 @@ -#width-details-screen{ +#width-details-screen { max-width: 320px; margin-left: auto; From 3bdeb7d7c7f4283c89b5b59fb90e27c2da58d7f5 Mon Sep 17 00:00:00 2001 From: Irina Sorokina Date: Mon, 8 Jul 2024 00:36:31 +0400 Subject: [PATCH 11/11] Fixed the design when there is no history of period --- src/pages/TabDetails.css | 5 +++++ src/pages/TabDetails.tsx | 8 +++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css index 81752c7..14b8a79 100644 --- a/src/pages/TabDetails.css +++ b/src/pages/TabDetails.css @@ -38,6 +38,11 @@ p.p_style { margin-top: 5px; } +p.no-periods { + font-size: 13px; + text-align: center; +} + #vertical-line-basic { width: 2px; height: 70px; diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx index 8bf0788..bd6519a 100644 --- a/src/pages/TabDetails.tsx +++ b/src/pages/TabDetails.tsx @@ -254,11 +254,9 @@ const TabDetails = () => { {cycles.length > 1 && } ) : ( -
-

- {t("You haven't marked any periods yet")} -

-
+

+ {t("You haven't marked any periods yet")} +

)}