scoll fixes

Author: Alban Bailly

gatsby-browser.js

@@ -7,7 +7,7 @@
 const transitionDelay = 50;
 
 exports.shouldUpdateScroll = ({ routerProps: { location } }) => {
-  if (!location.hash) {
+  if (!location.hash || !document.getElementById(location.hash.substr(1))) {
     window.setTimeout(() => window.scrollTo(0, 0), transitionDelay);
   } else {
     window.setTimeout(

src/components/2_molecules/ResponseItem.js

@@ -29,7 +29,7 @@ export const ResponseItem = props => {
                 return (
                   l && (
                     <div key={i} className="response-wrapper">
-                      <div className={`flex mb-2 pt-2 initResponse`}>
+                      <div className="flex mb-2 pt-2 initResponse">
                         <div className="w-1/4">
                           <div>
                             <b>{p}</b>
@@ -99,7 +99,11 @@ export const ResponseItem = props => {
                             </div>
                           )}
                           <div>
-                            <div>{l.description}</div>
+                            <Markdown
+                              source={l.description}
+                              escapeHtml={false}
+                              className="api-desc"
+                            />
                           </div>
                         </div>
                       </div>
@@ -139,7 +143,13 @@ export const ResponseItem = props => {
                                         })}
                                       </div>
                                     )}
-                                    <div>{data.description}</div>
+                                    <div>
+                                      <Markdown
+                                        source={data.description}
+                                        escapeHtml={false}
+                                        className="api-desc"
+                                      />
+                                    </div>
                                   </div>
                                 </div>
                               </div>
@@ -185,7 +195,13 @@ export const ResponseItem = props => {
                                             })}
                                           </div>
                                         )}
-                                        <div>{data.description}</div>
+                                        <div>
+                                          <Markdown
+                                            source={data.description}
+                                            escapeHtml={false}
+                                            className="api-desc"
+                                          />
+                                        </div>
                                       </div>
                                     </div>
                                   </div>

src/components/2_molecules/Security.js

@@ -7,7 +7,7 @@ export const Security = props => {
       <div className="mr-4">
         <b>Authorizations:</b>
       </div>
-      <div class="flex flex-col">
+      <div className="flex flex-col">
         <div>personalAccessToken</div>
         <div>
           <span>oAuth: </span>(<span className="tag">{oauth}</span>)

src/components/2_molecules/sidemenu.js

@@ -34,6 +34,7 @@ class SideMenu extends React.Component {
     });
 
     hash &&
+      document.getElementById(hash.substr(1)) !== null &&
       window.setTimeout(
         () =>
           document

src/components/5_templates/api.js

@@ -44,7 +44,7 @@ const apiPage = ({ data }) => {
           <Sidebar />
         </div>
         <div className="api-content-wrapper">
-          <div class="api-content mx-auto">
+          <div className="api-content mx-auto">
             <h1 className="mb-4 ">
               {(n.get && n.get.tags) ||
                 (n.post && n.post.tags) ||
@@ -57,10 +57,9 @@ const apiPage = ({ data }) => {
               return (
                 m && (
                   <div key={i} className="flex flex-col">
+                    <span id={mode} className="endpoint-anchor" />
                     <div className="w-full mb-8 py-2">
-                      <h2 id={mode} className="mt-0">
-                        {m.summary}
-                      </h2>
+                      <h2 className="mt-0">{m.summary}</h2>
                       <div className="bg-ThemeCell p-4 mt-4 mb-8">
                         <span className="tag big bold mr-2 uppercase">
                           {mode}
@@ -71,7 +70,7 @@ const apiPage = ({ data }) => {
                       <Markdown
                         source={m.description}
                         escapeHtml={false}
-                        className="mt-8 api-desc"
+                        className="my-8 api-desc"
                       />
 
                       {m.parameters && (
@@ -107,8 +106,8 @@ const apiPage = ({ data }) => {
                                     .properties[p];
                                 return (
                                   b && (
-                                    <div key={i}>
-                                      <div className="flex mb-4">
+                                    <div key={i} className="response-wrapper">
+                                      <div className="flex mb-4 initResponse">
                                         <div className="w-1/4">
                                           <div>
                                             <b>{p}</b>

src/css/components/0_utilities/typography.css

@@ -23,10 +23,15 @@ input[type="text"] {
 }
 
 .api-desc code {
-  @apply font-normal px-1 bg-ThemeTagGrey inline text-sm;
+  @apply font-normal px-1 bg-ThemeTagGrey inline text-xs relative;
   padding-top: 4px;
   padding-bottom: 3px;
   width: fit-content;
+  top: -1px;
+}
+
+.api-desc p:first-child {
+  margin-top: 0;
 }
 
 .api-body table {

src/css/components/4_pages/api-page.css

@@ -25,6 +25,9 @@
   margin-left: 300px;
 }
 
+.main-wrapper {
+}
+
 .api-content {
   max-width: 60vw;
   margin-left: 16.66667%;
@@ -34,6 +37,12 @@
   @apply mb-8;
 }
 
+.endpoint-anchor {
+  position: relative;
+  top: -84px;
+  visibility: hidden;
+}
+
 .list-group {
   max-height: 0;
   visibility: hidden;
@@ -92,10 +101,6 @@
   @apply border-grey-light;
 }
 
-.response-wrapper .initResponse:first-child {
-  /* border: 0; */
-}
-
 .subResponse {
   border-left-width: 1px;
   @apply border-grey-light;