Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(v2): add sticky footer #1855

Merged
merged 4 commits into from
Oct 23, 2019
Merged

feat(v2): add sticky footer #1855

merged 4 commits into from
Oct 23, 2019

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented Oct 18, 2019

Motivation

Stick footer to bottom of page like as in v1.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

  • Zoom out on any page or open page with small content (eg 404 page)
Before After
image image

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 18, 2019
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Oct 18, 2019 •
edited
Loading

Deploy preview for docusaurus-2 ready!

Built with commit df2cded

https://deploy-preview-1855--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Oct 18, 2019 •
edited
Loading

Deploy preview for docusaurus-preview ready!

Built with commit df2cded

https://deploy-preview-1855--docusaurus-preview.netlify.com

@lex111
Copy link
Contributor Author

lex111 commented Oct 22, 2019

Any updates? 😃

yangshun
yangshun suggested changes Oct 22, 2019
View reviewed changes
Copy link
Contributor

@yangshun yangshun left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been one of my pain points. Thanks for tackling it!

I think the sticky footer approach by Bootstrap might be better as it requires less code to achieve - https://getbootstrap.com/docs/4.3/examples/sticky-footer/

WDYT?

packages/docusaurus-theme-classic/src/theme/Layout/styles.css
body {
margin: 0;
padding-top: var(--ifm-navbar-height);
transition: var(--ifm-transition-fast) ease color;
}

body > div {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better not to use tags directly (except for html/body)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we add these styles to body instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we add these styles to body instead?

Nope, we need to apply styles to the root element, i.e. id="__docusaurus", but it seemed like a bad use to me (this name can change, but here body > div applies just to the root element, which will always be one in the body tag.

The same goes for the Bootstrap approach.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, as for the Bootstrap approach - there the styles are also applied to the footer, which can be hidden (noFooter), then CSS rules for it needs to be defined in its component - Footer, not Layout. I want to say that the current approach is more integral - the change is only in Layout.

yangshun
yangshun approved these changes Oct 23, 2019
View reviewed changes
Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Thanks for this!

@yangshun yangshun merged commit 68d5adf into facebook:master Oct 23, 2019
@endiliey endiliey mentioned this pull request Oct 25, 2019
Merged
yangshun pushed a commit that referenced this pull request Oct 27, 2019
@lex111 @yangshun
feat(v2): allow line highlighting (#1860)
9c69dfd 
* feat(v2): allow line highlighting

* Refactor: use parse-numeric-range for parsing

* Add line highlighting for live code blocks

* feat(v2): add sticky footer (#1855)

* feat(v2): add sticky footer

* Update CHANGELOG-2.x.md

* Update CHANGELOG-2.x.md

* fix(v2): remove empty doc sidebar container (#1870)

* docs: showcase user Amphora (#1873)

* Add Amphora Data link to users

Adds Amphora Data to the list of users

* Add Amphora Data logo

* fix case of image path

* Move Image into users directory

* use black amphora image

* fix(v2): fix search input blur on desktop (#1874)

* docs(v2): showcase user mbt-bundle (#1875)

* feat(v2): postcss should only use stage 3 features instead of stage 2 (#1872)

* feat(v2): add ability expand all items in doc sidebar (#1876)

* feat(v2): add ability expand all items in doc sidebar

* Fix tests

* Refactor: use themeConfig

* Improve docs

* Revert unnecessary  changes

* Refactor: better consistency

* Revert extra change

* Refactor: use useDocusaurusContext to get config value

* chore(v2): update changelog

* chore(v2): update showcase and broken link

* perf(v2): disable hash for css modules localident in dev (#1882)

* perf(v2): disable hash for css modules localident in dev

* changelog

* feat(v2): display footer in docs page for consistency (#1883)

* feat(v2): display footer in docs page

* nits

* address review

* nits

* docs(v2): fix format inline code (#1888)

* docs(v2): add docs on useful client api (#1890)

* docs(v2): add docs on useful client api

* Update docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* docs(v2): update config docs (#1885)

* fix(v2): do not show categories with empty items (#1891)

* styles(v2): update infima and fix styles (#1892)

* fix(v2): wrong css class

* v2.0.0-alpha.31

* chore(v2): update docs and changelog

* docs(v2): update plugins, presets and themes docs (#1889)

* docs(v2): update plugins, presets and themes docs

* ideal image plugin

* proof reading

* Merge master

* refactor(v2): Convert sitemap plugin to TypeScript (#1894)

* Convert sitemap plugin to TypeScript

Test - enabled the sitemap plugin in the v2 website and verified that
the sitemap is created after running `docusaurus build`.

* Addressing review comments

* perf(v2): significantly reduce bundle size & initial html payload (#1898)

* perf(v2): reduce bundle size significantly with super short chunk name and registry

* changelog

* use hash:8 as id for better long term caching

* even shorter filename. slice contenthash

* fix(v2): align search icon on small width device (#1893)

* fix(v2): align search icon on small width device

* nits

* nits

* refactor(v2): refactor dark toggle into a hook (#1899)

* change(v2): refactor dark toggle into a theme

* follow how themes resolve files

* let theme hook to pick up default theme by itself

* perf(v2): reduce memory usage consumption (#1900)

* misc(v1): use primary color for hovered items in table of contents (#1871)

* fix issue#1752

when element in side nav is hovered over the color changes.

* Update main.css

* fix(v1): mobile safari search input misalignment in header (#1895)

* misc(v2): v1 backward compatibility for USE_SSH env var (#1880)

* misc(v2): address comments

* misc(v2): update CHANGELOG
yangshun pushed a commit that referenced this pull request Nov 5, 2019
@SantiagoGdaR @yangshun
feat(v2): highlight items in the table of content (#1896)
3e58062 
* feat(v2): highlight items in the table of content

* refactor: move string to const

* refactor(v2): Convert sitemap plugin to TypeScript (#1894)

* Convert sitemap plugin to TypeScript

Test - enabled the sitemap plugin in the v2 website and verified that
the sitemap is created after running `docusaurus build`.

* Addressing review comments

* perf(v2): significantly reduce bundle size & initial html payload (#1898)

* perf(v2): reduce bundle size significantly with super short chunk name and registry

* changelog

* use hash:8 as id for better long term caching

* even shorter filename. slice contenthash

* fix(v2): align search icon on small width device (#1893)

* fix(v2): align search icon on small width device

* nits

* nits

* refactor(v2): refactor dark toggle into a hook (#1899)

* change(v2): refactor dark toggle into a theme

* follow how themes resolve files

* let theme hook to pick up default theme by itself

* perf(v2): reduce memory usage consumption (#1900)

* misc(v1): use primary color for hovered items in table of contents (#1871)

* fix issue#1752

when element in side nav is hovered over the color changes.

* Update main.css

* fix(v1): mobile safari search input misalignment in header (#1895)

* misc(v2): v1 backward compatibility for USE_SSH env var (#1880)

* misc(v2): address comments

* misc(v2): update CHANGELOG

* feat(v2): allow line highlighting (#1860)

* feat(v2): allow line highlighting

* Refactor: use parse-numeric-range for parsing

* Add line highlighting for live code blocks

* feat(v2): add sticky footer (#1855)

* feat(v2): add sticky footer

* Update CHANGELOG-2.x.md

* Update CHANGELOG-2.x.md

* fix(v2): remove empty doc sidebar container (#1870)

* docs: showcase user Amphora (#1873)

* Add Amphora Data link to users

Adds Amphora Data to the list of users

* Add Amphora Data logo

* fix case of image path

* Move Image into users directory

* use black amphora image

* fix(v2): fix search input blur on desktop (#1874)

* docs(v2): showcase user mbt-bundle (#1875)

* feat(v2): postcss should only use stage 3 features instead of stage 2 (#1872)

* feat(v2): add ability expand all items in doc sidebar (#1876)

* feat(v2): add ability expand all items in doc sidebar

* Fix tests

* Refactor: use themeConfig

* Improve docs

* Revert unnecessary  changes

* Refactor: better consistency

* Revert extra change

* Refactor: use useDocusaurusContext to get config value

* chore(v2): update changelog

* chore(v2): update showcase and broken link

* perf(v2): disable hash for css modules localident in dev (#1882)

* perf(v2): disable hash for css modules localident in dev

* changelog

* feat(v2): display footer in docs page for consistency (#1883)

* feat(v2): display footer in docs page

* nits

* address review

* nits

* docs(v2): fix format inline code (#1888)

* docs(v2): add docs on useful client api (#1890)

* docs(v2): add docs on useful client api

* Update docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* Update website/docs/docusaurus-core.md

* docs(v2): update config docs (#1885)

* fix(v2): do not show categories with empty items (#1891)

* styles(v2): update infima and fix styles (#1892)

* fix(v2): wrong css class

* v2.0.0-alpha.31

* chore(v2): update docs and changelog

* docs(v2): update plugins, presets and themes docs (#1889)

* docs(v2): update plugins, presets and themes docs

* ideal image plugin

* proof reading

* Merge master

* refactor(v2): Convert sitemap plugin to TypeScript (#1894)

* Convert sitemap plugin to TypeScript

Test - enabled the sitemap plugin in the v2 website and verified that
the sitemap is created after running `docusaurus build`.

* Addressing review comments

* perf(v2): significantly reduce bundle size & initial html payload (#1898)

* perf(v2): reduce bundle size significantly with super short chunk name and registry

* changelog

* use hash:8 as id for better long term caching

* even shorter filename. slice contenthash

* fix(v2): align search icon on small width device (#1893)

* fix(v2): align search icon on small width device

* nits

* nits

* refactor(v2): refactor dark toggle into a hook (#1899)

* change(v2): refactor dark toggle into a theme

* follow how themes resolve files

* let theme hook to pick up default theme by itself

* perf(v2): reduce memory usage consumption (#1900)

* misc(v1): use primary color for hovered items in table of contents (#1871)

* fix issue#1752

when element in side nav is hovered over the color changes.

* Update main.css

* fix(v1): mobile safari search input misalignment in header (#1895)

* misc(v2): v1 backward compatibility for USE_SSH env var (#1880)

* misc(v2): address comments

* misc(v2): update CHANGELOG

* docs(v1): remove user Vasern (#1901)

* misc: update URLs to non-HTML versions (#1902)

* Update README.md - Fix Broken Link

* misc: update URLs to non-HTML versions

* misc(v2): improve index page SEO score

* fix(v2): accessing /docs or /docs/xxxx should not be empty (#1903)

* fix(v2): nested routes should have wildcard/ not found page too

* better fix

* nits

* space

* docs(v2): code block line highlighting (#1904)

* docs(v2): code block line highlighting

* misc: update CHANGELOG

* misc: respond to review

* docs: add line highlighting to the template

* fix(v2): webpack modules resolve should prioritize @docusaurus/core own deps (#1907)

* fix(v2): webpack modules resolve should prioritize own deps

* nits

* feat(v2): simplify blog metadata to minimize number of request (#1908)

* feat(v2): simplify blog metadata to minimize number of request

* remove async

* feat(v2): add ability to set custom HTML in footer items (#1905)

* docs: update configcat user link (#1911)

* fix(v2): docs plugin stability improvement (100% test coverage) (#1912)

* update jest config

* add more tests on docs plugin

* fix(v2): docs plugin should not add routes if there are no docs

* fix

* rm -rf coverage

* nits

* update

* docs(v2): add windows batch instructions for publishing to gh pages (#1914)

* docs: add windows batch instructions for publishing to gh pages

* docs: add windows batch instructions on the v2 website

* fix(v2): custom searchbar should appear even if themeconfig.algolia is undefined (#1909)

* fix(v2): custom searchbar should appear even if themeconfig.algolia is undefined

* nits

* Docs docs

* inaccuracy

* changelog

* nits

* fix(v2): missing/hidden algolia search suggestion result (#1915)

* docs(v2): Redirect component for easy redirect (#1913)

* docs(v2): Redirect component for easy redirect

* typo

* docs

* Update website/docs/docusaurus-core.md

Co-Authored-By: Alexey Pyltsyn <[email protected]>

* Update docusaurus-core.md

* refactor: changes after comments (use custom hooks, code changes, fix bugs)

* fix(v2): regression from prioritizing core node_modules logic (#1917)

* fix(v2): regression from prioritizing core node_modules logic

* nits

* chore: changelog

* docs(v1): showcase user Reactive Interaction Gateway (#1918)

* chore: bump dependencies

* docs(v2): fix typo in advanced plugins (#1926)

* docs(v2): fix typos (#1930)

* docs(v1): fix links in CHANGELOG (#1931)

* fix(v2): @theme/heading should not create anchor if id is not defined (#1925)

* docs(v2): theme, plugin, and preset config (#1929)

* docs(v2): theme, plugin, and preset config

* change tabs to spaces

* change theme example

* misc: use /usr/bin/env bash to increase portability (#1923)

* misc(v1): use Node.js lts version (#1920)

This is much stable and more performant

* chore: downgrade imagemin (#1933)

* fix(v2): add missing key prop in footer items with HTML (#1935)

* fix(v2): fix browser window background (#1936)

* fix(v2): allows to create tabs with only one item (#1934)

* fix(v2): allow to create tabs with only one item

It was not possible to have tabs containing only one tab item, so the code below crashed

```
<Tabs
    defaultValue="SomeFile.js"
    values={[
        { label: "SomeFile.js", value: "SomeFile.js" }
    ]}
>
<TabItem value="SomeFile.js">
    Tab content
</TabItem>
</Tabs>
```

* Update index.js

* fix(v2): remove redundant npm script in classic template (#1937)

* v2.0.0-alpha.32

* chore(v2): changelog

* misc(v2): update TOC highlight

* misc(v2): update CHANGELOG
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yangshun yangshun yangshun approved these changes

@wgao19 wgao19 Awaiting requested review from wgao19

Assignees
No one assigned
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@lex111 @docusaurus-bot @yangshun @facebook-github-bot