Skip to content

Commit

Permalink
[docs] Fix dashboard height issue (#5799)
Browse files Browse the repository at this point in the history
* [docs] Fix dashboard hight issue

#5795, merged yesterday,
contained a flawed assumption: that a warning banner was always
displayed. This is not the case and led to the latest docs page wrapper
height being incorrect.

This changes the management of the messages and dashboard wrapper to be
in the same place and makes a change so that the height can be correctly
calculated regardless of the version.

Signed-off-by: Charlie Egan <[email protected]>
  • Loading branch information
charlieegan3 authored Mar 30, 2023
1 parent 2d1583e commit 7abe178
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 62 deletions.
4 changes: 2 additions & 2 deletions docs/website/assets/js/app.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
function initBannerVersionWarningCloseButton() {
$(".banner-version-warning").find(".delete").click(function() {
$(".dashboard-wrapper").addClass("banner-version-warning-dismissed");
$(".dashboard-wrapper").removeClass("showing-banner-version-warning");
});
}

Expand Down Expand Up @@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
contentSelector: '.content',
headingSelector: 'h1, h2, h3, h4, h5',
scrollSmooth: false,
scrollContainer: ".dashboard-main",
scrollContainer: ".article",
scrollEndCallback: function(e) {
// Make sure the current ToC item we are on is visible in the nav bar
$('.docs-nav-item.is-active')[0].scrollIntoView();
Expand Down
24 changes: 13 additions & 11 deletions docs/website/assets/sass/docs.sass
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
$panel-header-logo-width: 85%

.dashboard-main
.article
+desktop
// this is the height of the navbar and warning banner
max-height: calc(100vh - 10.5rem)
overflow: scroll
.dashboard-wrapper.banner-version-warning-dismissed
.dashboard-wrapper
.banner-version-warning
display: none
.dashboard-main
.article
+desktop
// this is the height of the warning banner only
// this is the height of the navbar only
max-height: calc(100vh - 3.5rem)
overflow: scroll
.dashboard-wrapper.showing-banner-version-warning
.banner-version-warning
display: block
.dashboard-main
.article
+desktop
// this is the height of the navbar and warning banner
max-height: calc(100vh - 10.5rem)

=flex
display: flex
Expand Down Expand Up @@ -189,6 +194,3 @@ $panel-header-logo-width: 85%
border-image: 50 repeating-linear-gradient(75deg, #946c00 0, #946c00 1rem, transparent 0, transparent 2rem)
&.is-info
border-image: 50 repeating-linear-gradient(75deg, #296fa8 0, #296fa8 1rem, transparent 0, transparent 2rem)

.dashboard-wrapper.banner-version-warning-dismissed .banner-version-warning
display: none
2 changes: 0 additions & 2 deletions docs/website/layouts/docs/section.en.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,5 @@
{{ end }}

{{ define "main" }}
<div class="dashboard-wrapper">
{{ partial "docs/dashboard.html" . }}
</div>
{{ end }}
2 changes: 0 additions & 2 deletions docs/website/layouts/docs/single.en.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,5 @@
{{ end }}

{{ define "main" }}
<div class="dashboard-wrapper">
{{ partial "docs/dashboard.html" . }}
</div>
{{ end }}
39 changes: 0 additions & 39 deletions docs/website/layouts/partials/docs/banner-version-warning.html

This file was deleted.

55 changes: 49 additions & 6 deletions docs/website/layouts/partials/docs/dashboard.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,53 @@
{{ partial "docs/banner-version-warning.html" . }}
{{- $latest := "latest" -}}
{{- if eq (len site.Data.releases) 1 -}}
{{- $latest = "edge" -}}
{{- end -}}

<div class="dashboard">
{{ partial "docs/dashboard-panel.html" . }}
{{ $releases := site.Data.releases }}

<div class="dashboard-main is-scrollable">
{{ partial "docs/navbar.html" . }}
{{ partial "docs/article.html" . }}
{{ $version := index (split .File.Path "/") 1 }}

{{ $latestVersionString := printf "%s" (index $releases 1) }}
{{- if eq (len $releases) 1 -}}
{{- $latestVersionString = "(dev preview)" -}}
{{- end -}}

{{ $rank := 1 }}
{{- range $index, $ver := site.Data.releases -}}
{{- if eq $ver $version -}}
{{ $rank = $index }}
{{- end -}}
{{- end -}}
{{ $ancient := gt $rank 5 }}

{{ $isEdge := (eq $version "edge") }}
{{ $isNotLatest := (and (ne $version $latest) (ne $version $latestVersionString)) }}

<div class="dashboard-wrapper {{ if (or $isEdge $isNotLatest) }}showing-banner-version-warning{{ end }}">
{{- if $isEdge }}
<div class="message is-info banner-version-warning">
<div class="message-body">
This version is still under development! Latest stable release is <a href="/docs/latest">{{ $latestVersionString }}</a>
<button class="delete" aria-label="delete"></button>
</div>
</div>
{{- else if $isNotLatest }}
<div class="message {{ cond $ancient "is-danger" "is-warning"}} banner-version-warning">
<div class="message-body">
These are the docs for an older version of OPA ({{ $version }}). Latest stable release is <a href="/docs/latest">{{ $latestVersionString }}</a>
{{ if not $ancient }}
<button class="delete" aria-label="delete"></button>
{{ end }}
</div>
</div>
{{- end }}

<div class="dashboard">
{{ partial "docs/dashboard-panel.html" . }}

<div class="dashboard-main is-scrollable">
{{ partial "docs/navbar.html" . }}
{{ partial "docs/article.html" . }}
</div>
</div>
</div>

0 comments on commit 7abe178

Please sign in to comment.