Merge pull request #4454 from brave/ntp-sbw-footer-alignment

New Tab Page WebUI: Make sure footer is bottom aligned at all screen sizes
brave · Jan 29, 2020 · bdeaf2c · bdeaf2c
2 parents d32c0b1 + 63a3f77
commit bdeaf2c
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 37 deletions.
diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -12,6 +12,7 @@ const singleColumnSmallViewport = css`
    text-align: center;
  }
 `
+
 interface PageProps {
   showClock: boolean
   showStats: boolean
@@ -105,38 +106,63 @@ export const GridItemNotification = styled('section')`
 `
 
 export const GridItemCredits = styled('section')`
+  /* Variables for easy inherited override without splitting css rules definition */
+  --ntp-grid-item-credits-bottom-margin-wide: 36px;
+  --ntp-grid-item-credits-left-margin-narrow: 10px;
+  --ntp-grid-item-credits-left-margin-wide: var(--ntp-grid-item-credits-bottom-margin-wide);
   grid-column: 1 / span 1;
   grid-row: calc(-2 - var(--ntp-extra-footer-rows)) / span calc(1 + var(--ntp-extra-footer-rows));
-  /* grid-row: calc(-1 - var(--ntp-left-item-count));
-  grid-row-end: span calc(1 + var(--ntp-left-item-count)); */
   align-self: end;
-  margin: 0 0 36px 36px;
+
+  margin: 0 0 var(--ntp-grid-item-credits-bottom-margin-wide) var(--ntp-grid-item-credits-left-margin-wide);
   @media screen and (max-width: ${breakpointEveryBlock}) {
-    align-self: center;
-    margin: 0;
+    /* Display on left, keeping Navigation on right even on wrapped row. */
+    margin: 0 auto 0 var(--ntp-grid-item-credits-left-margin-narrow);
+    align-self: unset;
   }
 `
 
+export const GridItemBrandedLogo = styled(GridItemCredits)`
+  --ntp-grid-item-credits-left-margin-narrow: 0;
+  --ntp-grid-item-credits-bottom-margin-wide: -8px;
+  --ntp-grid-item-credits-left-margin-wide: 22px;
+`
+
 export const GridItemNavigation = styled('section')`
   grid-column: 3 / span 1;
   grid-row: -2 / span 1;
   align-self: end;
   margin: 0 24px 24px 0;
   @media screen and (max-width: ${breakpointEveryBlock}) {
     margin: 0;
-    align-self: unset;
+    align-self: flex-end;
   }
 `
 
 export const Footer = styled<{}, 'footer'>('footer')`
+  /* Child items are primary Grid items and can slot in to free spaces,
+     so this element doesn't do anything on wider viewport widths. */
   display: contents;
 
   @media screen and (max-width: ${breakpointEveryBlock}) {
     width: 100%;
+    /* Take up rest of Page height so that footer is always at bottom */
+    flex: 1;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: flex-end;
+  }
+`
+
+export const FooterContent = styled('div')`
+  display: contents;
+
+  @media screen and (max-width: ${breakpointEveryBlock}) {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
     flex-wrap: wrap;
   }
 `

diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -353,15 +353,16 @@ class NewTabPage extends React.Component<Props, State> {
           }
             {rewardsContent}
           <Page.Footer>
+            <Page.FooterContent>
             {isShowingBrandedWallpaper && newTabData.brandedWallpaperData &&
              newTabData.brandedWallpaperData.logo &&
-             <Page.GridItemCredits>
+             <Page.GridItemBrandedLogo>
               <BrandedWallpaperLogo
                 menuPosition={'right'}
                 textDirection={newTabData.textDirection}
                 data={newTabData.brandedWallpaperData.logo}
               />
-            </Page.GridItemCredits>}
+            </Page.GridItemBrandedLogo>}
             <FooterInfo
               textDirection={newTabData.textDirection}
               onClickOutside={this.closeSettings}
@@ -383,6 +384,7 @@ class NewTabPage extends React.Component<Props, State> {
               allowBrandedWallpaperUI={newTabData.featureFlagBraveNTPBrandedWallpaper}
               toggleShowRewards={this.toggleShowRewards}
             />
+            </Page.FooterContent>
           </Page.Footer>
         </Page.Page>
       </Page.App>

diff --git a/components/brave_new_tab_ui/stories/default/index.tsx b/components/brave_new_tab_ui/stories/default/index.tsx
@@ -270,36 +270,38 @@ export default class NewTabPage extends React.PureComponent<Props, State> {
           </Page.GridItemRewards>
           }
           <Page.Footer>
-            {showBrandedWallpaper && this.state.brandedWallpaper &&
-              this.state.brandedWallpaper.logo &&
-            <Page.GridItemCredits>
-              <BrandedWallpaperLogo
-                menuPosition={'right'}
+            <Page.FooterContent>
+              {showBrandedWallpaper && this.state.brandedWallpaper &&
+                this.state.brandedWallpaper.logo &&
+              <Page.GridItemBrandedLogo>
+                <BrandedWallpaperLogo
+                  menuPosition={'right'}
+                  textDirection={textDirection}
+                  data={this.state.brandedWallpaper.logo}
+                />
+              </Page.GridItemBrandedLogo>
+              }
+              <FooterInfo
                 textDirection={textDirection}
-                data={this.state.brandedWallpaper.logo}
+                onClickOutside={this.closeSettings}
+                backgroundImageInfo={generateRandomBackgroundData}
+                onClickSettings={this.toggleSettings}
+                showSettingsMenu={showSettingsMenu}
+                showPhotoInfo={!showBrandedWallpaper && showBackgroundImage}
+                toggleShowBackgroundImage={this.toggleShowBackgroundImage}
+                toggleShowClock={this.toggleShowClock}
+                toggleShowStats={this.toggleShowStats}
+                toggleShowTopSites={this.toggleShowTopSites}
+                toggleShowRewards={this.toggleShowRewards}
+                toggleBrandedWallpaperOptIn={this.toggleBrandedWallpaperOptIn}
+                showBackgroundImage={showBackgroundImage}
+                showClock={showClock}
+                showStats={showStats}
+                showTopSites={showTopSites}
+                showRewards={showRewards}
+                brandedWallpaperOptIn={this.state.brandedWallpaperOptIn}
               />
-            </Page.GridItemCredits>
-            }
-            <FooterInfo
-              textDirection={textDirection}
-              onClickOutside={this.closeSettings}
-              backgroundImageInfo={generateRandomBackgroundData}
-              onClickSettings={this.toggleSettings}
-              showSettingsMenu={showSettingsMenu}
-              showPhotoInfo={!showBrandedWallpaper && showBackgroundImage}
-              toggleShowBackgroundImage={this.toggleShowBackgroundImage}
-              toggleShowClock={this.toggleShowClock}
-              toggleShowStats={this.toggleShowStats}
-              toggleShowTopSites={this.toggleShowTopSites}
-              toggleShowRewards={this.toggleShowRewards}
-              toggleBrandedWallpaperOptIn={this.toggleBrandedWallpaperOptIn}
-              showBackgroundImage={showBackgroundImage}
-              showClock={showClock}
-              showStats={showStats}
-              showTopSites={showTopSites}
-              showRewards={showRewards}
-              brandedWallpaperOptIn={this.state.brandedWallpaperOptIn}
-            />
+            </Page.FooterContent>
           </Page.Footer>
         </Page.Page>
       </Page.App>