Merge pull request #277 from vlazaroes/fix/render-alignment

Alignment of elements in view
This commit is contained in:
Manoj Vivek 2020-07-06 18:49:10 +05:30 committed by GitHub
commit c8f3340041
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 13 deletions

View file

@ -29,16 +29,18 @@ function Renderer(props) {
<div className={cx(styles.container, {[styles.hidden]: hidden})}>
<div className={styles.titleContainer}>
{getDeviceIcon(device.type)}
<span className={cx(styles.deviceTitle)}>{device.name}</span>
<div className={cx(styles.deviceSize)}>
{isFlip ? dimension.reverse().join('') : dimension.join('')}
</div>
<div className={cx(styles.loaderContainer)}>
{loading && (
<div>
<Spinner size={16} />
</div>
)}
<div className={styles.deviceInfo}>
<span className={cx(styles.deviceTitle)}>{device.name}</span>
<div className={cx(styles.deviceSize)}>
{isFlip ? dimension.reverse().join('') : dimension.join('')}
</div>
<div className={cx(styles.loaderContainer)}>
{loading && (
<div>
<Spinner size={16} />
</div>
)}
</div>
</div>
</div>
<div className={cx(styles.deviceWrapper)}>

View file

@ -5,7 +5,7 @@
.deviceTitle {
font-weight: normal;
font-size: 16px;
margin-right: 2px;
margin: 0 6px -2px 4px;
}
.deviceSize {
@ -25,10 +25,16 @@
}
.titleContainer {
margin: 3px;
display: flex;
align-items: center;
}
.deviceInfo {
display: flex;
align-items: flex-end;
}
.hidden {
display: none;
}

View file

@ -4,7 +4,7 @@
}
.webViewToolbar {
padding: 5px;
margin: 8px 3px 3px 3px;
display: flex;
align-items: center;
width: auto;
@ -15,12 +15,19 @@
display: flex;
}
.webViewToolbarLeft .webViewToolbarIcons {
margin-right: 4px;
}
.webViewToolbarRight {
display: flex;
}
.webViewToolbarRight .webViewToolbarIcons {
margin-left: 4px;
}
.webViewToolbarIcons {
margin-right: 2px;
padding: 0 2px;
align-items: center;
justify-content: center;