scrollbars and small css changes
This commit is contained in:
parent
6de97c107e
commit
f06830e4d2
@ -16,15 +16,16 @@ const LeftSide = styled.div`
|
|||||||
|
|
||||||
const Wrap = styled.div`
|
const Wrap = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 120px);
|
||||||
background-color: #ECEEF4;
|
background-color: #ECEEF4;
|
||||||
|
width:100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
flex:5;
|
flex:12;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 120px);
|
||||||
background-color: #ECEEF4;
|
background-color: #ECEEF4;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -42,7 +43,8 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
|
box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
|
||||||
border-bottom:1px solid;
|
border-bottom:1px solid #979797;
|
||||||
|
|
||||||
`;
|
`;
|
||||||
const Icon = styled.img`
|
const Icon = styled.img`
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
@ -12,6 +12,7 @@ const Wrapper = styled.div`
|
|||||||
background-color: #ECEEF4;
|
background-color: #ECEEF4;
|
||||||
padding-top:20px;
|
padding-top:20px;
|
||||||
padding-bottom:20px;
|
padding-bottom:20px;
|
||||||
|
padding-right:20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
|
@ -55,6 +55,9 @@ const ClassGroupStyled = styled.div`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #9ed3ff;
|
background-color: #9ed3ff;
|
||||||
}
|
}
|
||||||
|
:last-child {
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface ExpandIconProps {
|
interface ExpandIconProps {
|
||||||
@ -75,28 +78,27 @@ const TypeClass = styled.div`
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
background-color: #00506b;
|
background-color: #00506b;
|
||||||
border: 2px solid;
|
border: 2px solid white;
|
||||||
min-width: 45px;
|
min-width: 45px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles({
|
||||||
expanded: {
|
expanded: {
|
||||||
maxHeight: '244px',
|
maxHeight: '244px',
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
'&::-webkit-scrollbar': {
|
'&::-webkit-scrollbar': {
|
||||||
width: '0.4em',
|
width: '0.3em',
|
||||||
|
borderStyle:'none',
|
||||||
},
|
},
|
||||||
'&::-webkit-scrollbar-track': {
|
'&::-webkit-scrollbar-track': {
|
||||||
'-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
|
borderRadius: '10px',
|
||||||
},
|
},
|
||||||
'&::-webkit-scrollbar-thumb': {
|
'&::-webkit-scrollbar-thumb': {
|
||||||
borderRadius: '10px',
|
borderRadius: '10px',
|
||||||
backgroundColor: '#d4b851',
|
backgroundColor: '#4b4b4b',
|
||||||
outline: '1px solid slategrey',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -13,17 +13,17 @@ const DropdownContainer = styled.div`
|
|||||||
scroll-snap-type: y mandatory;
|
scroll-snap-type: y mandatory;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f2f4f7;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 12px;
|
background-color: #f2f4f7;
|
||||||
background-color: #f5f5f5;
|
width: 5px;
|
||||||
|
border-style:none;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: black;
|
background-color: #4b4b4b;
|
||||||
border: 1px solid;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -14,16 +14,14 @@ const RightbarStyled = styled.div`
|
|||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 5px;
|
||||||
background-color: #f5f5f5;
|
border-style:none;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: black;
|
background-color: #4b4b4b;
|
||||||
border: 1px solid;
|
|
||||||
}
|
}
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -80,7 +80,6 @@ export const Scheduler = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<SchedulerWrapper>
|
<SchedulerWrapper>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
{days.map((day, indexCell) =>
|
{days.map((day, indexCell) =>
|
||||||
@ -128,6 +127,5 @@ export const Scheduler = () => {
|
|||||||
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
|
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</SchedulerWrapper>
|
</SchedulerWrapper>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -137,12 +137,12 @@ export default function ({ handleTransfer }: TopbarProps) {
|
|||||||
}
|
}
|
||||||
}, [clearInput]);
|
}, [clearInput]);
|
||||||
|
|
||||||
// useEffect(() => {
|
useEffect(() => {
|
||||||
// console.log('input changed');
|
console.log('input changed');
|
||||||
// if (!open) {
|
if (!open) {
|
||||||
// setOpen(true);
|
setOpen(true);
|
||||||
// }
|
}
|
||||||
// }, [input]);
|
}, [input]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Topbar>
|
<Topbar>
|
||||||
|
@ -85,7 +85,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, JSON.stringify(basketIds));
|
await axiosInstance.post(`http://localhost:1285/api/v1/commisions/add?`, JSON.stringify(basketIds));
|
||||||
enqueueSnackbar('Plan został zapisany', {
|
enqueueSnackbar('Plan został zapisany', {
|
||||||
variant: 'success',
|
variant: 'success',
|
||||||
action,
|
action,
|
||||||
@ -116,7 +116,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
const getNewestTimetable = async () => {
|
const getNewestTimetable = async () => {
|
||||||
try {
|
try {
|
||||||
const { data } = await axiosInstance.get(
|
const { data } = await axiosInstance.get(
|
||||||
`${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
|
`http://localhost:1285/api/v1/assignments/getCurrentAssignments`,
|
||||||
);
|
);
|
||||||
const basket = data === '' ? [] : data;
|
const basket = data === '' ? [] : data;
|
||||||
setBasket(basket);
|
setBasket(basket);
|
||||||
@ -129,7 +129,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
const fetchCourses = async () => {
|
const fetchCourses = async () => {
|
||||||
try {
|
try {
|
||||||
const { data: courses } = await axiosInstance.get<Array<Course>>(
|
const { data: courses } = await axiosInstance.get<Array<Course>>(
|
||||||
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
|
`http://localhost:1285/api/v1/courses/getCoursesWithGroups`,
|
||||||
);
|
);
|
||||||
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||||
console.log('courses: ', courses);
|
console.log('courses: ', courses);
|
||||||
|
Loading…
Reference in New Issue
Block a user