diff options
| author | Sarah German <sgerman@gitlab.com> | 2022-12-12 22:15:53 +0300 |
|---|---|---|
| committer | Sarah German <sgerman@gitlab.com> | 2022-12-12 23:06:12 +0300 |
| commit | 3a9d68d3ac103bdf410f8c8b0c3ff410899b25c4 (patch) | |
| tree | 7c3593a0896d07383e4f12fdbbabf72db0992d72 | |
| parent | d6a5033f8fd4c0f322e01049e0cf3a698149fd8e (diff) | |
Sticky footersarahg/sticky-footer
| -rw-r--r-- | layouts/default.html | 9 | ||||
| -rw-r--r-- | layouts/footer.html | 12 | ||||
| -rw-r--r-- | layouts/search.html | 16 |
3 files changed, 19 insertions, 18 deletions
diff --git a/layouts/default.html b/layouts/default.html index 2e81869c..bbf7ca51 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -8,7 +8,7 @@ <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90"> <%= render '/gtm.*' %> <%= render '/header.*' %> - <section class="gl-docs container-fluid gl-mt-9"> + <section class="gl-docs container-fluid"> <div class="row"> <div class="col-0 col-xl-2 pl-0"> <div class="nav-wrapper active"> @@ -21,7 +21,7 @@ <div id="js-nav-toggle"></div> </div> </div> - <div class="main pl-xl-4 wrapper js-main-wrapper col-12 col-xl-7"> + <div class="main pl-xl-4 wrapper js-main-wrapper col-12 col-xl-7 gl-h-100vh gl-display-flex gl-flex-direction-column"> <div class="row"> <div class="col"> <div id="js-version-banner" <%= 'data-is-outdated' if show_version_banner? %> data-latest-version-url='<%= @item.identifier.without_ext + '.html' %>' data-archives-url="/archives/"></div> @@ -35,7 +35,7 @@ <div class="row"> <div class="col"> <div class="my-3 my-xl-0"> - <a class="gl-absolute text-muted gl-mt-4 gl-pt-4 gl-text-decoration-none gl-border-bottom-0! mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a> + <a class="gl-absolute text-muted gl-mt-11 gl-text-decoration-none gl-border-bottom-0! mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a> </div> </div> </div> @@ -44,7 +44,7 @@ <div class="doc-nav"></div> </div> </div> - <main> + <main class="gl-flex-grow-1 gl-flex-shrink-0 gl-mt-9"> <div class="row"> <div class="col"> <div class="article-metadata"> @@ -121,4 +121,3 @@ <script src="<%= @items['/frontend/default/default.*'].path %>"></script> </body> </html> - diff --git a/layouts/footer.html b/layouts/footer.html index 609be938..c6e3ac5e 100644 --- a/layouts/footer.html +++ b/layouts/footer.html @@ -1,5 +1,5 @@ -<footer class="px-3 border-top footer"> - <div class="row py-2"> +<footer class="px-3 border-top footer gl-flex-shrink-0 gl-pb-7"> + <div class="row gl-py-4"> <div class="col-9"> <a href="https://gitlab.com/dashboard" target="_blank"> <img src="/assets/images/gitlab-logo.svg" alt="Sign in to GitLab.com" aria-hidden="true" role="img"> </a> </div> @@ -22,8 +22,8 @@ </div> </div> </div> - <div class="row py-2"> - <div class="col-12 py-1"> + <div class="row"> + <div class="col-12"> <ul class="list-unstyled list-group list-group-horizontal flex-wrap"> <li class="pr-3"> <a href='https://gitlab.com/gitlab-org/gitlab-docs'>Docs Repo</a> @@ -46,7 +46,7 @@ </ul> </div> </div> - <div class="row py-2"> + <div class="row"> <div class="col d-block"> <div class="d-block d-sm-inline-flex"> <p class="text-muted"> @@ -57,7 +57,7 @@ </div> </div> </div> - <div class="row py-2 d-block d-md-none"> + <div class="row d-block d-md-none"> <div class="col"> <ul class="list-unstyled list-inline my-0 d-flex flex-wrap"> <li> diff --git a/layouts/search.html b/layouts/search.html index 9d33e0b8..c286f877 100644 --- a/layouts/search.html +++ b/layouts/search.html @@ -11,20 +11,22 @@ <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script> <% end %> </head> - <body> + <body class="gl-h-100vh"> <%= render '/gtm.*' %> <%= render '/header.*' %> - <section class="gl-docs container pt-5"> - <div class="row"> - <div class="col-12 mt-5"> - <div class="main class pl-lg-4"> + <section class="gl-docs container"> + <div class="gl-h-100vh gl-display-flex gl-flex-direction-column"> + <div class="gl-flex-grow-1 gl-flex-shrink-0"> + <main class="col-12 pl-lg-4 gl-mt-5"> <% if @config[:algolia] == "true" %> <div class="js-instantsearch"></div> <% else %> <div class="js-lunrsearch"></div> <% end %> - <%= render '/footer.*' %> - </div> + </main> + </div> + <div class="gl-flex-shrink-0"> + <%= render '/footer.*' %> </div> </div> </section> |