Skip to content

Commit 034ac0a

Browse files
author
Alexandra Zwinger
committed
Make it more responsive !!!
1 parent 4ddafe6 commit 034ac0a

File tree

3 files changed

+135
-110
lines changed

3 files changed

+135
-110
lines changed

‎src/form/MeetingForm.tsx‎

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
105105
"& .MuiPaper-root": {
106106
width: "100%",
107107
maxWidth: "50vw",
108-
minWidth: "250px",
108+
minWidth: "300px",
109109
bgcolor: "#1C212C",
110110
padding: "8px",
111111
},
@@ -116,15 +116,15 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
116116
</DialogTitle>
117117

118118
<DialogContent>
119-
<form onSubmit={() => {
119+
<form className={"overflow-x-hidden"} onSubmit={() => {
120120
}}>
121121
<label htmlFor="meeting-title" className="font-semibold block text-lg text-white">Titel /
122122
Fach</label>
123123
<input
124124
id="meeting-title"
125125
type="text"
126-
placeholder="Hier Titel oder Fach eingeben"
127-
className="mx-5 mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
126+
placeholder="Titel oder Fach"
127+
className="mx-5 mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-10 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
128128
value={meetingTitle}
129129
onChange={(e) => setMeetingTitle(e.target.value)}
130130
/>
@@ -134,7 +134,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
134134
<textarea
135135
id="meeting-description"
136136
placeholder="Hier könnte Ihre Beschreibung stehen"
137-
className="ml-5 mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-2 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs placeholder:pl-3 pl-4 py-2"
137+
className="ml-5 mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-10 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs placeholder:py-1 py-2"
138138
value={meetingDescription}
139139
onChange={(e) => setMeetingDescription(e.target.value)}
140140
/>
@@ -147,10 +147,11 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
147147
adapterLocale="de"
148148
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
149149
>
150-
<div className={"ml-5 flex-row flex mt-2 w-80 items-center gap-2"}>
150+
<div className={"ml-5 flex-row flex mt-2 w-80 items-center gap-2 md:mb-0 mb-8"}>
151151

152152
<label htmlFor="From"
153153
className="mr-2 block text-bs font-medium text-white text-center">Von</label>
154+
<div className="flex md:flex-row flex-col gap-2">
154155
<DatePicker
155156
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
156157
sx={{
@@ -192,6 +193,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
192193
}
193194
}}
194195
ampm={false} format="HH:mm" value={time1} onChange={handleTime1Change}/>
196+
</div>
195197
</div>
196198
</LocalizationProvider>
197199

@@ -200,50 +202,52 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
200202
adapterLocale="de"
201203
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
202204
>
203-
<div className={"ml-5 flex-row mt-4 flex w-80 h-12 items-center gap-2"}>
205+
<div className={"ml-5 flex-row mt-4 flex w-80 h-12 items-center gap-2 md:mb-0 mb-8"}>
204206
<label htmlFor="To"
205207
className="mr-3 block text-bs font-medium text-white ">Bis</label>
206-
<DatePicker
207-
sx={{
208-
'& .MuiIconButton-root': {
209-
color: '#9fa3a8',
210-
},
211-
}}
212-
minDate={dayjs()}
213-
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
214-
slotProps={{
215-
textField: {
216-
size: 'small', variant: 'standard', InputProps: {
217-
disableUnderline: true,
218-
sx: {
219-
paddingLeft: '8px',
220-
paddingRight: '8px',
221-
color: '#e2e8f0',
222-
}
208+
<div className="flex md:flex-row flex-col gap-2 ">
209+
<DatePicker
210+
sx={{
211+
'& .MuiIconButton-root': {
212+
color: '#9fa3a8',
223213
},
224-
}
225-
}}
226-
format="DD.MM.YYYY" defaultValue={date2} value={date2} onChange={handleDate2Change}/>
227-
<TimePicker
228-
sx={{
229-
'& .MuiIconButton-root': {
230-
color: '#9fa3a8',
231-
},
232-
}}
233-
className="mt-1 block bg-[#333C4F] w-24 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
234-
slotProps={{
235-
textField: {
236-
size: 'small', variant: 'standard', InputProps: {
237-
disableUnderline: true,
238-
sx: {
239-
paddingLeft: '8px',
240-
paddingRight: '8px',
241-
color: '#e2e8f0',
242-
}
214+
}}
215+
minDate={dayjs()}
216+
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
217+
slotProps={{
218+
textField: {
219+
size: 'small', variant: 'standard', InputProps: {
220+
disableUnderline: true,
221+
sx: {
222+
paddingLeft: '8px',
223+
paddingRight: '8px',
224+
color: '#e2e8f0',
225+
}
226+
},
227+
}
228+
}}
229+
format="DD.MM.YYYY" defaultValue={date2} value={date2} onChange={handleDate2Change}/>
230+
<TimePicker
231+
sx={{
232+
'& .MuiIconButton-root': {
233+
color: '#9fa3a8',
243234
},
244-
}
245-
}}
246-
ampm={false} format="HH:mm" value={time2} onChange={handleTime2Change}/>
235+
}}
236+
className="mt-1 block bg-[#333C4F] w-24 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
237+
slotProps={{
238+
textField: {
239+
size: 'small', variant: 'standard', InputProps: {
240+
disableUnderline: true,
241+
sx: {
242+
paddingLeft: '8px',
243+
paddingRight: '8px',
244+
color: '#e2e8f0',
245+
}
246+
},
247+
}
248+
}}
249+
ampm={false} format="HH:mm" value={time2} onChange={handleTime2Change}/>
250+
</div>
247251
</div>
248252
</LocalizationProvider>
249253
<div className={"ml-5 flex-row mt-1 flex h-12 items-center gap-2"}>
@@ -270,8 +274,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
270274
<input
271275
id="room"
272276
type="text"
273-
placeholder="Format: XX.129"
274-
className="ml-5 mt-1 text-gray-300 block bg-[#333C4F] w-1/3 px-2 py-1 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-550 placeholder:text-xs"
277+
className="ml-5 mt-1 text-gray-300 block bg-[#333C4F] w-2/3 px-10 py-1 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-550 placeholder:text-xs"
275278
value={meetingRoom}
276279
onChange={(e) => setMeetingRoom(e.target.value)}
277280
/>

‎src/pages/CalendarPage.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,12 @@ export default function CalenderPage() {
1717

1818
return (
1919
<>
20-
<div className={"flex flex-row justify-end my-4 mx-8 h-10"}>
21-
<CuteButton bgColor={"#598BB1"} textColor={"#ffffff"} text={"Termin eintragen"} classname={"md:text-xl sm:text-lg tex-sm"}
20+
<div className={"flex flex-row gap-4 justify-end my-4 md:mx-8 h-10"}>
21+
<CuteButton bgColor={"#598BB1"} textColor={"#ffffff"} text={"Termin eintragen"} classname={"md:text-xl sm:text-base text-sm"}
2222
onClick={openMeetingForm}/>
23+
<CuteButton bgColor={"#56A095"} textColor={"#e8fcf6"} classname={"md:text-xl sm:text-base text-sm"}
24+
text={"Finde ein Meeting"} onClick={() => {
25+
}}/>
2326
</div>
2427
<MeetingForm open={isDialogOpen} onClose={closeMeetingForm}/>
2528
<div className="flex overflow-hidden flex-col justify-center sm:mx-10 mx-3">

0 commit comments

Comments
 (0)