From f3698e4d824f1ad8128b25fb5ea5ce3439b59a3a Mon Sep 17 00:00:00 2001 From: "Guilherme Siquinelli (guiseek)" Date: Thu, 20 May 2021 06:51:25 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20figure=20safari=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/elements/src/lib/figure/figure.ts | 14 ++++--- packages/website/src/app/app.element.scss | 39 +++++++++++++++---- packages/website/src/app/app.element.ts | 1 + .../website/src/app/shared/member/member.ts | 6 +-- packages/website/src/assets/member.svg | 1 + 5 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 packages/website/src/assets/member.svg diff --git a/packages/common/elements/src/lib/figure/figure.ts b/packages/common/elements/src/lib/figure/figure.ts index 455d511..9e7d2a7 100644 --- a/packages/common/elements/src/lib/figure/figure.ts +++ b/packages/common/elements/src/lib/figure/figure.ts @@ -1,9 +1,8 @@ -import { css, BuiltInElement, html, prop } from 'dist/packages/common/web/src' +import { BuiltInElement, html, prop } from 'dist/packages/common/web/src' @BuiltInElement('devpr-figure', 'figure') export class Figure extends HTMLElement { static observedAttributes = ['src', 'caption'] - css = css`` @prop() src = '' @@ -12,15 +11,18 @@ export class Figure extends HTMLElement { caption = '' connectedCallback() { + const src = this.src || this.getAttribute('src') + const caption = this.caption || this.getAttribute('caption') + this.innerHTML = html` - ${this.caption} -
${this.caption}
+ ${caption} +
${caption}
` const image = this.querySelector('img') image.onload = () => { - // image.setAttribute('width', image.width + 'px') - // image.setAttribute('height', image.height + 'px') + image.setAttribute('width', image.width + 'px') + image.setAttribute('height', image.height + 'px') } } } diff --git a/packages/website/src/app/app.element.scss b/packages/website/src/app/app.element.scss index 6e84a7b..3345a93 100644 --- a/packages/website/src/app/app.element.scss +++ b/packages/website/src/app/app.element.scss @@ -47,7 +47,7 @@ devpr-header { position: absolute; margin: 0 auto; bottom: 20px; - left: 20px; + right: 20px; z-index: 1; @@ -55,12 +55,18 @@ devpr-header { z-index: 20; } } + @include tablet { + &#mx > article { + position: initial; + } + } @include mobile { &#mx > article { - left: 0; + position: initial; } } - #home h2 { + + #mx h2 { opacity: 0.2; color: $devpr-on-surface-high; } @@ -73,28 +79,42 @@ devpr-header { text-decoration: $devpr-header-2-text-decoration; line-height: #{$devpr-header-2-line-height}; } - figure figcaption { - opacity: 0.3; - text-align: center; + + figure { + display: flex; + flex-direction: column; + gap: 10px; + + img { + width: 100%; + flex: 1; + } + + figcaption { + opacity: 0.3; + text-align: center; + } } + h2, h3 { margin: 0; text-align: center; font-weight: normal; } + &__header { - position: sticky; top: 0; height: 80px; - // padding: 1em; display: flex; + position: sticky; justify-content: center; align-items: flex-end; padding: 0 5px 10px; color: $devpr-on-surface-medium; background: $devpr-surface; } + &__content { flex: 1; display: flex; @@ -132,6 +152,9 @@ devpr-header { } @include mobile { + h2 { + font-size: 32px; + } img { max-width: 240px; max-height: 160px; diff --git a/packages/website/src/app/app.element.ts b/packages/website/src/app/app.element.ts index 17c4bf9..2c7d610 100644 --- a/packages/website/src/app/app.element.ts +++ b/packages/website/src/app/app.element.ts @@ -25,6 +25,7 @@ export class AppElement extends HTMLElement {
DevPR
+

Member Experience

diff --git a/packages/website/src/app/shared/member/member.ts b/packages/website/src/app/shared/member/member.ts index a12080d..e174521 100644 --- a/packages/website/src/app/shared/member/member.ts +++ b/packages/website/src/app/shared/member/member.ts @@ -27,8 +27,8 @@ export class Member extends HTMLElement { devpr-member #lib, devpr-member #lang { content: ' '; - width: 100%; - height: 100%; + width: 60%; + height: 80%; position: absolute; padding-top: 20%; background-size: 80%; @@ -95,7 +95,7 @@ export class Member extends HTMLElement {
` - static LIMIT = 120 // pixel movement + static LIMIT = 60 // pixel movement swapPositions: (pos: Record<'x' | 'y', number>) => void diff --git a/packages/website/src/assets/member.svg b/packages/website/src/assets/member.svg new file mode 100644 index 0000000..2963206 --- /dev/null +++ b/packages/website/src/assets/member.svg @@ -0,0 +1 @@ +