July 2017
Intermediate to advanced
300 pages
5h 43m
English
Seemingly, the resulting UI needs additional styling. I suggest that we code our custom styles in SASS:
./app/sass/app.scss
.main-wrapper {
height: 100vh;
}
First of all, we make the top level element (./app/ts/Containers/App.tsx) always adapt to the actually window height.
Further, we declare a variable for the fixed height of the title bar and set the layout for feed items and item content containers:
./app/sass/app.scss
$headrHeight: 66px; .feed-index { display: flex; flex-flow: row nowrap; overflow-y: auto; height: calc(100vh - #{$headrHeight}); &.is-open { overflow-y: hidden; .feed-list { width: 50%; } .feed-contents { width: 50%; } } } .feed-list { flex: 1 0 auto; width: 100%; transition: width 200ms ...Read now
Unlock full access