scrollbars and small css changes

This commit is contained in:
wrzesinski-hubert 2020-11-22 17:22:13 +01:00
parent 6de97c107e
commit f06830e4d2
8 changed files with 33 additions and 32 deletions

View File

@ -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;

View File

@ -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 = () => {

View File

@ -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',
}, },
}, },
}); });

View File

@ -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;
} }
`; `;

View File

@ -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;

View File

@ -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>
</>
); );
}; };

View File

@ -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>

View File

@ -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);