Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Improved modification menu design

Browse Source
This commit is contained in:
Felix Linker
2018-09-15 01:54:17 +02:00
parent 93d8f15f26
commit 7f5181a9c7
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/Modification.jsx
View File

@@ -73,11 +73,14 @@ export default class Modification extends TranslatedComponent {
} }
return ( return (
<div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name} ref={ modItem => this.props.modItems[name] = modItem }> <div onBlur={this._updateFinished.bind(this)} key={name}
<div className={'cb'}>{translate(name, m.grp)}</div> className={cn('cb', 'modification-container')}
ref={ modItem => this.props.modItems[name] = modItem }>
<span className={'cb'}>{translate(name, m.grp)}</span>
<span className={'header-adjuster'}></span>
<table style={{ width: '100%' }}> <table style={{ width: '100%' }}>
<tbody> <tbody>
<tr className={'modification-container'}> <tr>
<td className={'input-container'}> <td className={'input-container'}>
<span> <span>
{this.props.editable ? {this.props.editable ?

12
src/less/slot.less
View File

@@ -38,18 +38,19 @@
} }
.modification-container { .modification-container {
@input-container-width: 75%;
td { td {
width: 35%; width: 100% - @input-container-width;
text-align: center; text-align: center;
} }
.input-container { .input-container {
width: 65%; width: @input-container-width;
text-align: right; text-align: right;
} }
input { input {
width: 70%; width: 80%;
} }
.unit-container { .unit-container {
@@ -58,6 +59,11 @@
text-align: left; text-align: left;
display: inline-block; display: inline-block;
} }
.header-adjuster {
width: 100% - @input-container-width;
display: inline-block;
}
} }
.cb { .cb {