aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx30
-rw-r--r--packages/website/ts/types.ts2
-rw-r--r--packages/website/ts/utils/utils.ts4
3 files changed, 30 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;
}
}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index d3bdd880e..22bfd2cb4 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -590,6 +590,8 @@ export enum BrowserType {
Chrome = 'Chrome',
Firefox = 'Firefox',
Opera = 'Opera',
+ Safari = 'Safari',
+ Edge = 'Edge',
Other = 'Other',
}
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index d4ad5f611..87aa48018 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -413,6 +413,10 @@ export const utils = {
return BrowserType.Firefox;
} else if (bowser.opera) {
return BrowserType.Opera;
+ } else if (bowser.msedge) {
+ return BrowserType.Edge;
+ } else if (bowser.safari) {
+ return BrowserType.Safari;
} else {
return BrowserType.Other;
}