From 582b7e659891322f63e0ec52445aa72e336a4865 Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Thu, 25 Jul 2024 02:13:27 +0200 Subject: [PATCH 1/2] chore(site): small fixes for common styles --- site/src/common/alert.less | 10 ++++------ site/src/common/colors.less | 3 +++ site/src/common/markdown.less | 6 ++++++ 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/site/src/common/alert.less b/site/src/common/alert.less index 6dfc3b0f4..194426800 100644 --- a/site/src/common/alert.less +++ b/site/src/common/alert.less @@ -16,12 +16,10 @@ } } - /* stylelint-disable */ - .alert-color (~'success', @primary-green); - .alert-color (~'info', @primary-blue); - .alert-color (~'warning', @primary-orange); - .alert-color (~'danger', @primary-orange-dark); - /* stylelint-enable */ + .alert-color(~'success', @primary-green); + .alert-color(~'info', @primary-blue); + .alert-color(~'warning', @primary-orange); + .alert-color(~'danger', @primary-orange-dark); } esl-alert.alert { diff --git a/site/src/common/colors.less b/site/src/common/colors.less index 6fff5dc93..7b856d154 100644 --- a/site/src/common/colors.less +++ b/site/src/common/colors.less @@ -64,6 +64,9 @@ &-white { color: #fff !important; } + &-info { + color: @primary-green-dark !important; + } } // Borders diff --git a/site/src/common/markdown.less b/site/src/common/markdown.less index 2f89be10e..994fde257 100644 --- a/site/src/common/markdown.less +++ b/site/src/common/markdown.less @@ -35,4 +35,10 @@ font-weight: 500; letter-spacing: 1px; } + + &.no-margin { + p:last-child { + margin-block-end: 0; + } + } } From a8758c61dc689152597b54b8fb8d71c7d2b7c13f Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Thu, 25 Jul 2024 15:20:27 +0200 Subject: [PATCH 2/2] refactor(site): update site contribution banner --- site/src/banner/banner.less | 106 ++++++------------ site/src/banner/banner.ts | 54 ++++----- .../src/navigation/footer/footer-compact.less | 4 - site/views/_data/banner.yml | 2 +- site/views/_includes/navigation/banner.njk | 21 ++-- .../_includes/navigation/footer-compact.njk | 1 - 6 files changed, 69 insertions(+), 119 deletions(-) diff --git a/site/src/banner/banner.less b/site/src/banner/banner.less index ed4b985bb..cd3415c7a 100644 --- a/site/src/banner/banner.less +++ b/site/src/banner/banner.less @@ -1,88 +1,46 @@ @import (reference) '../common/variables.less'; -.banner { - position: relative; - border: 2px solid @primary-green; - border-radius: 1rem; - box-shadow: 0 0 6px @primary-green; - background-color: #fff; - - text-align: center; - font-weight: 500; - color: mix(@primary-green-dark, #fff, 75%); - - padding: 1rem; - @media @sm-xl { - padding: 2rem; - } - - .banner-title { - font-weight: 600; - color: @primary-green-dark; - } - - p:last-child { - margin-bottom: 0; - } - - a[href] { - text-decoration-color: @primary-green-dark; - } - - .close { - position: absolute; - top: 0.75rem; - right: 1.1rem; - color: inherit; - } - - &:focus, - &:focus-within { - outline: none; - box-shadow: 0 0 10px @primary-green; - } -} - esl-d-banner { - display: none; -} -.esl-d-banner { - display: block; - position: fixed; - z-index: 1000; + @animationTime: 0.5s; - right: 1.5rem; - bottom: 1.5rem; - width: 40rem; - max-width: calc(100% - 3rem); + display: flex; + flex-direction: column; + justify-content: flex-end; - @media @sm-xl { - right: 2.5rem; - bottom: 2.5rem; - max-width: calc(100% - 5rem); - } + margin-top: 2rem; + margin-bottom: 1.5rem; visibility: hidden; - transition: - visibility 1s, - transform 1s, - opacity 1s; opacity: 0; - transform: translate3d(4rem, 0, 0); - pointer-events: none; - - &:not(.open) .banner { - display: none; - } + transition: + visibility 1s linear, + opacity 0.5s linear; - &.open { + &[open] { visibility: visible; opacity: 1; - transform: translate3d(0, 0, 0); transition: - visibility 0s, - transform 1s, - opacity 1s; - pointer-events: all; + visibility 0s linear, + opacity 0.5s linear; + } + + .alert { + position: relative; + transition: opacity 0.2s linear; + + &:not(:focus-within):not(:hover) { + opacity: 0.6; + } + + a::after { + content: ''; + position: absolute; + inset: 0; + } + } + + .close-button { + position: relative; + z-index: 1; } } diff --git a/site/src/banner/banner.ts b/site/src/banner/banner.ts index 9f13fe32c..9e60884eb 100644 --- a/site/src/banner/banner.ts +++ b/site/src/banner/banner.ts @@ -1,7 +1,8 @@ +import {attr, prop, listen} from '@exadel/esl/modules/esl-utils/decorators'; +import {ESLIntersectionTarget} from '@exadel/esl/modules/esl-event-listener/core'; import {ESLToggleable} from '@exadel/esl/modules/esl-toggleable/core'; -import {attr, memoize, prop} from '@exadel/esl/modules/esl-utils/decorators'; - -import type {ESLToggleableActionParams} from '@exadel/esl/modules/esl-toggleable/core/esl-toggleable'; +import type {ESLIntersectionEvent} from '@exadel/esl/modules/esl-event-listener/core'; +import type {ESLToggleableActionParams} from '@exadel/esl/modules/esl-toggleable/core'; export class ESLDemoBanner extends ESLToggleable { public static override is = 'esl-d-banner'; @@ -11,46 +12,45 @@ export class ESLDemoBanner extends ESLToggleable { @attr({defaultValue: 14, parser: parseInt}) public cookieTime: number; - @prop({initiator: 'initial', showDelay: 8000}) - public override initialParams: ESLToggleableActionParams; @prop(true) public override closeOnEsc: boolean; + @prop('.close-button') public override closeTrigger: string; - protected _$focusBefore: HTMLElement | null = null; + public get $alert(): HTMLElement | null { + return this.querySelector('.alert')!; + } - /** Check if the coolie {@link cookieName} is active */ + /** Check if the coolie is active */ public get hasCookie(): boolean { const {cookieName} = this; return !!cookieName && document.cookie.indexOf(`${cookieName}=true`) !== -1; } - @memoize() - public get $focusable(): HTMLElement | undefined { - return this.querySelector('.banner') as HTMLElement | undefined; - } - /** Store cookie {@link cookieName} for {@link cookieTime} period */ public registerCookie(expireDays: number = this.cookieTime): void { const {cookieName} = this; - if (cookieName) { - const expires = new Date(Date.now() + expireDays * 864e5).toUTCString(); - document.cookie = `${cookieName}=true; path=/; expires=${expires};`; - } - } - - protected override setInitialState(): void { - this.toggle(!this.hasCookie, this.initialParams); + if (!cookieName) return; + const expires = new Date(Date.now() + expireDays * 864e5).toUTCString(); + document.cookie = `${cookieName}=true; path=/; expires=${expires};`; } protected override onShow(params: ESLToggleableActionParams): void { super.onShow(params); - this._$focusBefore = document.activeElement as HTMLElement; - this.$focusable && this.$focusable.focus(); - if (params.initiator !== 'initial') this.registerCookie(-1); + this.$alert?.classList.add('in'); + this.$$off(this._onIntersect); + } + + protected override onHide(param: ESLToggleableActionParams): void { + super.onHide(param); + if (param.initiator === 'close') this.registerCookie(); } - protected override onHide(params: ESLToggleableActionParams): void { - super.onHide(params); - this._$focusBefore && this._$focusBefore.focus(); - if (params.initiator !== 'initial') this.registerCookie(); + + @listen({ + event: 'intersects', + target: ($this: ESLDemoBanner) => ESLIntersectionTarget.for($this, {threshold: 0.99}), + condition: ($this: ESLDemoBanner) => !$this.hasCookie + }) + protected _onIntersect(e: ESLIntersectionEvent): void { + this.toggle(e.isIntersecting, {showDelay: 750}); } } diff --git a/site/src/navigation/footer/footer-compact.less b/site/src/navigation/footer/footer-compact.less index 67a0f2d7f..65d0406db 100644 --- a/site/src/navigation/footer/footer-compact.less +++ b/site/src/navigation/footer/footer-compact.less @@ -1,7 +1,3 @@ .footer-compact { padding: 15px 0; - - &-divider { - margin-top: 0; - } } diff --git a/site/views/_data/banner.yml b/site/views/_data/banner.yml index e7aa8f22d..1af1c0345 100644 --- a/site/views/_data/banner.yml +++ b/site/views/_data/banner.yml @@ -1,5 +1,5 @@ title: "Contribute to ESL documentation" cookie: contrib-doc-hide content: | - Found a typo? Have an interesting usage example to share? Want to help improve our documentation? + ⓘ Found a typo? Have an interesting usage example to share? Want to help improve our documentation? You are very welcome to contribute to ESL. Check out our [documentation contribution guide](/introduction/contribute/#contributing-to-esl-documentation). diff --git a/site/views/_includes/navigation/banner.njk b/site/views/_includes/navigation/banner.njk index 517d5da3c..7b6d7d882 100644 --- a/site/views/_includes/navigation/banner.njk +++ b/site/views/_includes/navigation/banner.njk @@ -1,15 +1,12 @@ {% if banner.title and not banner.disabled %} - - + {% endif %} diff --git a/site/views/_includes/navigation/footer-compact.njk b/site/views/_includes/navigation/footer-compact.njk index 28f2e88e7..78917d677 100644 --- a/site/views/_includes/navigation/footer-compact.njk +++ b/site/views/_includes/navigation/footer-compact.njk @@ -1,5 +1,4 @@
-
ESL v{{ env.version }} © {{ env.date.getFullYear() }} Exadel, Inc. Privacy