diff --git a/src/app/shared/nodes/resource-node/resource-node.css b/src/app/shared/nodes/resource-node/resource-node.css index 45168b1..b8b8c1d 100644 --- a/src/app/shared/nodes/resource-node/resource-node.css +++ b/src/app/shared/nodes/resource-node/resource-node.css @@ -29,6 +29,53 @@ width: 320px; } +/* + * Expanded: lifted out of the canvas at full size, so the fields - an init script above all - can + * be read and edited whatever the zoom. + */ +.resource-card__focus-backdrop { + position: fixed; + inset: 0; + z-index: 9990; + background: rgba(15, 23, 42, 0.36); + backdrop-filter: blur(10px) saturate(0.8); +} + +.resource-card.resource-card--focus { + position: fixed; + inset: 0; + z-index: 9991; + width: 460px; + max-width: calc(100vw - 32px); + height: fit-content; + max-height: calc(100vh - 32px); + margin: auto; + padding: 18px 20px; + overflow-y: auto; + overscroll-behavior: contain; + box-shadow: 0 30px 70px rgba(15, 23, 42, 0.34); + cursor: default; +} + +.resource-card--focus .resource-card__badge { + width: 46px; + height: 46px; + font-size: 23px; +} + +.resource-card--focus .resource-card__name { + font-size: 17px; +} + +.resource-card--focus .resource-card__type { + font-size: 13px; +} + +/* Its handle stays on the canvas's business: out here there is nothing to link it to. */ +.resource-card--focus .resource-card__link { + visibility: hidden; +} + .resource-card--error { border-color: #fca5a5; border-left-color: #dc2626; diff --git a/src/app/shared/nodes/resource-node/resource-node.html b/src/app/shared/nodes/resource-node/resource-node.html index d8781ec..f26e422 100644 --- a/src/app/shared/nodes/resource-node/resource-node.html +++ b/src/app/shared/nodes/resource-node/resource-node.html @@ -4,8 +4,14 @@ Attribution term under AGPL-3.0 section 7(b): see LICENSE-ADDENDUM. --> +@if (focusOpen) { +
+}
@if (isSchemaLoading) { @@ -43,13 +49,21 @@ } + @if (!focusOpen) { - @if (!isReadonly) { + } + + @if (!isReadonly && !focusOpen) {
} - @if (!settingsOpen()) { + @if (!settingsOpen() && !focusOpen) { @if (summary(); as parts) { @if (parts.length) {