git.iko.soy/bridge
on master help sign in
- fix shrinking flow issue on passport censor blocks
c8f0ce9Chris Johnson
src/bridge/components/Passport.js+11−9
compare with master
unifiedsplit
@@ -18,8 +18,8 @@ class Passport extends React.Component {
18 paper: null
18 paper: null
19 }
19 }
20
20
21− this.masterScreen = this.generateScreen()
21+ this.masterCensor = this.generateCensor()
22− this.managementScreen = this.generateScreen()
22+ this.managementCensor = this.generateCensor()
23
23
24 this.download = this.download.bind(this)
24 this.download = this.download.bind(this)
25 }
25 }
@@ -29,18 +29,20 @@ class Passport extends React.Component {
29 this.props.pushWalletState(WALLET_STATES.DOWNLOADED)
29 this.props.pushWalletState(WALLET_STATES.DOWNLOADED)
30 }
30 }
31
31
32− generateScreen() {
32+ generateCensor() {
33 let blocks = [];
33 let blocks = [];
34
34
35− for (var i = 0; i < 80; i++) {
35+ for (var i = 0; i < 86; i++) {
36 let rand = Math.round(Math.random())
36 let rand = Math.round(Math.random())
37− let className = rand ? "passport-block bg-gray-30" : "passport-block"
37+ let filled = (rand || i === 0 || i === 43)
38
38
39+ let className = filled ? "passport-block bg-gray-30" : "passport-block"
40+
39− blocks.push(<div key={i} className={className}></div>)
41+ blocks.push(<div key={i} data-key={i}className={className}></div>)
40 }
42 }
41
43
42 return (
44 return (
43− <div className="flex flex-wrap">
45+ <div className="flex flex-wrap passport-censor">
44 {blocks}
46 {blocks}
45 </div>
47 </div>
46 )
48 )
@@ -180,10 +182,10 @@ class Passport extends React.Component {
180 <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
182 <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
181
183
182 <div className="passport-label gray-50 mt-3">Master Ticket</div>
184 <div className="passport-label gray-50 mt-3">Master Ticket</div>
183− <div className="passport-value">{ownershipAddress ? this.masterScreen : 'Ungenerated'}</div>
185+ <div className="passport-value overflow-hidden">{this.masterCensor}</div>
184
186
185 <div className="passport-label gray-50 mt-5">Managment Seed</div>
187 <div className="passport-label gray-50 mt-5">Managment Seed</div>
186− <div className="passport-value">{ownershipAddress ? this.managementScreen : 'Ungenerated'}</div>
188+ <div className="passport-value overflow-hidden">{this.managementCensor}</div>
187 </div>
189 </div>
188
190
189 {wallet &&
191 {wallet &&
src/bridge/style/extend.css+8
@@ -498,6 +498,10 @@ code {
498 width: 100%;
498 width: 100%;
499}
499}
500
500
501+.overflow-hidden {
502+ overflow: hidden;
503+}
504+
501.z-1 {
505.z-1 {
502 z-index: 1
506 z-index: 1
503}
507}
@@ -543,6 +547,10 @@ code {
543 color: #7f7f7f;
547 color: #7f7f7f;
544}
548}
545
549
550+.passport-censor {
551+ min-width: 350px;
552+}
553+
546.passport-metadata .passport-label {
554.passport-metadata .passport-label {
547 line-height: 12px;
555 line-height: 12px;
548}
556}