Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): optimize adaptation rules of sie preview (#3370)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-13 11:04:51 +08:00 committed by GitHub
parent e22f7222ea
commit 2ec21a778b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
packages/console/src/components/SignInExperiencePreview/index.module.scss
View file

@ -1,4 +1,5 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
@use './screen-size.module.scss' as _screenSize;
.preview { .preview {
background: var(--color-surface-variant); background: var(--color-surface-variant);
@ -8,49 +9,51 @@
} }
&.web { &.web {
.device { position: relative;
width: 480px;
height: 380px; .deviceWrapper {
position: relative; overflow: hidden;
background: var(--color-surface-1); width: _screenSize.$web-width;
height: _screenSize.$web-height;
margin: 0 auto; margin: 0 auto;
iframe { .device {
width: 960px; iframe {
height: 760px; width: _screenSize.$web-iframe-width;
transform: scale(0.5); height: _screenSize.$web-iframe-height;
position: absolute; transform: scaleX(_screenSize.$web-scale-x) scaleY(_screenSize.$web-scale-y);
top: -190px; margin-left: _screenSize.$web-to-wrapper-offset-x;
left: -240px; margin-top: _screenSize.$web-to-wrapper-offset-y;
background: var(--color-surface-1); }
} }
} }
} }
&.mobile { &.mobile {
padding: _.unit(10) 0;
height: 500px;
position: relative; position: relative;
.deviceWrapper { .deviceWrapper {
width: 390px; overflow: hidden;
height: 450px; padding: _.unit(6) 0;
margin: 0 auto;
transform: scale(0.5);
transform-origin: top center;
.device { .device {
border-radius: 26px; border-radius: 26px;
overflow: hidden; overflow: hidden;
margin: 0 auto;
width: _screenSize.$mobile-width;
height: calc(_screenSize.$mobile-height + 44px); // 44px is the height of the top bar
.topBar { .topBar {
display: flex; display: flex;
align-items: center; align-items: center;
padding: _.unit(3) _.unit(6); padding: _.unit(3) _.unit(4);
.time { .time {
flex: 1; flex: 1;
font: var(--font-label-2); font: var(--font-label-2);
transform-origin: left center;
transform: scale(0.8);
} }
} }
@ -73,20 +76,13 @@
} }
iframe { iframe {
width: 390px; width: _screenSize.$mobile-iframe-width;
height: 808px; height: _screenSize.$mobile-iframe-height;
transform: scaleX(_screenSize.$mobile-scale-x) scaleY(_screenSize.$mobile-scale-y);
margin-left: _screenSize.$mobile-to-wrapper-offset-x;
margin-top: _screenSize.$mobile-to-wrapper-offset-y;
} }
} }
@media screen and (min-height: 1100px) {
transform: unset;
height: 900px;
}
@media screen and (min-height: 900px) and (max-height: 1100px) {
transform: scale(0.75);
height: 675px;
}
} }
} }
} }

25
packages/console/src/components/SignInExperiencePreview/screen-size.module.scss Normal file
View file

@ -0,0 +1,25 @@
// Web
$web-iframe-width: 640px;
$web-iframe-height: 800px;
$web-width: 498px;
$web-height: calc($web-width * $web-iframe-height / $web-iframe-width);
$web-scale-x: calc($web-width / $web-iframe-width);
$web-scale-y: calc($web-height / $web-iframe-height);
$web-to-wrapper-offset-x: calc($web-iframe-width * 0.5 * ($web-scale-x - 1));
$web-to-wrapper-offset-y: calc($web-iframe-height * 0.5 * ($web-scale-y - 1));
// Mobile
$mobile-iframe-width: 390px;
$mobile-iframe-height: 844px;
$mobile-width: 320px;
$mobile-height: calc($mobile-width * $mobile-iframe-height / $mobile-iframe-width);
$mobile-scale-x: calc($mobile-width / $mobile-iframe-width);
$mobile-scale-y: calc($mobile-height / $mobile-iframe-height);
$mobile-to-wrapper-offset-x: calc($mobile-iframe-width * 0.5 * ($mobile-scale-x - 1));
$mobile-to-wrapper-offset-y: calc($mobile-iframe-height * 0.5 * ($mobile-scale-y - 1));

1
packages/ui/src/components/BrandingHeader/index.module.scss
View file

@ -14,6 +14,7 @@ $logo-height: 40px;
} }
.headline { .headline {
flex-shrink: 0;
text-align: center; text-align: center;
color: var(--color-type-primary); color: var(--color-type-primary);
@include _.multi-line-ellipsis(2); @include _.multi-line-ellipsis(2);