mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): optimize adaptation rules of sie preview (#3370)
This commit is contained in:
parent
e22f7222ea
commit
2ec21a778b
3 changed files with 55 additions and 33 deletions
|
@ -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 {
|
|
||||||
width: 480px;
|
|
||||||
height: 380px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--color-surface-1);
|
|
||||||
|
.deviceWrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
width: _screenSize.$web-width;
|
||||||
|
height: _screenSize.$web-height;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.device {
|
||||||
iframe {
|
iframe {
|
||||||
width: 960px;
|
width: _screenSize.$web-iframe-width;
|
||||||
height: 760px;
|
height: _screenSize.$web-iframe-height;
|
||||||
transform: scale(0.5);
|
transform: scaleX(_screenSize.$web-scale-x) scaleY(_screenSize.$web-scale-y);
|
||||||
position: absolute;
|
margin-left: _screenSize.$web-to-wrapper-offset-x;
|
||||||
top: -190px;
|
margin-top: _screenSize.$web-to-wrapper-offset-y;
|
||||||
left: -240px;
|
}
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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));
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue