fix: supprime le style global sur body

EcrituresNumeriques · Nov 14, 2024 · 11cd3a6 · 11cd3a6
1 parent c88b84a
commit 11cd3a6
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 84 deletions.
diff --git a/front/index.html b/front/index.html
@@ -39,7 +39,7 @@
     {{/if}}
   </head>
   <body>
-    <div id="root" aria-live></div>
+    <div id="root" aria-live style="height: 100%;"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="./src/index.jsx"></script>
   </body>

diff --git a/front/src/components/Write/write.module.scss b/front/src/components/Write/write.module.scss
@@ -72,7 +72,7 @@
   display: flex;
   flex-direction: row;
   gap: 1em;
-  max-height: calc(100vh - 80px);
+  max-height: calc(100vh - 91px);
 }
 
 :global {

diff --git a/front/src/components/articles.module.scss b/front/src/components/articles.module.scss
@@ -1,12 +1,6 @@
 @use '../styles/defaults' as *;
 @use '../styles/variables' as *;
 
-:global {
-  body {
-    overflow-y: scroll;
-  }
-}
-
 .articleCounter {
   font-size: 1.1rem;
   font-weight: 600;

diff --git a/front/src/components/corpus/corpus.module.scss b/front/src/components/corpus/corpus.module.scss
@@ -1,12 +1,6 @@
 @use '../../styles/defaults' as *;
 @use '../../styles/variables' as *;
 
-:global {
-  body {
-    overflow-y: scroll;
-  }
-}
-
 .section {
   @extend .wrapped-center;
   padding: 1rem;

diff --git a/front/src/index.jsx b/front/src/index.jsx
@@ -47,7 +47,7 @@ const workspacePathsRx = /^\/workspaces\/(?<id>[a-z0-9]+)\/(?:articles|books)$/
   try {
     const { user, token } = await getUserProfile({ applicationConfig, sessionToken })
     const pathname = location.pathname
-    const workspacePathRxResult =    pathname.match(workspacePathsRx)
+    const workspacePathRxResult = pathname.match(workspacePathsRx)
     let activeWorkspaceId
     if (workspacePathRxResult) {
       activeWorkspaceId = workspacePathRxResult.groups.id
@@ -98,70 +98,70 @@ root.render(
       <Provider store={store}>
         <Suspense fallback={<Loading/>}>
           <Router>
-          <TrackPageViews/>
-          <Header/>
-          <App>
-            <Switch>
-              <Route path="/register" exact>
-                <Register/>
-              </Route>
-              {/* Articles index */}
-              <PrivateRoute path={['/articles', '/', '/workspaces/:workspaceId/articles']} exact>
-                <Articles/>
-              </PrivateRoute>
-              {/* Books index */}
-              <PrivateRoute path={['/books', '/workspaces/:workspaceId/books']} exact>
-                <Corpus/>
-              </PrivateRoute>
-              {/* Workspaces index */}
-              <PrivateRoute path={['/workspaces']} exact>
-                <Workspaces/>
-              </PrivateRoute>
-              <PrivateRoute path="/credentials" exact>
-                <UserInfos />
-                <Credentials/>
-              </PrivateRoute>
-              {/* Annotate a Book */}
-              <Route path={[`/books/:bookId/preview`]} exact>
-                <ArticlePreview/>
-              </Route>
-              {/* Annotate an article or its version */}
-              <Route path={[`/article/:id/version/:version/preview`, `/article/:id/preview`]} exact>
-                <ArticlePreview/>
-              </Route>
-              {/* Write and Compare */}
-              <PrivateRoute path={[`/article/:id/compare/:compareTo`, `/article/:id/version/:version/compare/:compareTo`]} exact>
-                <Write/>
-              </PrivateRoute>
-              {/* Write with a given version */}
-              <PrivateRoute path={`/article/:id/version/:version`} exact>
-                <Write/>
-              </PrivateRoute>
-              {/* Write and/or Preview */}
-              <PrivateRoute path={[`/article/:id/preview`, `/article/:id`]} exact>
-                <Write/>
-              </PrivateRoute>
-              {/* Collaborative editing */}
-              <PrivateRoute path={[`/article/:articleId/session/:sessionId`]} exact>
-                <CollaborativeEditor/>
-              </PrivateRoute>
-              <Route exact path="/privacy">
-                <Privacy/>
-              </Route>
-              <Route exact path="/ux">
-                <Story/>
-              </Route>
-              <Route exact path="/error">
-                <Error/>
-              </Route>
-              <Route path="*">
-                <NotFound/>
-              </Route>
-            </Switch>
-          </App>
-
-          <Footer/>
-        </Router>
+            <App>
+              <TrackPageViews/>
+              <Header/>
+              <Switch>
+                <Route path="/register" exact>
+                  <Register/>
+                </Route>
+                {/* Articles index */}
+                <PrivateRoute path={['/articles', '/', '/workspaces/:workspaceId/articles']} exact>
+                  <Articles/>
+                </PrivateRoute>
+                {/* Books index */}
+                <PrivateRoute path={['/books', '/workspaces/:workspaceId/books']} exact>
+                  <Corpus/>
+                </PrivateRoute>
+                {/* Workspaces index */}
+                <PrivateRoute path={['/workspaces']} exact>
+                  <Workspaces/>
+                </PrivateRoute>
+                <PrivateRoute path="/credentials" exact>
+                  <UserInfos/>
+                  <Credentials/>
+                </PrivateRoute>
+                {/* Annotate a Book */}
+                <Route path={[`/books/:bookId/preview`]} exact>
+                  <ArticlePreview/>
+                </Route>
+                {/* Annotate an article or its version */}
+                <Route path={[`/article/:id/version/:version/preview`, `/article/:id/preview`]} exact>
+                  <ArticlePreview/>
+                </Route>
+                {/* Write and Compare */}
+                <PrivateRoute
+                  path={[`/article/:id/compare/:compareTo`, `/article/:id/version/:version/compare/:compareTo`]} exact>
+                  <Write/>
+                </PrivateRoute>
+                {/* Write with a given version */}
+                <PrivateRoute path={`/article/:id/version/:version`} exact>
+                  <Write/>
+                </PrivateRoute>
+                {/* Write and/or Preview */}
+                <PrivateRoute path={[`/article/:id/preview`, `/article/:id`]} exact>
+                  <Write/>
+                </PrivateRoute>
+                {/* Collaborative editing */}
+                <PrivateRoute path={[`/article/:articleId/session/:sessionId`]} exact>
+                  <CollaborativeEditor/>
+                </PrivateRoute>
+                <Route exact path="/privacy">
+                  <Privacy/>
+                </Route>
+                <Route exact path="/ux">
+                  <Story/>
+                </Route>
+                <Route exact path="/error">
+                  <Error/>
+                </Route>
+                <Route path="*">
+                  <NotFound/>
+                </Route>
+              </Switch>
+              <Footer/>
+            </App>
+          </Router>
         </Suspense>
       </Provider>
     </GeistProvider>

diff --git a/front/src/layouts/App.jsx b/front/src/layouts/App.jsx
@@ -1,16 +1,30 @@
 import { Loading } from '@geist-ui/core'
+import clsx from 'clsx'
 import React, { Suspense } from 'react'
 import { useSelector } from 'react-redux'
+import { Route, Switch } from 'react-router-dom'
+
+import styles from './app.module.scss'
 
 
 export default function StyloApp ({ children }) {
   const hasBooted = useSelector(state => state.hasBooted)
 
   return (
-    <main>
-      <Suspense fallback={<Loading />}>
-        {hasBooted ? (children) : <Loading />}
-      </Suspense>
-    </main>
+    <Suspense fallback={<Loading/>}>
+      {hasBooted ?
+        <Switch>
+          <Route path="/article/*">
+            <main className={clsx(styles.app, styles.viewportMaxHeight)}>
+              {children}
+            </main>
+          </Route>
+          <Route path="*">
+            <main className={styles.app}>
+              {children}
+            </main>
+          </Route>
+        </Switch> : <Loading/>}
+    </Suspense>
   )
 }
diff --git a/front/src/layouts/app.module.scss b/front/src/layouts/app.module.scss
@@ -0,0 +1,12 @@
+.app {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.viewportMaxHeight {
+  overflow-y: auto;
+}
+
+.content {
+  min-height: 100vh;
+}