Skip to content
This repository has been archived by the owner on Feb 5, 2024. It is now read-only.

Commit

Permalink
Merge pull request #574 from SELab-2/hotfix/responsiveness
Browse files Browse the repository at this point in the history 
Hotfix/responsiveness
  • Loading branch information
@GashinRS
GashinRS authored May 21, 2023
2 parents 0c9d9e7 + 52f893c commit 9ebe114
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 87 deletions.
2 changes: 1 addition & 1 deletion frontend/components/autocompleteComponents/autocompleteComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const AutocompleteComponent: React.FC<Props> = ({
getOptionLabel={(option: any) => option.label || ""}
disabled={disabled}
renderInput={(params: AutocompleteRenderInputParams) => (
<TextField {...params} variant="outlined" fullWidth style={{ minWidth: "300px" }} />
<TextField {...params} variant="outlined" fullWidth style={{ minWidth: "150px" }} />
)}
ListboxProps={{ style: { maxHeight: 200, overflowY: "auto" } }}
/>
Expand Down
70 changes: 34 additions & 36 deletions frontend/pages/admin/analysis/tour.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,41 +420,39 @@ function AdminTour() {
<AdminHeader />
<Container>
<Row style={{ display: "flex", alignItems: "center", padding: "10px" }}>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
Selecteer student
</label>
<TourUserAutocomplete initialId={selectedStudentId} setObjectId={setSelectedStudentId} />
</div>
<div style={{ marginRight: "20px" }}>
<label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
Selecteer ronde
</label>
<StudentOnTourAutocomplete
initialId={selectedTourId}
setObjectId={setSelectedTourId}
required={false}
studentId={selectedStudentId}
disabled={!validTourUser}
/>
</div>
<div>
<label style={{ paddingBottom: "35px" }} htmlFor="datepicker">
Selecteer datum
</label>
<ReactDatePicker
className="custom-datepicker"
selected={selectedDate}
onChange={(date: Date) => setSelectedDate(date)}
highlightDates={validDates} // highlight valid dates
filterDate={(date: Date) =>
validDates.map((d) => d.toLocaleDateString()).includes(date.toLocaleDateString())
}
disabled={!validTourUser}
/>
</div>
</div>
<Col sm={12} md={4}>
<label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
Selecteer student
</label>
<TourUserAutocomplete initialId={selectedStudentId} setObjectId={setSelectedStudentId} />
</Col>
<Col sm={12} md={4}>
<label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
Selecteer ronde
</label>
<StudentOnTourAutocomplete
initialId={selectedTourId}
setObjectId={setSelectedTourId}
required={false}
studentId={selectedStudentId}
disabled={!validTourUser}
/>
</Col>
<Col sm={12} md={4}>
<label style={{ paddingBottom: "35px" }} htmlFor="datepicker">
Selecteer datum
</label>
<ReactDatePicker
className="custom-datepicker"
selected={selectedDate}
onChange={(date: Date) => setSelectedDate(date)}
highlightDates={validDates} // highlight valid dates
filterDate={(date: Date) =>
validDates.map((d) => d.toLocaleDateString()).includes(date.toLocaleDateString())
}
disabled={!validTourUser}
/>
</Col>
</Row>
<Card>
<ErrorMessageAlert setErrorMessages={setErrorMessages} errorMessages={errorMessages} />
Expand Down Expand Up @@ -496,7 +494,7 @@ function AdminTour() {
<Col xs={12} md={9}>
<p className="title" />
<div className="padding">
<Table className="table">
<Table responsive className="table">
<thead>
<tr>
<th>Gebouw</th>
Expand Down
24 changes: 13 additions & 11 deletions frontend/pages/admin/analysis/worked-hours.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import AdminHeader from "@/components/header/adminHeader";
import React, { useEffect, useState } from "react";
import { addDays, differenceInMinutes, startOfWeek, subDays, subMonths } from "date-fns";
import { differenceInMinutes, startOfWeek, subMonths } from "date-fns";
import { Card, Col, Container, Form, ListGroup, Row } from "react-bootstrap";
import { datesEqual, formatDate } from "@/lib/date";
import { datesEqual } from "@/lib/date";
import { getWorkedHours } from "@/lib/analysis";
import { getAllTours, Tour } from "@/lib/tour";
import { getAllRegions, RegionInterface } from "@/lib/region";
Expand Down Expand Up @@ -180,15 +180,6 @@ function AdminAnalysisWorkingHours() {
<Card>
<Form className="m-2">
<Row>
<Form.Group as={Col} sm={12} md={3} lg={3}>
<Form.Label>Periode:</Form.Label>
<LocaleDateRangePicker
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
/>
</Form.Group>
<Form.Group as={Col} sm={12} md={3} lg={3}>
<Form.Label>Sorteer op:</Form.Label>
<Select
Expand Down Expand Up @@ -239,6 +230,17 @@ function AdminAnalysisWorkingHours() {
menuPortalTarget={document.querySelector("body")}
/>
</Form.Group>
<Form.Group as={Col} sm={12} md={3} lg={3}>
<Form.Label>Periode:</Form.Label>
<div style={{ maxWidth: "150px" }}>
<LocaleDateRangePicker
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
/>
</div>
</Form.Group>
</Row>
</Form>
</Card>
Expand Down
70 changes: 38 additions & 32 deletions frontend/pages/admin/communication.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,50 +133,56 @@ function AdminCommunication() {
<Container>
<p className="title">Communicatie extern</p>
<div>
<Row>
<Col md={3}>
<Row>
<Row style={{ paddingBottom: "20px" }}>
<Col sm={12} md={4}>
<div>
<TemplateAutocomplete
initialId={templateId}
setObjectId={setTemplateId}
required={false}
/>
</Row>
<Row>
</div>
</Col>
<Col sm={12} md={4}>
<div>
<UserAutoComplete initialId={userId} setObjectId={setUserId} required={false} />
</Row>
<Row>
<div className="padding">
<Button
className="small_button"
size="sm"
onClick={() => {
if (userId) {
routeToBuildings(userId).then();
}
}}
>
Gebouw
</Button>
</div>
</Row>
</div>
</Col>
<Col md={9}>
<Col style={{ display: "flex", alignItems: "end", justifyContent: "end" }}>
<div className="padding">
<Button
style={{ height: "50px" }}
className="button"
onClick={() => {
if (userId) {
routeToBuildings(userId).then();
}
}}
>
Gebouw
</Button>
</div>
</Col>
</Row>
<Row>
<Col>
<Row>
<div style={{ display: "flex" }}>
<Form.Control
as="textarea"
className="mail_area"
placeholder="Schrijf je email hier"
value={updatedTemplateText}
onChange={handleEditTemplate}
/>
</div>
<Col>
<div className="input-field">
<Form.Control
as="textarea"
className="mail_area"
placeholder="Schrijf je email hier"
value={updatedTemplateText}
onChange={handleEditTemplate}
/>
</div>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col md={{ span: 3, offset: 3 }}>
<Col>
<div className="padding mt-auto">
<Button
href={`mailto:${getSelectedUserMail()}?body=${encodeURIComponent(
Expand Down
7 changes: 3 additions & 4 deletions frontend/pages/admin/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { getAllRemarksOfStudentOnTour } from "@/lib/remark-at-building";
import Box from "@mui/material/Box";
import CheckIcon from "@mui/icons-material/Check";
import { handleError } from "@/lib/error";
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
import ErrorMessageAlert from "@/components/errorMessageAlert";
import { Divider, Tooltip } from "@mui/material";
import { Card, Container, Table } from "react-bootstrap";
Expand Down Expand Up @@ -296,7 +295,7 @@ function AdminDashboard() {
{completedStudentOnTours.length > 0 ? (
<>
<label className="subtitle">Voltooid</label>
<Table responsive className="table">
<Table responsive className="table" style={{overflow: 'auto'}}>
<thead>
<tr>
<th>Ronde</th>
Expand Down Expand Up @@ -359,7 +358,7 @@ function AdminDashboard() {
{startedStudentOnTours.length > 0 ? (
<>
<label className="subtitle">Bezig</label>
<Table className="table">
<Table responsive className="table">
<thead>
<tr>
<th>Ronde</th>
Expand Down Expand Up @@ -417,7 +416,7 @@ function AdminDashboard() {
{notYetStartedStudentOnTours.length > 0 ? (
<>
<label className="subtitle">Nog niet gestarte rondes</label>
<Table className="table">
<Table responsive className="table">
<thead>
<tr>
<th>Ronde</th>
Expand Down
6 changes: 3 additions & 3 deletions frontend/pages/admin/data/garbage-collection/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,16 +461,16 @@ function GarbageCollectionSchedule() {
</Col>
<Col md={6} style={{ alignItems: "center" }}>
<Row>
<Col md={5}>
<div style={{ display: "flex" }}>
<Col md={6}>
<div>
<BuildingAutocomplete
initialId={0}
setObjectId={setSearchedBuilding}
required={false}
/>
</div>
</Col>
<Col md={5}>
<Col md={6}>
<div>
<TourAutocomplete initialId={0} setObjectId={setSearchedTour} />
</div>
Expand Down

0 comments on commit 9ebe114

Please sign in to comment.