aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-19 19:25:31 +0800
committerFabio Berger <me@fabioberger.com>2018-10-19 19:25:31 +0800
commit724f3b9cf7fb3a740d56e28c5375665b944919f3 (patch)
treed3779616b0afba689fa7e4449f26c5dfa7c70e1d /packages/website/ts/pages
parenta7a17c85dce26c8384165b821f0bf60ce531b987 (diff)
downloaddexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar.gz
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar.bz2
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar.lz
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar.xz
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.tar.zst
dexon-sol-tools-724f3b9cf7fb3a740d56e28c5375665b944919f3.zip
Improve sidebar logic to handle MS Edge, Firefox differences between Windows & Mac
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx30
1 files changed, 24 insertions, 6 deletions
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 0bbc6252d..30b79552f 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -7,14 +7,31 @@ import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
import { Container } from 'ts/components/ui/container';
import { Dispatcher } from 'ts/redux/dispatcher';
import { styled } from 'ts/style/theme';
-import { BrowserType, ScreenWidths } from 'ts/types';
+import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
const THROTTLE_TIMEOUT = 100;
const TOP_BAR_HEIGHT = 80;
const browserType = utils.getBrowserType();
-const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4;
+let SCROLLBAR_WIDTH;
+switch (browserType) {
+ case BrowserType.Firefox:
+ // HACK: Firefox doesn't allow styling of their scrollbar's.
+ // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
+ const os = utils.getOperatingSystem();
+ SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15;
+ break;
+
+ case BrowserType.Edge:
+ // Edge's scrollbar is placed outside of the div content and doesn't
+ // need to be accounted for
+ SCROLLBAR_WIDTH = 0;
+ break;
+
+ default:
+ SCROLLBAR_WIDTH = 4;
+}
const SIDEBAR_PADDING = 22;
export interface DevelopersPageProps {
@@ -34,13 +51,14 @@ const isUserOnMobile = sharedUtils.isUserOnMobile();
const scrollableContainerStyles = `
position: absolute;
- top: 80px;
+ top: ${TOP_BAR_HEIGHT}px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
+ /* Required for hide/show onHover of scrollbar on Microsoft Edge */
-ms-overflow-style: -ms-autohiding-scrollbar;
`;
@@ -60,7 +78,7 @@ const SidebarContainer =
overflow: hidden;
&:hover {
overflow: auto;
- padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px;
+ padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px;
}
`;
@@ -78,14 +96,14 @@ const MainContentContainer =
padding-right: 50px;
overflow: ${isUserOnMobile ? 'auto' : 'hidden'};
&:hover {
- padding-right: ${50 - SCROLLER_WIDTH}px;
+ padding-right: ${50 - SCROLLBAR_WIDTH}px;
overflow: auto;
}
@media (max-width: 40em) {
padding-left: 20px;
padding-right: 20px;
&:hover {
- padding-right: ${20 - SCROLLER_WIDTH}px;
+ padding-right: ${20 - SCROLLBAR_WIDTH}px;
overflow: auto;
}
}