diff --git a/components/Marathon/SignUp/EditSubMilestone.jsx b/components/Marathon/SignUp/EditSubMilestone.jsx
index acff0f83..87d02fd6 100644
--- a/components/Marathon/SignUp/EditSubMilestone.jsx
+++ b/components/Marathon/SignUp/EditSubMilestone.jsx
@@ -3,7 +3,6 @@ import styled from "@emotion/styled";
import {
Typography,
Box,
- Grid,
IconButton,
MenuItem,
Select,
@@ -33,6 +32,7 @@ const FixedLabel = styled(Typography)`
width: 20px;
flex-shrink: 0;
`;
+
const StyledContainer = styled(Box)`
display: flex;
flex-direction: row;
@@ -40,6 +40,24 @@ const StyledContainer = styled(Box)`
align-items: center;
gap: 10px;
width: 100%;
+ backgroundColor: #FFF;
+ padding: 12px 16px;
+ border-radius: 8px;
+ border: 1px solid #DBDBDB;
+
+ @media (max-width: 767px) {
+ display: grid;
+ grid-template-areas:
+ "content buttons"
+ "date date";
+ grid-template-columns: 1fr auto;
+ grid-template-rows: auto auto;
+ }
+
+ &:focus-within {
+ border: 1px solid #16B9B3;
+ padding: 12px 16px;
+ }
.content {
flex-grow: 1;
@@ -48,6 +66,11 @@ const StyledContainer = styled(Box)`
align-items: center;
justify-content: flex-start;
gap: 10px;
+ grid-area: content;
+ }
+ .weekdaySelector {
+ grid-area: date;
+
}
.buttons {
@@ -56,29 +79,7 @@ const StyledContainer = styled(Box)`
align-items: center;
justify-content: center;
gap: 10px;
- }
-`;
-
-const StyledButtonGroup = styled(Box)`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 10px;
-`;
-const StyledGridItem = styled(Grid)`
- background-color: #FFF;
- display: flex;
- padding: 12px 16px;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- align-self: stretch;
- border-radius: 8px;
-
- &:focus-within {
- border: 1px solid #16B9B3;
- padding: 11px 15px;
+ grid-area: buttons;
}
.title {
@@ -88,7 +89,12 @@ const StyledGridItem = styled(Grid)`
width: 100%;
justify-content: space-between;
flex-wrap: nowrap;
-
+ grid-area: title;
+ gap: 4px;
+ span {
+ margin-right: 4px;
+ flex-shrink: 0;
+ }
p {
color: #293A3D;
font-size: 14px;
@@ -96,8 +102,17 @@ const StyledGridItem = styled(Grid)`
font-weight: 400;
line-height: 140%;
}
- }
+ }
`;
+
+const StyledButtonGroup = styled(Box)`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+`;
+
const StyledWeekdaySelector = styled(Select)`
font-size: 12px;
font-style: normal;
@@ -109,7 +124,6 @@ const StyledWeekdaySelector = styled(Select)`
justify-content: flex-start;
width: 100%;
max-width: 150px;
- min-width: 56px;
gap: 8px;
padding: 0 0 0 0;
height: 100%;
@@ -128,6 +142,16 @@ const StyledWeekdaySelector = styled(Select)`
height: 16px;
fill: #92989A;
}
+ .MuiInputBase-input {
+ padding-right: 0 !important;
+ text-align: right;
+ }
+ @media (max-width: 767px) {
+ .MuiInputBase-input {
+ text-align: left;
+ max-width: 100%;
+ }
+ }
`;
const StyledInputBase = styled(InputBase)`
width: 100%;
@@ -247,8 +271,8 @@ export default function EditSubMilestone({
};
return (
-
-
+
+
{`${index + 1}.`}
-
-
- )} />
- )}
- renderValue={
- (selected) =>
- selected?.length ? selected
- .map((ISODate) => ISOToWeekday(ISODate))
- .filter(Boolean)
- .join(", ") : '自訂'
- }
- sx={{
- '.MuiSelect-icon': {
- display: 'none',
+
+
+ )} />
+ )}
+ renderValue={
+ (selected) =>
+ selected?.length ? selected
+ .map((ISODate) => ISOToWeekday(ISODate))
+ .filter(Boolean)
+ .join(", ") : '自訂'
+ }
+ sx={{
+ '.MuiSelect-icon': {
+ display: 'none',
+ },
+ }}
+ MenuProps={{
+ PaperProps: {
+ style: {
+ padding: '12px',
+ maxHeight: 150,
+ overflowY: 'auto',
+ scrollbarWidth: 'thin',
+ maxWidth: '140px'
},
- }}
- MenuProps={{
- PaperProps: {
- style: {
- padding: '12px',
- maxHeight: 150,
- overflowY: 'auto',
- scrollbarWidth: 'thin',
- maxWidth: '140px'
- },
- },
- MenuListProps: {
- style: {
- padding: '0'
- }
+ },
+ MenuListProps: {
+ style: {
+ padding: '0'
}
- }}
- >
- {ZH_WEEK_DAY_MAP.map((zhDay) => {
- const isSelected = newMilestone.dates.includes(weekdayToISO(zhDay));
- return (
-
- {zhDay}
-
- );
- })}
-
+ }
+ }}
+ >
+ {ZH_WEEK_DAY_MAP.map((zhDay) => {
+ const isSelected = newMilestone.dates.includes(weekdayToISO(zhDay));
+ return (
+
+ {zhDay}
+
+ );
+ })}
+
+
-
-
-
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/components/Marathon/SignUp/MilestoneGroup.jsx b/components/Marathon/SignUp/MilestoneGroup.jsx
index b32d6bd1..cb16cb07 100644
--- a/components/Marathon/SignUp/MilestoneGroup.jsx
+++ b/components/Marathon/SignUp/MilestoneGroup.jsx
@@ -1,5 +1,6 @@
import { v4 as uuidv4 } from 'uuid';
import { useState, useEffect } from "react";
+import styled from '@emotion/styled';
import {
Box,
Grid,
@@ -15,6 +16,29 @@ import { StyledGroup } from "./Edit.styled";
import MilestonePanel from "./MilestonePanel";
import ErrorMessage from './ErrorMessage';
+const StyledDateSection = styled(Box)`
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ width: 100%;
+ gap: 10px;
+
+ .startDate, .endDate, .frequency {
+ flex-shrink: 0;
+ width: 25%;
+ }
+
+ @media (max-width: 767px) {
+ flex-wrap: wrap;
+ .startDate, .endDate {
+ width: calc(50% - 5px);
+ }
+ .frequency {
+ width: 100%;
+ }
+ }
+`;
+
export default function MilestoneGroup({
milestones = [],
onChange = null,
@@ -159,77 +183,75 @@ export default function MilestoneGroup({
-
-
- (
-
- )}
- />
-
-
- (
-
- )}
- />
-
-
-
-
-
-
-
-
+
+ (
+
+ )}
+ />
+
+ (
+
+ )}
+ />
+
+
+
+
+
{milestones.map((milestone, i) => {