mirror of
https://github.com/responsively-org/responsively-app
synced 2024-11-14 16:37:27 +00:00
Merge pull request #277 from vlazaroes/fix/render-alignment
Alignment of elements in view
This commit is contained in:
commit
c8f3340041
3 changed files with 28 additions and 13 deletions
|
@ -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)}>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue