css changes
This commit is contained in:
wrzesinski-hubert
parent
15448503e3
commit
0c7fe6348f
@ -13,7 +13,7 @@ interface ClassExandIconProps {
|
||||
|
||||
const CourseStyled = styled.div`
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
min-height: 40px;
|
||||
background-color: rgb(100, 181, 246) !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -25,25 +25,28 @@ const CourseStyled = styled.div`
|
||||
cursor: pointer;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
|
||||
`;
|
||||
|
||||
const CourseNameStyled = styled.div`
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-top:20px;
|
||||
padding-bottom:10px;
|
||||
padding-left:35px;
|
||||
padding-right:35px;
|
||||
`;
|
||||
|
||||
interface ClassGroupProps {
|
||||
groupType: GroupType;
|
||||
}
|
||||
|
||||
const ClassGroupStyled = styled.div<ClassGroupProps>`
|
||||
const ClassGroupStyled = styled.div`
|
||||
position:relative;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
background-color:#9ED3FF;
|
||||
}
|
||||
outline-offset: -5px;
|
||||
outline: ${({ groupType }) => (groupType === 'CLASS' ? '2px solid #5642AA' : '2px solid #866DF7')};
|
||||
`;
|
||||
|
||||
const ClassExandIconStyled = styled.img<ClassExandIconProps>`
|
||||
@ -53,19 +56,25 @@ const ClassExandIconStyled = styled.img<ClassExandIconProps>`
|
||||
transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
|
||||
`;
|
||||
|
||||
const TypeClass = styled.div<ClassGroupProps>`
|
||||
position:absolute;
|
||||
min-width:55px;
|
||||
padding:1px;
|
||||
top:5px;
|
||||
border-radius:1px;
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles({
|
||||
expanded: {
|
||||
maxHeight: '244px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
'@global': {
|
||||
'*::-webkit-scrollbar': {
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '0.4em',
|
||||
},
|
||||
'*::-webkit-scrollbar-track': {
|
||||
'&::-webkit-scrollbar-track': {
|
||||
'-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb': {
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#d4b851',
|
||||
outline: '1px solid slategrey',
|
||||
@ -77,10 +86,10 @@ const DeleteFromBasketIcon = styled(CloseIcon)`
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 235px;
|
||||
top: -10px;
|
||||
left: 230px;
|
||||
top: -5px;
|
||||
&:hover {
|
||||
fill: #d3d3d3;
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -104,7 +113,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
|
||||
{groups
|
||||
.sort((a, b) => b.type.localeCompare(a.type))
|
||||
.map((group, index) => (
|
||||
<ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||
<TypeClass groupType={group.type}>{group.type==="CLASS"? "(Ćw.)" : "(Wyk.)"}</TypeClass>
|
||||
<p>
|
||||
{group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>
|
||||
|
||||
@ -12,6 +12,22 @@ const DropdownStyled = styled.div`
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
border-radius:0px 0px 0px 15px;
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #d4b851;
|
||||
border: 1px solid;
|
||||
}
|
||||
`;
|
||||
|
||||
const CourseStyled = styled.div`
|
||||
@ -23,6 +39,7 @@ const CourseStyled = styled.div`
|
||||
font-size: 18px;
|
||||
font-family: Lato;
|
||||
scroll-snap-align: end;
|
||||
border-bottom:1px solid;
|
||||
:hover {
|
||||
background-color: #d4b851;
|
||||
cursor: pointer;
|
||||
|
||||
@ -5,7 +5,6 @@ import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
||||
const RightbarStyled = styled.div`
|
||||
padding-top: 10px;
|
||||
padding-left: 15px;
|
||||
@ -32,22 +31,22 @@ const RightbarStyled = styled.div`
|
||||
const RightbarTextStyled = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid;
|
||||
`;
|
||||
|
||||
const SaveButton = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(100, 181, 246) !important;
|
||||
background-color: #417cab !important;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
margin-bottom: 10px;
|
||||
&:hover {
|
||||
color: #d3d3d3;
|
||||
color: white;
|
||||
}
|
||||
box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59);
|
||||
`;
|
||||
|
||||
function Alert(props: AlertProps) {
|
||||
@ -69,7 +68,7 @@ export const Rightbar = () => {
|
||||
const save = () => {
|
||||
saveBasket();
|
||||
setOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
@ -87,14 +86,14 @@ export const Rightbar = () => {
|
||||
Hubert Wrzesiński<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</p>
|
||||
<SaveButton onClick={save}>SAVE</SaveButton>
|
||||
<SaveButton onClick={save}>ZAPISZ</SaveButton>
|
||||
</RightbarTextStyled>
|
||||
{filteredCourses.map((course, index) => (
|
||||
<CourseCard course={course} key={index} />
|
||||
))}
|
||||
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
|
||||
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
|
||||
<Alert onClose={handleClose} severity="success">
|
||||
This is a success message!
|
||||
Zapisano plan!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
</RightbarStyled>
|
||||
|
||||
@ -35,7 +35,7 @@ const TableCell = styled.div<TableCellProps>`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-size: 1.25vw;
|
||||
`;
|
||||
|
||||
const T = styled.table`
|
||||
@ -67,20 +67,28 @@ export const Scheduler = () => {
|
||||
<>
|
||||
<SchedulerWrapper ref={wrapperRef}>
|
||||
<TableHead>
|
||||
{days.map((day, index) => (
|
||||
<TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
|
||||
{day}
|
||||
</TableCell>
|
||||
))}
|
||||
{days.map((day, indexCell) =>
|
||||
indexCell === 0 ? (
|
||||
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
|
||||
{day}
|
||||
</TableCell>
|
||||
) : (
|
||||
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
|
||||
{day}
|
||||
</TableCell>
|
||||
),
|
||||
)}
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{hours.map((hour, indexRow) => (
|
||||
<TableRow key={indexRow}>
|
||||
{[hour, '', '', '', '', ''].map((value, indexCell) =>
|
||||
indexRow === 0 && indexCell === 1 ? (
|
||||
<TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
|
||||
indexCell === 0 ? (
|
||||
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : (
|
||||
<TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
|
||||
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
),
|
||||
|
||||
@ -35,7 +35,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
|
||||
//deleted if statement, maybe it is needed
|
||||
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
|
||||
id,
|
||||
day: day === 5 ? 4 : day,
|
||||
day,
|
||||
lecturer,
|
||||
room,
|
||||
eventRow: groupTimeToEventRowMapping[time],
|
||||
|
||||
@ -47,12 +47,15 @@ const Classes = styled.div<ClassesProps>`
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
border-radius: 10px;
|
||||
|
||||
font-size:0.90vw;
|
||||
/* background-color: rgb(100, 181, 246); */
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"};
|
||||
background-color:${({groupType})=>groupType === "CLASS" ? "#FFDC61" : "#A68820"};
|
||||
box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
|
||||
`;
|
||||
|
||||
interface SchedulerRowProps {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user