Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New tab design Details #246

Merged
merged 11 commits into from
Jul 10, 2024
Merged

New tab design Details #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
73d32a6
Replaced average values component
IraSoro Jul 1, 2024
7ae19c9
First version of average values component
IraSoro Jul 1, 2024
92dc465
Added vertical line between average values
IraSoro Jul 2, 2024
2271f6e
Changed design of cycles length
IraSoro Jul 2, 2024
7bc34a2
Rewrote the code a bit
IraSoro Jul 2, 2024
9f4386f
Added more spaces
IraSoro Jul 6, 2024
461912e
Changed the text in AverageValues component
IraSoro Jul 7, 2024
f0bc969
Changed colors in the `AverageValues` component
IraSoro Jul 7, 2024
c53e8b5
Made more space
IraSoro Jul 7, 2024
526b1f7
Applied formatter
IraSoro Jul 7, 2024
3bdeb7d
Fixed the design when there is no history of period
IraSoro Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 54 additions & 19 deletions src/pages/TabDetails.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,68 @@
#progress-block {
width: 300px;
#width-details-screen {
max-width: 320px;

margin-left: auto;
margin-right: auto;
}

#general-block {
margin-top: 10px;
margin-bottom: 25px;
border-radius: 15px;
height: 90px;
width: 100%;
}

#inline-block {
width: 150px;
height: 70px;
border-radius: 20px;
}

display: flex;
flex-direction: column;
justify-content: center;
p.h_style-basic {
font-size: 22px;
color: var(--ion-color-dark-basic);
margin-top: 10px;
font-weight: bold;
}

#average-length {
width: 300px;
height: 75px;
border-radius: 20px;
p.h_style-dark {
font-size: 22px;
color: var(--ion-color-dark-dark);
margin-top: 10px;
font-weight: bold;
}

display: flex;
p.p_style {
font-size: 13px;
color: var(--ion-color-medium);
margin-top: 5px;
}

#inline-block {
width: 149px;
border-radius: 20px;
p.no-periods {
font-size: 13px;
text-align: center;
}

margin-left: 15px;
margin-right: 15px;
#vertical-line-basic {
width: 2px;
height: 70px;
margin-top: 5px;
background: #e2e3e7;
}

#vertical-line {
#vertical-line-dark {
width: 2px;
height: 55px;
background: var(--ion-color-light);
height: 70px;
margin-top: 5px;
background: #717274;
}

#progress-block {
width: 100%;
border-radius: 15px;

padding-top: 10px;
padding-bottom: 10px;
}

ion-progress-bar {
Expand Down
151 changes: 66 additions & 85 deletions src/pages/TabDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -102,27 +103,22 @@ const CurrentCycle = () => {
}, dayOfCycle);

return (
<div
id="progress-block"
style={{ background: `var(--ion-color-calendar-${theme})` }}
>
<div style={{ marginLeft: "15px" }}>
<IonLabel>
<p style={lenCycleStyle}>{title}</p>
</IonLabel>
<IonProgressBar
className={`current-progress-${theme}`}
style={progressBarStyle}
value={setProgressBar(
lengthOfPeriod > dayOfCycle ? dayOfCycle : lengthOfPeriod,
maxLength,
)}
buffer={setProgressBar(dayOfCycle, maxLength)}
/>
<IonLabel>
<p style={datesStyle}>{format(startDate, "MMMM d")}</p>
</IonLabel>
</div>
<div style={{ marginLeft: "15px" }}>
<IonLabel>
<p style={lenCycleStyle}>{title}</p>
</IonLabel>
<IonProgressBar
className={`current-progress-${theme}`}
style={progressBarStyle}
value={setProgressBar(
lengthOfPeriod > dayOfCycle ? dayOfCycle : lengthOfPeriod,
maxLength,
)}
buffer={setProgressBar(dayOfCycle, maxLength)}
/>
<IonLabel>
<p style={datesStyle}>{format(startDate, "MMMM d")}</p>
</IonLabel>
</div>
);
};
Expand All @@ -144,13 +140,7 @@ const ListProgress = () => {
const info = useInfoForOneCycle(props.idx + 1);

return (
<div
id="progress-block"
style={{
marginTop: "15px",
background: `var(--ion-color-calendar-${theme})`,
}}
>
<div style={{ marginTop: "20px" }}>
<div style={{ marginLeft: "15px" }}>
<IonLabel>
<p style={lenCycleStyle}>{info.lengthOfCycleString}</p>
Expand Down Expand Up @@ -184,9 +174,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);
Expand All @@ -202,18 +195,40 @@ const TabDetails = () => {
count: averageLengthOfPeriod,
})}`;

const p_style = {
fontSize: "12px" as const,
color: "var(--ion-color-light)" as const,
textAlign: "left" as const,
marginBottom: "5px" as const,
};
return (
<div
id="general-block"
style={{ background: `var(--ion-color-calendar-${theme})` }}
>
<IonCol>
<div id="inline-block">
<IonLabel className="average-value">
<p className={`h_style-${theme}`}>
{averageLengthOfCycle && cycles.length > 1
? lengthOfCycle
: "---"}
</p>
<p className="p_style">{t("Cycle length")}</p>
</IonLabel>
</div>
<div id={`vertical-line-${theme}`} />
<div id="inline-block">
<IonLabel className="average-value">
<p className={`h_style-${theme}`}>
{averageLengthOfPeriod ? lengthOfPeriod : "---"}
</p>
<p className="p_style">{t("Period length")}</p>
</IonLabel>
</div>
</IonCol>
</div>
);
};

const h_style = {
fontSize: "20px" as const,
color: "var(--ion-color-light)" as const,
textAlign: "left" as const,
};
const TabDetails = () => {
const { t } = useTranslation();
const cycles = useContext(CyclesContext).cycles;
const theme = useContext(ThemeContext).theme;

return (
<IonPage
Expand All @@ -227,57 +242,23 @@ const TabDetails = () => {
className="ion-padding"
color={`transparent-${theme}`}
>
<div id="context-size">
<IonCol>
<div
id="average-length"
style={{
marginBottom: "15px",
background: `var(--ion-color-less-dark-${theme})`,
}}
>
<IonCol>
<div
id="inline-block"
style={{
background: `var(--ion-color-less-dark-${theme})`,
}}
>
<IonLabel style={{ marginBottom: "10px" }}>
<p style={p_style}>{t("Cycle length")}</p>
<p style={h_style}>
{averageLengthOfCycle && cycles.length > 1
? lengthOfCycle
: "---"}
</p>
</IonLabel>
</div>
<div id="vertical-line" />
<div id="inline-block">
<IonLabel>
<p style={p_style}>{t("Period length")}</p>
<p style={h_style}>
{averageLengthOfPeriod ? lengthOfPeriod : "---"}
</p>
</IonLabel>
</div>
</IonCol>
</div>
</IonCol>
<IonCol>
<div id="width-details-screen">
<AverageValues cycles={cycles} />
<div
id="progress-block"
style={{ background: `var(--ion-color-calendar-${theme})` }}
>
{cycles.length > 0 ? (
<IonList>
<CurrentCycle />
{cycles.length > 1 && <ListProgress />}
</IonList>
) : (
<div id="progress-block">
<p style={{ fontSize: "13px" }}>
{t("You haven't marked any periods yet")}
</p>
</div>
<p className="no-periods">
{t("You haven't marked any periods yet")}
</p>
)}
</IonCol>
</div>
</div>
</IonContent>
</div>
Expand Down
Loading