diff --git a/src/_includes/page-github-links.html b/src/_includes/page-github-links.html deleted file mode 100644 index 1e1b8b981e..0000000000 --- a/src/_includes/page-github-links.html +++ /dev/null @@ -1,11 +0,0 @@ -{% assign repo = repo | default: site.repo.this -%} -{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%} -{% assign siteTitle = title | default: page.url | escape -%} -{% assign url = site.url | append: page.url -%} - -

- Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}. - View source - or - report an issue. -

diff --git a/src/_includes/trailing.html b/src/_includes/trailing.html new file mode 100644 index 0000000000..9bf5593196 --- /dev/null +++ b/src/_includes/trailing.html @@ -0,0 +1,40 @@ +{% assign repo = repo | default: site.repo.this -%} +{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%} +{% assign url = site.url | append: page.url -%} + +
+
+ + + +
+ +

+ Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}. + View source + or + report an issue. +

+
diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 8e79da9462..38a8716412 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -18,6 +18,10 @@ {%- if isProduction == true -%} + {% endif -%} + - {% endif -%} {% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%} {% unless desc and desc != '' -%} diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 2724c3ecb3..991ea9ebd1 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -32,7 +32,7 @@

{{ title }}

{% include next-prev-nav.html prev=prev, next=next %} - {% include page-github-links.html %} + {% include trailing.html %} diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss index 2e2f661548..47786ed7f6 100644 --- a/src/_sass/components/_button.scss +++ b/src/_sass/components/_button.scss @@ -24,7 +24,7 @@ a, button { background: none; cursor: pointer; - &.filled-button { + &.filled-button, &.text-button { display: flex; align-items: center; width: fit-content; @@ -32,12 +32,16 @@ a, button { outline-offset: 2px; border-radius: 24px; font-weight: 500; + gap: 0.3rem; padding: 0.5rem 1rem; - background-color: $site-color-primary; - color: $site-color-white; text-decoration: none; cursor: pointer; user-select: none; + } + + &.filled-button { + background-color: $site-color-primary; + color: $site-color-white; &:hover { @include mixins.interaction-style(8%); @@ -48,6 +52,18 @@ a, button { } } + &.text-button { + color: $site-color-primary; + + &:hover { + @include mixins.interaction-style(4%); + } + + &:active { + @include mixins.interaction-style(8%); + } + } + &.icon-button { border-radius: 0.25rem; padding: 0.25rem; diff --git a/src/_sass/components/_misc.scss b/src/_sass/components/_misc.scss index d8d7479d61..4b889e88ea 100644 --- a/src/_sass/components/_misc.scss +++ b/src/_sass/components/_misc.scss @@ -32,15 +32,6 @@ } } -#page-github-links { - font-style: italic; - font-size: 0.75rem; - padding-top: 0.5rem; - margin-bottom: 0; - - border-top: 0.05rem solid $site-color-light-grey; -} - // A big button centered on top of an image. // // The container is typically a
element. The div has only 2 children: diff --git a/src/_sass/components/_trailing.scss b/src/_sass/components/_trailing.scss new file mode 100644 index 0000000000..8d732156e0 --- /dev/null +++ b/src/_sass/components/_trailing.scss @@ -0,0 +1,76 @@ +@use '../base/variables' as *; + +#trailing-content { + font-size: 0.875rem; + margin: 0; + margin-block-start: 1rem; + font-family: $site-font-family-ui; + + border-top: 0.05rem solid $site-color-light-grey; +} + +#page-feedback { + display: flex; + align-items: center; + justify-content: center; + margin-block: 0.25rem 0; + padding: 0.25rem; + height: 4.25rem; + + > .feedback { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.2rem; + + .text-button { + padding: 0.25rem 0.5rem; + + span.material-symbols { + font-size: 18px; + } + } + } + + .initial-feedback { + .feedback-buttons { + display: flex; + flex-direction: row; + gap: 0.5rem; + + span.material-symbols { + font-size: 20px; + } + } + } + + .good-feedback, .bad-feedback { + display: none; + } + + &.feedback-up { + .initial-feedback { + display: none; + } + + .good-feedback { + display: flex; + } + } + + &.feedback-down { + .initial-feedback { + display: none; + } + + .bad-feedback { + display: flex; + } + } +} + +#page-github-links { + font-style: italic; + font-size: 0.75rem; + margin-bottom: 0; +} diff --git a/src/_sass/site.scss b/src/_sass/site.scss index 5a2f73f72a..6841f05b6a 100644 --- a/src/_sass/site.scss +++ b/src/_sass/site.scss @@ -27,6 +27,7 @@ @use 'components/site-switcher'; @use 'components/tabs'; @use 'components/toc'; +@use 'components/trailing'; // Styles for specific pages, alphabetically ordered. @use 'pages/not-found'; diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index 4841df9711..e7023fffec 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -389,6 +389,28 @@ function setupSiteSwitcher() { }); } +function setupFeedback() { + const feedbackContainer = + document.getElementById('page-feedback'); + if (!feedbackContainer) return; + + const feedbackUpButton = feedbackContainer.querySelector('#feedback-up-button'); + const feedbackDownButton = feedbackContainer.querySelector('#feedback-down-button'); + if (!feedbackUpButton || !feedbackDownButton) return; + + feedbackUpButton.addEventListener('click', (_) => { + window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'up'}); + + feedbackContainer.classList.add('feedback-up'); + }, { once: true }); + + feedbackDownButton.addEventListener('click', (_) => { + window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'down'}); + + feedbackContainer.classList.add('feedback-down'); + }, { once: true }); +} + function setupSite() { scrollSidenavIntoView(); initCookieNotice(); @@ -401,6 +423,7 @@ function setupSite() { setupTabs(); setupToc(); + setupFeedback(); } if (document.readyState === 'loading') {