css changes

2020-10-08 20:21:52 +02:00
parent 15448503e3
commit 0c7fe6348f
6 changed files with 71 additions and 34 deletions
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -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>
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -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;
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -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>
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -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>
                ),
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -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],
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -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 {