Make Unity Bar sticky in demo page

Closes #81
azavea · Apr 26, 2019 · 2ad33fd · 2ad33fd
1 parent 9bcf5ca
commit 2ad33fd
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 38 deletions.
diff --git a/Demo.jsx b/Demo.jsx
@@ -229,44 +229,48 @@ class Demo extends Component {
 
         return (
             <div>
-                <UnityBar
-                    currentAppName={currentAppName}
-                    appNameClickHandler={
-                        hasAppNameClickHandler ? this.handleAppNameClick : null
-                    }
-                    hasLogo={hasLogo}
-                    theme={theme}
-                    authenticated={authenticated}
-                    access={access}
-                    hasMapAction={hasMapAction}
-                    mapActionTitle={mapActionTitle}
-                    mapActionHandler={() => {
-                        window.console.log('map action clicked');
-                    }}
-                    hasHelpAction={hasHelpAction}
-                    helpActionTitle={helpActionTitle}
-                    helpActionHandler={() => {
-                        window.console.log('help action clicked');
-                    }}
-                    hasSettings={hasSettings}
-                    settingsHandler={() => {
-                        window.console.log('settings action clicked');
-                    }}
-                    searchChangeHandler={this.handleSearchChange}
-                    searchSubmitHandler={this.handleSearchSubmit}
-                    hasSearch={hasSearch}
-                    searchBoxValue={searchValue}
-                    parcelViewerUrl={parcelViewerUrl}
-                    showParcelViewerLink={showParcelViewerLink}
-                    creditsExplorerUrl={creditsExplorerUrl}
-                    showCreditsExplorerLink={showCreditsExplorerLink}
-                    retrofitMapUrl={retrofitMapUrl}
-                    showRetrofitMapLink={showRetrofitMapLink}
-                    retrofitCampaignUrl={retrofitCampaignUrl}
-                    showRetrofitCampaignLink={showRetrofitCampaignLink}
-                    isSearching={isSearching}
-                    searchingIndicator={searchingElement}
-                />
+                <div style={{ position: 'fixed', width: '100%' }}>
+                    <UnityBar
+                        currentAppName={currentAppName}
+                        appNameClickHandler={
+                            hasAppNameClickHandler
+                                ? this.handleAppNameClick
+                                : null
+                        }
+                        hasLogo={hasLogo}
+                        theme={theme}
+                        authenticated={authenticated}
+                        access={access}
+                        hasMapAction={hasMapAction}
+                        mapActionTitle={mapActionTitle}
+                        mapActionHandler={() => {
+                            window.console.log('map action clicked');
+                        }}
+                        hasHelpAction={hasHelpAction}
+                        helpActionTitle={helpActionTitle}
+                        helpActionHandler={() => {
+                            window.console.log('help action clicked');
+                        }}
+                        hasSettings={hasSettings}
+                        settingsHandler={() => {
+                            window.console.log('settings action clicked');
+                        }}
+                        searchChangeHandler={this.handleSearchChange}
+                        searchSubmitHandler={this.handleSearchSubmit}
+                        hasSearch={hasSearch}
+                        searchBoxValue={searchValue}
+                        parcelViewerUrl={parcelViewerUrl}
+                        showParcelViewerLink={showParcelViewerLink}
+                        creditsExplorerUrl={creditsExplorerUrl}
+                        showCreditsExplorerLink={showCreditsExplorerLink}
+                        retrofitMapUrl={retrofitMapUrl}
+                        showRetrofitMapLink={showRetrofitMapLink}
+                        retrofitCampaignUrl={retrofitCampaignUrl}
+                        showRetrofitCampaignLink={showRetrofitCampaignLink}
+                        isSearching={isSearching}
+                        searchingIndicator={searchingElement}
+                    />
+                </div>
                 <DemoToggles
                     hasSearch={hasSearch}
                     searchValue={searchValue}

diff --git a/DemoToggles.jsx b/DemoToggles.jsx
@@ -15,6 +15,9 @@ const demoTogglesStyles = Object.freeze({
         padding: '0.5rem 2rem',
         display: 'flex',
         justifyContent: 'center',
+        top: '60px',
+        position: 'fixed',
+        height: 'calc(100% - 60px)',
     }),
     tableStyles: Object.freeze({
         width: '80%',