jare2473/studentportalen-prototyping
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

eriks-booking-variant #6

Merged
jare2473 merged 13 commits from eriks-booking-variant into main 2025-09-22 11:16:13 +02:00
Conversation 0 Commits 13 Files Changed 29 +51 -33
2 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7def5850a0 - Show all commits

66
my-app/src/pages/NewBooking.jsx
View File

@@ -67,41 +67,43 @@ export function NewBooking({ addBooking }) {
<BookingDatePicker />
{/* Filter Button */}
<div className={styles.filtersSection}>
<button
className={`${styles.filterButton} ${hasActiveFilters ? styles.activeFilter : ''}`}
onClick={() => setShowFilters(!showFilters)}
>
<span>{getFilterText()}</span>
<span className={`${styles.chevron} ${showFilters ? styles.chevronUp : styles.chevronDown}`}>
{showFilters ? '▲' : '▼'}
</span>
</button>
{/* Collapsible Filter Content */}
{showFilters && (
<div className={styles.filtersContent}>
<div className={styles.filtersRow}>
<RoomSelectionField />
<BookingLengthField />
</div>
{hasActiveFilters && (
<div className={styles.resetSection}>
<button
className={styles.resetButton}
onClick={handleResetFilters}
>
Rensa filter
</button>
<div className={styles.headerAndFilter}>
<h3 className={styles.elementHeading} style={{ padding: "0 0.5rem" }}>
Välj starttid
</h3>
<div className={styles.filtersSection}>
<button
className={`${styles.filterButton} ${hasActiveFilters ? styles.activeFilter : ''}`}
onClick={() => setShowFilters(!showFilters)}
>
<span>{getFilterText()}</span>
<span className={`${styles.chevron} ${showFilters ? styles.chevronUp : styles.chevronDown}`}>
{showFilters ? '▲' : '▼'}
</span>
</button>
{/* Collapsible Filter Content */}
{showFilters && (
<div className={styles.filtersContent}>
<div className={styles.filtersRow}>
<RoomSelectionField />
<BookingLengthField />
</div>
)}
</div>
)}
{hasActiveFilters && (
<div className={styles.resetSection}>
<button
className={styles.resetButton}
onClick={handleResetFilters}
>
Rensa filter
</button>
</div>
)}
</div>
)}
</div>
</div>
<h3 className={styles.elementHeading} style={{ padding: "0 0.5rem" }}>
Lediga tider
</h3>
<div>
<TimeCardContainer />
</div>

18
my-app/src/pages/NewBooking.module.css
View File

@@ -14,6 +14,13 @@
padding-bottom: 4rem;
}
.elementHeading {
font-size: 1.4rem;
margin: 0;
margin-bottom: 0.5rem;
font-weight: 400;
}
.formContainer h2 {
font-weight: 529;
}
@@ -27,6 +34,16 @@
align-items: center;
}
.headerAndFilter {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 11.5rem;
padding-top: 2rem
}
.modalFooter {
width: 100%;
@@ -147,7 +164,6 @@
/* Filter Section Styles */
.filtersSection {
width: 100%;
margin-top: 1rem;
margin-bottom: 1.5rem;
display: flex;