From 20aaabb541b86f79fce8689dc556110f52d2b9f2 Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Mon, 12 Feb 2024 12:28:23 +0200 Subject: [PATCH 1/6] HD-22392 Added Osano cookie consent modified: _resource/overrides/main.html modified: docs/index.md new file: docs/js/consent.js modified: mkdocs-base.yml --- _resource/overrides/main.html | 2 +- _resource/overrides/partials/copyright.html | 2 +- .../partials/javascripts/consent.html | 65 +++++++++++++++++++ docs/index.md | 1 - docs/js/consent.js | 6 ++ docs/js/osano.js | 1 + mkdocs-base.yml | 8 ++- 7 files changed, 79 insertions(+), 6 deletions(-) create mode 100644 _resource/overrides/partials/javascripts/consent.html create mode 100644 docs/js/consent.js create mode 100644 docs/js/osano.js diff --git a/_resource/overrides/main.html b/_resource/overrides/main.html index d9e06b8c..fbdd41f5 100644 --- a/_resource/overrides/main.html +++ b/_resource/overrides/main.html @@ -6,7 +6,7 @@ {# Import the theme's layout. #} {% extends "base.html" %} - + {% block extrahead %} {{ super() }} {% set title = config.site_name %} diff --git a/_resource/overrides/partials/copyright.html b/_resource/overrides/partials/copyright.html index 4dc9e364..d91bc635 100644 --- a/_resource/overrides/partials/copyright.html +++ b/_resource/overrides/partials/copyright.html @@ -3,7 +3,7 @@ -#}
- Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} + Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} — Cookie Consent
{% if not config.extra.generator == false %} Made with diff --git a/_resource/overrides/partials/javascripts/consent.html b/_resource/overrides/partials/javascripts/consent.html new file mode 100644 index 00000000..159cd2ab --- /dev/null +++ b/_resource/overrides/partials/javascripts/consent.html @@ -0,0 +1,65 @@ + + + + +--> + + + \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index ca6b1cf2..de411052 100644 --- a/docs/index.md +++ b/docs/index.md @@ -52,4 +52,3 @@ Our comprehensive resources will help you overcome challenges, from everyday iss - diff --git a/docs/js/consent.js b/docs/js/consent.js new file mode 100644 index 00000000..b6f8a8ac --- /dev/null +++ b/docs/js/consent.js @@ -0,0 +1,6 @@ +var consent = __md_get("__consent") +if (consent && consent.custom) { + /* The user accepted the cookie */ +} else { + /* The user rejected the cookie */ +} \ No newline at end of file diff --git a/docs/js/osano.js b/docs/js/osano.js new file mode 100644 index 00000000..37964743 --- /dev/null +++ b/docs/js/osano.js @@ -0,0 +1 @@ + diff --git a/mkdocs-base.yml b/mkdocs-base.yml index 374d5c89..babfdd03 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -4,8 +4,7 @@ site_name: Percona Backup for MongoDB site_description: documentation site_author: Percona LLC copyright: > - Percona LLC and/or its affiliates © 2023 — Cookie Consent - + Percona LLC and/or its affiliates © 2024 — Cookie Consent repo_name: percona/pbm-docs repo_url: https://github.com/percona/pbm-docs @@ -55,7 +54,9 @@ extra_css: extra_javascript: - js/promptremover.js - - js/feedback.js +# - js/osano.js + - js/consent.js +# - js/feedback.js markdown_extensions: abbr: {} @@ -147,6 +148,7 @@ extra: cookies: analytics: Google Analytics github: Github + custom: Osano actions: - manage - accept From 29db05d4dccd55deb5bd89da381a732fd2ae465e Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Mon, 12 Feb 2024 14:11:26 +0200 Subject: [PATCH 2/6] Removed bult-in cookie support --- _resource/overrides/main.html | 4 ++ _resource/overrides/partials/copyright.html | 2 +- .../partials/javascripts/consent.html | 65 ------------------- mkdocs-base.yml | 31 +++++---- 4 files changed, 20 insertions(+), 82 deletions(-) delete mode 100644 _resource/overrides/partials/javascripts/consent.html diff --git a/_resource/overrides/main.html b/_resource/overrides/main.html index fbdd41f5..f2ba683d 100644 --- a/_resource/overrides/main.html +++ b/_resource/overrides/main.html @@ -6,6 +6,10 @@ {# Import the theme's layout. #} {% extends "base.html" %} +{% block scripts %} + +{{ super() }} +{% endblock %} {% block extrahead %} {{ super() }} diff --git a/_resource/overrides/partials/copyright.html b/_resource/overrides/partials/copyright.html index d91bc635..cbb1a420 100644 --- a/_resource/overrides/partials/copyright.html +++ b/_resource/overrides/partials/copyright.html @@ -3,7 +3,7 @@ -#}
- Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} — Cookie Consent + Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }}
{% if not config.extra.generator == false %} Made with diff --git a/_resource/overrides/partials/javascripts/consent.html b/_resource/overrides/partials/javascripts/consent.html deleted file mode 100644 index 159cd2ab..00000000 --- a/_resource/overrides/partials/javascripts/consent.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - ---> - - - \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index babfdd03..508853ec 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -4,8 +4,7 @@ site_name: Percona Backup for MongoDB site_description: documentation site_author: Percona LLC copyright: > - Percona LLC and/or its affiliates © 2024 — Cookie Consent - + Percona LLC and/or its affiliates © 2024 repo_name: percona/pbm-docs repo_url: https://github.com/percona/pbm-docs edit_uri: edit/main/docs/ @@ -138,20 +137,20 @@ plugins: extra: homepage: https://docs.percona.com - consent: - title: Cookie consent - description: >- - We use cookies to recognize your repeated visits and preferences, as well - as to measure the effectiveness of our documentation and whether users - find what they're searching for. With your consent, you're helping us to - make our documentation better. Read more about Percona Cookie Policy. - cookies: - analytics: Google Analytics - github: Github - custom: Osano - actions: - - manage - - accept +# consent: +# title: Cookie consent +# description: >- +# We use cookies to recognize your repeated visits and preferences, as well +# as to measure the effectiveness of our documentation and whether users +# find what they're searching for. With your consent, you're helping us to +# make our documentation better. Read more about Percona Cookie Policy. +# cookies: +# analytics: Google Analytics +# github: Github +# custom: Osano +# actions: +# - manage +# - accept nav: - Home: index.md From b2c9ce6038893dac927f279ad7b19184ebcd5fef Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Thu, 15 Feb 2024 11:51:29 +0200 Subject: [PATCH 3/6] Customized CSS for Osano display --- docs/css/osano.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++ mkdocs-base.yml | 1 + 2 files changed, 60 insertions(+) create mode 100644 docs/css/osano.css diff --git a/docs/css/osano.css b/docs/css/osano.css new file mode 100644 index 00000000..3f28d0ca --- /dev/null +++ b/docs/css/osano.css @@ -0,0 +1,59 @@ + + +.osano-cm-dialog { +background: var(--md-default-bg-color); +color: var(--md-typeset-color); +} + +.osano-cm-save { + background: var(--md-accent-bg-color); +} + +.osano-cm-button { +background-color:var(--md-default-bg-color); +border-color: var(--md-accent-fg-color); +color: var(--md-accent-fg-color); +border-radius: 10rem; +} + +.osano-cm-button:focus, .osano-cm-button:hover { +background-color: var(--md-accent-fg-color); +border-color: var(--md-accent-fg-color); +color: var(--md-accent-bg-color); +} + +.osano-cm-dialog__close:hover { +stroke: #ebebeb; +} + +.osano-cm-link { + color: var(--md-typeset-a-color); +} + +.osano-cm-link:hover, .osano-cm-link:active { + --webkit-tap-highlight-color: transparent; + color: var(--md-typeset-a-color); +} + +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch, .osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch, .osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { +background-color: var(--md-accent-fg-color); +border-color: var(--md-accent-fg-color); +} + +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch { +background-color: var(--md-accent-fg-color); +border-color: var(--md-accent-fg-color); +} + +.osano-cm-toggle__switch { +background-color: var(--md-footer-bg-color); +} + + +.osano-cm-disclosure__toggle:hover, .osano-cm-disclosure__toggle:active, .osano-cm-expansion-panel__toggle:hover, .osano-cm-expansion-panel__toggle:active { +color: var(--md-typeset-a-color); +} + +.osano-cm-disclosure__toggle, .osano-cm-expansion-panel__toggle { +color: var(--md-typeset-a-color); +} \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index 508853ec..13108ed6 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -50,6 +50,7 @@ extra_css: - css/percona.css - css/extra.css - css/design.css + - css/osano.css extra_javascript: - js/promptremover.js From 8c116b8f8bd8220f18264f035a94ddde5fb3c956 Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Thu, 15 Feb 2024 12:20:27 +0200 Subject: [PATCH 4/6] Fixed the button background --- docs/css/osano.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/css/osano.css b/docs/css/osano.css index 3f28d0ca..652204ca 100644 --- a/docs/css/osano.css +++ b/docs/css/osano.css @@ -10,7 +10,7 @@ color: var(--md-typeset-color); } .osano-cm-button { -background-color:var(--md-default-bg-color); +background-color: unset; border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); border-radius: 10rem; From 2011af3f8469632f9fc0908c5e4810917ea66a29 Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Thu, 15 Feb 2024 16:22:12 +0200 Subject: [PATCH 5/6] Added background shadowing --- docs/css/osano.css | 5 +++++ docs/js/feedback.js | 11 ----------- docs/js/osano.js | 1 - mkdocs-base.yml | 2 -- 4 files changed, 5 insertions(+), 14 deletions(-) delete mode 100644 docs/js/feedback.js delete mode 100644 docs/js/osano.js diff --git a/docs/css/osano.css b/docs/css/osano.css index 652204ca..1bbf6fe5 100644 --- a/docs/css/osano.css +++ b/docs/css/osano.css @@ -1,3 +1,8 @@ +.osano-cm-dialog--type_bar { +color: #000; +background: #fff; +box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66) +} .osano-cm-dialog { diff --git a/docs/js/feedback.js b/docs/js/feedback.js deleted file mode 100644 index fcf4709a..00000000 --- a/docs/js/feedback.js +++ /dev/null @@ -1,11 +0,0 @@ -var feedback = document.forms.feedback -feedback.addEventListener("submit", function(ev) { - ev.preventDefault() - - /* Retrieve page and feedback value */ - var page = document.location.pathname - var data = ev.submitter.getAttribute("data-md-value") - - /* Send feedback value */ - console.log(page, data) -}) diff --git a/docs/js/osano.js b/docs/js/osano.js deleted file mode 100644 index 37964743..00000000 --- a/docs/js/osano.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/mkdocs-base.yml b/mkdocs-base.yml index 13108ed6..ce36a92c 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -54,9 +54,7 @@ extra_css: extra_javascript: - js/promptremover.js -# - js/osano.js - js/consent.js -# - js/feedback.js markdown_extensions: abbr: {} From 24f8fee1f28b94b5edb8ac668030de37b7c0b205 Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Mon, 26 Feb 2024 10:51:34 +0100 Subject: [PATCH 6/6] Hid osano cookie widget --- _resource/overrides/partials/copyright.html | 1 + docs/css/osano.css | 226 ++++++++++++++++---- mkdocs-base.yml | 1 + 3 files changed, 186 insertions(+), 42 deletions(-) diff --git a/_resource/overrides/partials/copyright.html b/_resource/overrides/partials/copyright.html index cbb1a420..383b48fe 100644 --- a/_resource/overrides/partials/copyright.html +++ b/_resource/overrides/partials/copyright.html @@ -4,6 +4,7 @@
Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} + — Cookie Preferences
{% if not config.extra.generator == false %} Made with diff --git a/docs/css/osano.css b/docs/css/osano.css index 1bbf6fe5..b89fa6ac 100644 --- a/docs/css/osano.css +++ b/docs/css/osano.css @@ -1,64 +1,206 @@ +/* General styling */ + +.osano-cm-window { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 20px; +} .osano-cm-dialog--type_bar { -color: #000; -background: #fff; -box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66) + justify-content: center; + color: #000; + background: #fff; + box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66) } - .osano-cm-dialog { -background: var(--md-default-bg-color); -color: var(--md-typeset-color); + font-size: 0.75em; + padding: 2em 1em; + color: var(--md-typeset-color); + background: var(--md-footer-bg-color--dark); } - -.osano-cm-save { - background: var(--md-accent-bg-color); +.osano-cm-header, +.osano-cm-info-dialog-header { + background: var(--md-default-bg-color); } - -.osano-cm-button { -background-color: unset; -border-color: var(--md-accent-fg-color); -color: var(--md-accent-fg-color); -border-radius: 10rem; +.osano-cm-link, +.osano-cm-disclosure__toggle, +.osano-cm-expansion-panel__toggle { + color: var(--md-typeset-a-color); } - -.osano-cm-button:focus, .osano-cm-button:hover { -background-color: var(--md-accent-fg-color); -border-color: var(--md-accent-fg-color); -color: var(--md-accent-bg-color); +.osano-cm-link:hover, +.osano-cm-link:active, +.osano-cm-disclosure__toggle:hover, +.osano-cm-disclosure__toggle:active, +.osano-cm-disclosure__toggle:focus, +.osano-cm-expansion-panel__toggle:hover, +.osano-cm-expansion-panel__toggle:active, +.osano-cm-expansion-panel__toggle:focus { + color: var(--md-accent-fg-color); } - -.osano-cm-dialog__close:hover { -stroke: #ebebeb; +.osano-cm-drawer-links { + display: inline-block; } - -.osano-cm-link { - color: var(--md-typeset-a-color); +.osano-cm-link.osano-cm-storage-policy { + margin-right: 0.5em; } - -.osano-cm-link:hover, .osano-cm-link:active { - --webkit-tap-highlight-color: transparent; - color: var(--md-typeset-a-color); +.osano-cm-description { + font-weight: 400; } - -.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch, .osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch, .osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { -background-color: var(--md-accent-fg-color); -border-color: var(--md-accent-fg-color); +.osano-cm-info { + color: var(--md-typeset-color); + background: var(--md-default-bg-color); + box-shadow: unset; +} +.osano-cm-dialog--hidden, +.osano-cm-info-dialog--hidden { + transition-delay: 0ms, 0ms; +} +.osano-cm-disclosure { + padding-top: 0; } +.osano-cm-disclosure--collapse { + border-color: var(--md-default-fg-color--lightest); +} + +/* Closing button */ -.osano-cm-toggle__input:checked + .osano-cm-toggle__switch { -background-color: var(--md-accent-fg-color); -border-color: var(--md-accent-fg-color); +.osano-cm-dialog__close, +.osano-cm-dialog__close:hover, +.osano-cm-dialog__close:focus, +.osano-cm-dialog__close:focus:hover { + color: var(--md-typeset-color); + stroke: var(--md-typeset-color); + border-color: transparent; + outline: initial; +} +.osano-cm-dialog__close:focus { + background-color: var(--md-default-fg-color--lightest); +} +.osano-cm-close { + padding: 0.25em; + margin: 0.5em; + stroke-width: 2px; + border-width: 2px; + opacity: 0.4; +} +.osano-cm-close:focus, +.osano-cm-close:hover { + stroke-width: 2px; + opacity: 1; +} +.osano-cm-info-dialog-header__close:focus { + background-color: var(--md-typeset-color); } +/* Switch buttons */ + .osano-cm-toggle__switch { -background-color: var(--md-footer-bg-color); + background-color: var(--md-default-fg-color--lightest); + transition: all 0.1s ease-out; +} +.osano-cm-toggle__input:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--lightest); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + opacity: 0.3; + cursor: not-allowed; +} +.osano-cm-toggle__input + .osano-cm-toggle__switch::after { + background-color: var(--md-default-bg-color) !important; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch::before { + border-color: transparent; +} +.osano-cm-list { + gap: 0.75em; } +/* CTA Buttons */ -.osano-cm-disclosure__toggle:hover, .osano-cm-disclosure__toggle:active, .osano-cm-expansion-panel__toggle:hover, .osano-cm-expansion-panel__toggle:active { -color: var(--md-typeset-a-color); +.osano-cm-dialog__buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 0.5em 0.75em; +} +.osano-cm-button { + font-family: var(--fHeading); + flex: 1 1 20em; + color: var(--md-primary-fg-color); + background-color: transparent; + border-width: 2px; + border-color: var(--md-primary-fg-color); + border-radius: 20em; } +.osano-cm-button:hover { + color: var(--md-accent-fg-color); + background-color: transparent; + border-color: var(--md-accent-fg-color); +} + +/* Widget */ + +.osano-cm-widget { + display: none; + opacity: 0.5; + border-radius: 10em; + bottom: 3em; +} +.osano-cm-widget:focus { + outline-offset: 0.125em; + outline-color: var(--md-default-fg-color--lighter); + outline-width: 0.1875em; +} +.osano-cm-widget__outline { + fill: transparent; + stroke: var(--md-typeset-color); +} +.osano-cm-widget__dot { + fill: var(--md-typeset-color); +} + +/* Media conditions */ -.osano-cm-disclosure__toggle, .osano-cm-expansion-panel__toggle { -color: var(--md-typeset-a-color); +@media screen and (min-width: 768px) { + .osano-cm-dialog--type_bar .osano-cm-dialog__content { + max-width: 50em; + } + .osano-cm-dialog--type_bar .osano-cm-dialog__buttons { + max-width: 20em; + } } \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index ce36a92c..d8d06ecf 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -5,6 +5,7 @@ site_description: documentation site_author: Percona LLC copyright: > Percona LLC and/or its affiliates © 2024 + — Cookie Preferences repo_name: percona/pbm-docs repo_url: https://github.com/percona/pbm-docs edit_uri: edit/main/docs/