Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): width and height of embed block (#10223)

Browse Source
This commit is contained in:
Flrande
2025-02-17 10:37:04 +00:00
parent e4f2223a2a
commit 5748591bc5
9 changed files with 23 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
blocksuite/affine/block-embed/src/embed-figma-block/styles.ts
View File

@@ -1,17 +1,14 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-figma-block {
width: ${EMBED_CARD_WIDTH.figma}px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 12px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
@@ -19,8 +16,6 @@ export const styles = css`
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma};
}
.affine-embed-figma {

19
blocksuite/affine/block-embed/src/embed-github-block/styles.ts
View File

@@ -1,7 +1,3 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
export const styles = css`
@@ -9,7 +5,7 @@ export const styles = css`
box-sizing: border-box;
display: flex;
width: 100%;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
@@ -243,9 +239,6 @@ export const styles = css`
}
.affine-embed-github-block.list {
height: ${EMBED_CARD_HEIGHT.list}px;
width: ${EMBED_CARD_WIDTH.list}px;
.affine-embed-github-content {
width: 100%;
flex-direction: row;
@@ -279,14 +272,7 @@ export const styles = css`
}
}
.affine-embed-github-block.horizontal {
width: ${EMBED_CARD_WIDTH.horizontal}px;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
}
.affine-embed-github-block.vertical {
width: ${EMBED_CARD_WIDTH.vertical}px;
height: ${EMBED_CARD_HEIGHT.vertical}px;
flex-direction: column;
.affine-embed-github-content {
@@ -357,9 +343,6 @@ export const styles = css`
}
.affine-embed-github-block.cube {
width: ${EMBED_CARD_WIDTH.cube}px;
height: ${EMBED_CARD_HEIGHT.cube}px;
.affine-embed-github-content {
width: 100%;
flex-direction: column;

26
blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts
View File

@@ -1,8 +1,3 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_MIN_WIDTH,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
import { embedNoteContentStyles } from '../common/embed-note-content-styles.js';
@@ -11,7 +6,8 @@ export const styles = css`
.affine-embed-linked-doc-block {
box-sizing: border-box;
display: flex;
width: ${EMBED_CARD_WIDTH.horizontal}px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
opacity: var(--add, 1);
@@ -20,11 +16,6 @@ export const styles = css`
position: relative;
}
.affine-embed-linked-doc-block.horizontal {
width: ${EMBED_CARD_WIDTH.horizontal}px;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
}
.affine-embed-linked-doc-content {
flex-grow: 1;
height: 100%;
@@ -184,11 +175,6 @@ export const styles = css`
border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
}
.affine-embed-linked-doc-block:not(.in-canvas) {
width: 100%;
min-width: calc(min(${EMBED_CARD_MIN_WIDTH}px, 100%));
}
.affine-embed-linked-doc-block.loading {
.affine-embed-linked-doc-content-date {
display: none;
@@ -243,8 +229,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.horizontalThin {
height: ${EMBED_CARD_HEIGHT.horizontalThin}px;
.affine-embed-linked-doc-banner {
height: 66px;
}
@@ -260,7 +244,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.list {
height: ${EMBED_CARD_HEIGHT.list}px;
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: row;
@@ -286,8 +269,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.vertical {
width: ${EMBED_CARD_WIDTH.vertical}px;
height: ${EMBED_CARD_HEIGHT.vertical}px;
flex-direction: column-reverse;
.affine-embed-linked-doc-content {
@@ -329,9 +310,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.cube {
width: ${EMBED_CARD_WIDTH.cube}px;
height: ${EMBED_CARD_HEIGHT.cube}px;
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: column;

10
blocksuite/affine/block-embed/src/embed-loom-block/styles.ts
View File

@@ -1,26 +1,22 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-loom-block {
box-sizing: border-box;
width: ${EMBED_CARD_WIDTH.video}px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 12px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video};
}
.affine-embed-loom-video {

10
blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts
View File

@@ -1,15 +1,11 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-youtube-block {
box-sizing: border-box;
width: ${EMBED_CARD_WIDTH.video}px;
max-width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
@@ -22,8 +18,6 @@ export const styles = css`
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video};
}
.affine-embed-youtube-video {