Skip to content

Commit bd551b3

Browse files
dariuszwisniewskidariuszwisniewski
committed
Update sidebard component styling to open/close properly with width adjustment, center calendars, change time registration component styling
1 parent 684ebfe commit bd551b3

File tree

9 files changed

+82
-93
lines changed

9 files changed

+82
-93
lines changed

‎view.react/src/components/dashboard-calendar/DashboardCalendar.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,8 @@ export const DashboardCalendar = () => {
182182
};
183183

184184
return (
185-
<>
186-
<div className={styles.filterSection}>
185+
<div className="d-flex flex-column">
186+
<div className={`${styles.filterSection} d-flex flex-row justify-content-center`}>
187187
<div className={styles.filter}>
188188
<Select
189189
className={styles.selection}
@@ -219,7 +219,7 @@ export const DashboardCalendar = () => {
219219
</div>
220220
</div>
221221

222-
<div className={styles.calendarWrapper}>
222+
<div className={` ${styles.calendarWrapper} d-flex flex-row justify-content-center`}>
223223
<Calendar
224224
locale={pl}
225225
onChange={(item) => handleDateChange(item)}
@@ -249,6 +249,6 @@ export const DashboardCalendar = () => {
249249
"userName")}
250250
/>
251251
}
252-
</>
252+
</div>
253253
);
254254
};

‎view.react/src/components/dashboard-calendar/DashboardCalendar.module.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
.rdrSelected + .rdrDayNumber {
4242
color: transparent;
4343
}
44-
44+
4545
&:hover {
4646
border: 1px solid #78A612;
4747
transition: all 0.6s ease-in-out;
@@ -225,8 +225,6 @@
225225
}
226226

227227
.filterSection {
228-
display: flex;
229-
flex-direction: column;
230228
align-items: center;
231229
width: 100%;
232230
}
@@ -269,4 +267,4 @@
269267
.filter + .filter {
270268
margin-top: 0;
271269
}
272-
}
270+
}

‎view.react/src/components/main/Main.jsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,17 @@ export const Main = () => {
6262
<VacationDaysProvider>
6363
<UsersVacationsProvider>
6464
<Row>
65-
<Col xs={3} lg={2} xl={2} className={sidebarColClass}>
65+
<Col xs={12} lg={12} xl={12} className='d-flex'>
6666
<Sidebar
67-
onClickLinkOrOutside={handleClickOutsideSidebar}
68-
acceptancesPresent={acceptancesPresent}
67+
onClickLinkOrOutside={handleClickOutsideSidebar}
68+
acceptancesPresent={acceptancesPresent}
6969
/>
70-
</Col>
71-
<Col xs={9} lg={9} xl={10} className={styles.mainContent}>
7270
<RequestProvider>
7371
{isUserALeader &&
7472
<AcceptanceLoader setAcceptancesPresent={setAcceptancesPresent}/>}
75-
<MainContentRouting
76-
acceptancesPresent={acceptancesPresent}
77-
/>
73+
<div className={styles.mainContent}>
74+
<MainContentRouting acceptancesPresent={acceptancesPresent}/>
75+
</div>
7876
</RequestProvider>
7977
</Col>
8078
</Row>

‎view.react/src/components/main/Main.module.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,10 @@
44
.sidebarRowClass {
55
overflow: hidden;
66
}
7-
}
7+
}
8+
9+
.mainContent {
10+
flex-basis: 0;
11+
flex-grow: 999;
12+
min-inline-size: 50%;
13+
}

‎view.react/src/components/presence-confirmation-panel/PresenceConfirmationPanel.jsx‎

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const PresenceConfirmationPanel = ({userId, onConfirmation}) => {
7777
const [chosenDate, setChosenDate] = useState(TODAY)
7878
const [chosenStartTime, setChosenStartTime] = useState(() => getStartTimeValue(userPreferences, chosenDate))
7979
const [chosenEndTime, setChosenEndTime] = useState(() => getEndTimeValue(userPreferences, chosenDate))
80-
80+
8181
useEffect(() => {
8282
setChosenStartTime(() => getStartTimeValue(userPreferences, chosenDate))
8383
setChosenEndTime(() => getEndTimeValue(userPreferences, chosenDate))
@@ -128,58 +128,54 @@ export const PresenceConfirmationPanel = ({userId, onConfirmation}) => {
128128
}
129129

130130
return (
131-
<Row>
132-
<Col xs={{ span: 7, offset: 5 }}>
133-
<div className={styles.mainContainer}>
134-
<Col xs={10} lg={5} className={styles.mainContentContainer}>
135-
<div className={styles.header}>Rejestracja godzin obecności</div>
136-
<div className={styles.flexContainer}>
137-
<InputWrapper>
138-
<DatePicker
139-
withWeekend={false}
140-
customInput={<DateTimePickerInput />}
141-
chosenDate={chosenDate}
142-
onChange={date => setChosenDate(date)}
143-
/>
144-
</InputWrapper>
145-
<div className={styles.timePickersContainer}>
146-
<InputWrapper>
147-
<TimePicker
148-
customInput={<DateTimePickerInput />}
149-
chosenTime={chosenStartTime}
150-
onChange={date => setChosenStartTime(date)}
151-
/>
152-
</InputWrapper>
153-
<InputWrapper>
154-
<LineBreak/>
155-
<div className={styles.dash} />
156-
</InputWrapper>
157-
<InputWrapper>
158-
<TimePicker
159-
customInput={<DateTimePickerInput />}
160-
chosenTime={chosenEndTime}
161-
onChange={date => setChosenEndTime(date)}
162-
/>
163-
</InputWrapper>
164-
</div>
165-
</div>
166-
<ConfirmationLabel
167-
fetching={fetching}
168-
confirmation={getConfirmation(chosenDate)}
169-
isOwnPresence={ownPresence}
170-
isOnVacation={isUserOnVacation()}
171-
isNotWorking={isNotWorking(userPreferences, chosenDate)}
131+
<div className={styles.mainContainer}>
132+
<Col xs={10} lg={5} className={styles.mainContentContainer}>
133+
<div className={styles.header}>Rejestracja godzin obecności</div>
134+
<div className={styles.flexContainer}>
135+
<InputWrapper>
136+
<DatePicker
137+
withWeekend={false}
138+
customInput={<DateTimePickerInput />}
139+
chosenDate={chosenDate}
140+
onChange={date => setChosenDate(date)}
172141
/>
173-
<button
174-
className={styles.presenceConfirmationButton}
175-
onClick={() => handlePresenceConfirmation()}
176-
>
177-
{getConfirmation(chosenDate) ? "zaktualizuj godziny obecności" : "zgłoś obecność"}
178-
</button>
179-
</Col>
142+
</InputWrapper>
143+
<div className={styles.timePickersContainer}>
144+
<InputWrapper>
145+
<TimePicker
146+
customInput={<DateTimePickerInput />}
147+
chosenTime={chosenStartTime}
148+
onChange={date => setChosenStartTime(date)}
149+
/>
150+
</InputWrapper>
151+
<InputWrapper>
152+
<LineBreak/>
153+
<div className={styles.dash} />
154+
</InputWrapper>
155+
<InputWrapper>
156+
<TimePicker
157+
customInput={<DateTimePickerInput />}
158+
chosenTime={chosenEndTime}
159+
onChange={date => setChosenEndTime(date)}
160+
/>
161+
</InputWrapper>
162+
</div>
180163
</div>
164+
<ConfirmationLabel
165+
fetching={fetching}
166+
confirmation={getConfirmation(chosenDate)}
167+
isOwnPresence={ownPresence}
168+
isOnVacation={isUserOnVacation()}
169+
isNotWorking={isNotWorking(userPreferences, chosenDate)}
170+
/>
171+
<button
172+
className={styles.presenceConfirmationButton}
173+
onClick={() => handlePresenceConfirmation()}
174+
>
175+
{getConfirmation(chosenDate) ? "zaktualizuj godziny obecności" : "zgłoś obecność"}
176+
</button>
181177
</Col>
182-
</Row>
178+
</div>
183179
)
184180
}
185181

‎view.react/src/components/presence-confirmation-panel/PresenceConfirmationPanel.module.scss‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@
55
display: flex;
66
flex-direction: column;
77
align-items: center;
8-
justify-content: end;
9-
border: 1px solid #78A612;
10-
border-radius: 50px;
11-
border-radius: 50%;
12-
height: 1080px;
13-
padding-bottom: 40px;
14-
margin-top: -654px;
8+
margin: 3.5rem 0 3.5rem 0;
159
}
1610

1711
.mainContentContainer {
@@ -53,8 +47,8 @@
5347
.presenceConfirmationButton {
5448
border-radius: 4px;
5549
background-color: #002900;
56-
padding: 19px 24px;
57-
font-size: 23px;
50+
padding: 15px;
51+
font-size: 16px;
5852
transition: background-color 0.3s ease-in-out;
5953
border: none;
6054
color: white;

‎view.react/src/components/sidebar/Sidebar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export const Sidebar = ({onClickLinkOrOutside, acceptancesPresent}) => {
3535

3636
return (
3737
<>
38-
<Container fluid className={styles.main}>
38+
<div className={styles.main}>
3939
<Nav className={sidebarClasses}>
40-
<button onClick={() => setIsOpen(!isOpen)}>
40+
<button onClick={() => (setIsOpen(!isOpen))}>
4141
<ArrowForwardIosRoundedIcon />
4242
</button>
4343
<Link
@@ -105,7 +105,7 @@ export const Sidebar = ({onClickLinkOrOutside, acceptancesPresent}) => {
105105
</>
106106
)}
107107
</Nav>
108-
</Container>
108+
</div>
109109
<div className={styles.versionContainer}>
110110
{`${version} ${commitId}`}
111111
</div>

‎view.react/src/components/sidebar/Sidebar.module.scss‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,26 @@
44
.main {
55
z-index: 6;
66
font-size: 1.2rem;
7-
padding: 0;
8-
position: fixed;
7+
padding: 35px 20px 0 0;
98
height: 100%;
109
width: fit-content;
1110
max-height: 100%;
1211

13-
a {
12+
a {
1413
color: $GREY-COLOR;
1514
padding-bottom: 12px;
1615
margin-top: 18px;
1716
}
1817
}
1918

2019
.nav {
21-
position: absolute;
22-
top: 6rem;
23-
left: 0;
20+
flex-direction: column;
2421
white-space: nowrap;
2522
text-transform: uppercase;
2623
margin-left: 2rem;
2724

2825
button {
26+
width: fit-content;
2927
background-color: transparent;
3028
border: none;
3129
position: relative;
@@ -60,7 +58,7 @@
6058
&--open {
6159
button {
6260
position: relative;
63-
transform: translateX(450%) rotate(-180deg);
61+
transform: translateX(435%) rotate(-180deg);
6462
transition: transform 0.3s ease-in-out;
6563
}
6664

@@ -133,7 +131,7 @@
133131
font-size: 1.6rem;
134132
color: $BLACK-COLOR;
135133
padding: 2rem 0 0 2rem;
136-
134+
137135
p {
138136
margin: 0;
139137
}
@@ -151,19 +149,15 @@
151149
.versionContainer {
152150
font-size: 0.9rem;
153151
color: #cccccc;
154-
position: absolute;
152+
position: fixed;
155153
bottom: 1%;
156154
left: 1%;
155+
z-idnex: 7;
157156
}
158157

159158
@include media-breakpoint-up(lg) {
160159
.main {
161160
max-width: 25%;
162-
padding-right: 0;
163161
background-color: white;
164162
}
165-
166-
.nav {
167-
padding-right: 0;
168-
}
169163
}

‎view.react/vite.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,8 @@ export default defineConfig({
2727
},
2828
build: {
2929
outDir: 'build'
30+
},
31+
server: {
32+
port: 3000
3033
}
3134
});

0 commit comments

Comments
 (0)