diff --git a/Dev Logs.md b/Dev Logs.md index 97faa08..47a7b84 100644 --- a/Dev Logs.md +++ b/Dev Logs.md @@ -11,9 +11,56 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T --- - - - +### Monday 8/3/20 +- Experimented with [``](https://material-ui.com/components/grid/#grid) based two column layout: works for fixed grid counts but not fluid. +- Experimented with flexbox two column layout: `flex-grow`, `flex-shrink` and `flex-basis` properties behave inconsistantly sometimes not respective responsive units. +- Built a drawer based UI example + +### Tuesday 8/4/20 +- Watched [Introduction to CSS by Scott Alan](https://app.pluralsight.com/library/courses/css-intro/table-of-contents) on Pluralsight. +- Experimented with [``](https://material-ui.com/components/transitions/#slide) transitions in Material UI for showing and hiding ItemView. +- Found a working combination of `flex-basis` and `flex-shrink` that makes widths behave expectedly (thanks to @dhallet.) +```jsx +// Create state variable for openning ItemView +const [sidebarOpen, setSidebarOpen] = useState(false) + +// Create JSS Styles +const useStyles = makeStyles({ +"leftCol": { + backgroundColor: "lightgreen" +}, +"rightCol": { + backgroundColor: "lightblue", + overflow: "hidden", + width: "0" +}, +"rightColShift": { + flexShrink: "0", + width: "50%" +}, +"transition-width": { + transition: theme.transitions.create(["width"], { + duration: theme.transitions.duration.enteringScreen, + easing: theme.transitions.easing.enteringScreen + }) +} +}); + +const classes = useStyles(); + +// Render UI +return ( + + + + {/* Content ... */} + + + {/* Content ... */} + + +); +```