luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(mobile): center peek styles (#9014)

Browse Source 
fix AF-1876

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/af1191dd-4549-4c38-8948-2d726946d4fe.png)
This commit is contained in:
pengx17
2024-12-09 03:48:07 +00:00
parent 9ddcdb8e50
commit 5a6dd29d36
3 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts
View File

@@ -1,4 +1,4 @@
import { cssVar } from '@toeverything/theme'; import { cssVarV2 } from '@toeverything/theme/v2';
import { globalStyle, style } from '@vanilla-extract/css'; import { globalStyle, style } from '@vanilla-extract/css';
export const root = style({ export const root = style({
@@ -25,5 +25,5 @@ export const affineDocViewport = style({
userSelect: 'none', userSelect: 'none',
containerName: 'viewport', containerName: 'viewport',
containerType: 'inline-size', containerType: 'inline-size',
background: cssVar('backgroundPrimaryColor'), background: cssVarV2('layer/background/mobile/secondary'),
}); });

5
packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
View File

@@ -35,7 +35,7 @@ export const modalContentContainer = style({
'screen and (width <= 640px)': { 'screen and (width <= 640px)': {
selectors: { selectors: {
[`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"]) &`]: { [`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"]) &`]: {
height: '60%', height: '80%',
width: 'calc(100% - 32px)', width: 'calc(100% - 32px)',
paddingRight: 0, paddingRight: 0,
paddingBottom: 32, paddingBottom: 32,
@@ -103,6 +103,9 @@ export const modalControls = style({
'@media': { '@media': {
'screen and (width <= 640px)': { 'screen and (width <= 640px)': {
top: -48, top: -48,
right: 0,
left: 0,
padding: '8px',
}, },
}, },
}); });

13
packages/frontend/core/src/modules/peek-view/view/peek-view-controls.css.ts
View File

@@ -7,7 +7,8 @@ export const root = style({
gap: 8, gap: 8,
'@media': { '@media': {
'screen and (width <= 640px)': { 'screen and (width <= 640px)': {
flexDirection: 'row', flexDirection: 'row-reverse',
width: '100%',
}, },
}, },
}); });
@@ -16,4 +17,14 @@ export const button = style({
borderRadius: 8, borderRadius: 8,
width: 32, width: 32,
height: 32, height: 32,
'@media': {
'screen and (width <= 640px)': {
selectors: {
[`[data-action-name="close"]&`]: {
marginLeft: 'auto',
order: 0,
},
},
},
},
}); });