refactor: differ resizing by platforms

src/components/Resizable.tsx

@@ -1,11 +1,10 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
-import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
-import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
 
 export type Size = number
 type Props = {
@@ -14,7 +13,6 @@ type Props = {
 }
 
 const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
-const GITHUB_WIDTH = 1020
 
 export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
@@ -35,17 +33,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     configContext.set({ sideBarWidth: size })
   }, [size])
 
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + 1020px - 100vw); }`,
-    size => [`min-width: ${size + GITHUB_WIDTH}px`, `max-width: ${size * 2 + GITHUB_WIDTH}px`],
-    size,
-  )
-
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`,
-    size => [`max-width: ${size + GITHUB_WIDTH}px`],
-    size,
-  )
+  platform.useResizeStylesheets(size)
 
   const onResize = React.useCallback((size: number) => {
     if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size)

src/content.scss

@@ -35,6 +35,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   &.git-project {
     #git-header-nav {
       position: static;
+      padding-left: 0;
+      padding-right: 0;
     }
 
     padding-top: 0;
@@ -44,19 +46,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 .with-gitako-spacing {
   // gitee
   &.git-project {
-    // width: auto; // shrink width
-    .ui.container {
-      // width: auto;
-    }
+    width: auto; // shrink width
     .site-content {
-      // min-width: auto;
-      // max-width: 1020px;
+      min-width: 1040px;
     }
   }
 }
 
 @media (min-width: $github-content-width) {
-  body {
+  // github
+  body.env-production {
     min-width: $github-content-width;
   }
 }
@@ -541,19 +540,19 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       }
     }
   }
+}
 
-  // gitee
-  body.git-project {
-    // reset styles
+// gitee
+.git-project {
+  // reset styles
+  .#{$name}-side-bar {
     input[type='text'],
     input[type='password'],
     .ui-autocomplete-input,
     textarea,
     .uneditable-input {
       padding: initial;
-      // line-height: 18px;
       border: none;
-      // border-radius: 3px;
     }
   }
 }

src/platforms/GitHub/index.ts

@@ -1,7 +1,9 @@
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
+import { bodySpacingClassName } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
+import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -152,6 +154,7 @@ export const GitHub: Platform = {
     }
     return accessToken
   },
+  useResizeStylesheets,
 }
 
 export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
@@ -177,3 +180,17 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
   React.useEffect(attachCopyFileButton, [copyFileButton])
   useEvent('pjax:complete', attachCopyFileButton, window)
 }
+
+function useResizeStylesheets(size: number) {
+  const CONTENT_WIDTH = 1020
+  useMediaStyleSheet(
+    `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + 1020px - 100vw); }`,
+    size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`],
+    size,
+  )
+  useMediaStyleSheet(
+    `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`,
+    size => [`max-width: ${size + CONTENT_WIDTH}px`],
+    size,
+  )
+}

src/platforms/Gitee/index.ts

@@ -1,7 +1,9 @@
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
+import { bodySpacingClassName } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
+import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -152,6 +154,7 @@ export const Gitee: Platform = {
     }
     return accessToken
   },
+  useResizeStylesheets,
 }
 
 export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
@@ -165,3 +168,17 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
   React.useEffect(attachCopySnippetButton, [copySnippetButton])
   useEvent('pjax:complete', attachCopySnippetButton, window)
 }
+
+function useResizeStylesheets(size: number) {
+  const CONTENT_WIDTH = 1040
+  useMediaStyleSheet(
+    `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + ${CONTENT_WIDTH}px - 100vw); }`,
+    size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`],
+    size,
+  )
+  useMediaStyleSheet(
+    `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`,
+    size => [`max-width: ${size + CONTENT_WIDTH}px`],
+    size,
+  )
+}

src/platforms/dummyPlatformForTypeSafety.ts

@@ -9,6 +9,7 @@ export const dummyPlatformForTypeSafety: Platform = {
   },
   getCurrentPath: callingDummyPlatformMethods,
   setOAuth: callingDummyPlatformMethods,
+  useResizeStylesheets: callingDummyPlatformMethods,
 }
 
 function callingDummyPlatformMethods(): any {

src/platforms/platform.d.ts

@@ -5,4 +5,5 @@ type Platform = {
   shouldShow(metaData?: Partial<MetaData>): boolean
   getCurrentPath(branchName: string): string[] | null
   setOAuth(code: string): Promise<string | null>
+  useResizeStylesheets(size: number): void
 }