ensure flyout toc has top padding on mobile

laws-africa · Nov 3, 2023 · 19df6db · 19df6db
1 parent 8e36680
commit 19df6db
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 28 deletions.
diff --git a/src/components/TOCList/index.tsx b/src/components/TOCList/index.tsx
@@ -90,7 +90,9 @@ const TOCList = ({ items, overrideClickEvt, prependRoute }: ITOCList) => {
   }
   return (
       <React.Fragment>
-        {renderList()}
+        <div className="toc-list">
+          {renderList()}
+        </div>
       </React.Fragment>
   );
 }

diff --git a/src/pages/constitution/ConstitutionTOC.tsx b/src/pages/constitution/ConstitutionTOC.tsx
@@ -4,8 +4,6 @@ import {
   IonTitle,
   IonContent,
   IonList,
-  IonListHeader,
-  IonLabel,
   IonPage,
   IonIcon,
   IonButton,
@@ -55,13 +53,6 @@ const ConstitutionTOC = () => {
             actionText={t('read_full_constitution_label','Read the Full Constitution')} />
         </div>
         <IonList>
-          <IonListHeader>
-            <IonLabel className="contents-label ion-no-margin">{t('toc_title',{
-              defaultValue: 'Table of Contents',
-              ns: 'global'
-            })}</IonLabel>
-          </IonListHeader>
-          <div className="ion-padding-start"><hr className="header-divider" /></div>
           <TOCList
             items={constitution.toc.flattened}
             prependRoute="/constitution/provision"

diff --git a/src/pages/constitution/Constitution_Full.tsx b/src/pages/constitution/Constitution_Full.tsx
@@ -132,11 +132,11 @@ class Constitution_Full extends React.Component<Props, MyState> {
             <IonList className="full-height-mobile">
               <IonMenuToggle auto-hide="true">
                 {this.state.constitution ?
-                    <TOCList
-                        items={this.state.constitution.toc.flattened}
-                        overrideClickEvt={(data: any) => this.scroll(data)}
-                    />
-                    : null}
+                  <TOCList
+                    items={this.state.constitution.toc.flattened}
+                    overrideClickEvt={(data: any) => this.scroll(data)}
+                  />
+                  : null}
               </IonMenuToggle>
             </IonList>
           </IonContent>

diff --git a/src/pages/rules/RulesTOC.tsx b/src/pages/rules/RulesTOC.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import {
   IonContent,
   IonList,
-  IonListHeader,
-  IonLabel,
   IonPage,
   IonButton,
   IonIcon, IonHeader, IonToolbar, IonButtons, IonTitle
@@ -54,17 +52,6 @@ const RulesTOC = () => {
             />
           </div>
           <IonList>
-            <IonListHeader>
-              <IonLabel class="contents-label ion-no-margin">
-                { t('toc_title', {
-                  ns: 'global',
-                  defaultValue: 'Table of Contents'
-                }) }
-              </IonLabel>
-            </IonListHeader>
-            <div className="ion-padding-start">
-              <hr className="header-divider" />
-            </div>
             <TOCList
                 items={toc.flattened}
                 prependRoute="/rules/provision"

diff --git a/src/theme/global.css b/src/theme/global.css
@@ -225,3 +225,11 @@ hr.divider,
     height: 100%;
   }
 }
+
+.toc-list {
+  height: 100%;
+}
+
+ion-menu-toggle .toc-list {
+  padding-top: var(--ion-safe-area-top, 0);
+}