d27f157 · bridge · git.iko.soy

git.iko.soy/bridge

feat: mobile-related fixes, primarily styling

commitd27f157fa6e7bfebfa81375f2ec589c304250d9d authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 6 Aug 2019, 20:18 (7 years ago) parentd04c2c1

19 files changed+79−23

compare with master

unifiedsplit

package.json+1−1 src/components/InputSigil.js−1 src/components/MaybeSigil.js+1−1 src/components/Passport.js+2−3 src/components/Sigil.js+2−1 src/components/View.js+1−1 src/indigo-react/components/Input.js+5−3 src/lib/useInputs.js−1 src/store/network.js+1−1 src/style/bridge.scss+5−3 src/style/form-reset.scss+51 src/style/index.scss+3 src/views/AcceptTransfer.js+1−1 src/views/Admin/AdminCancelTransfer.js+1−1 src/views/Admin/AdminTransfer.js+1−1 src/views/CreateGalaxy.js+1−1 src/views/IssueChild.js+1−1 src/views/Party/PartySetPoolSize.js+1−1 src/views/Points.js+1−1

package.json+1−1

@@ -72,7 +72,7 @@

7272 "checksum": "cd build && find . -exec shasum -a256 {} ';' > ../checksums.txt && cd ..",

7373 "zip": "zip -ur bridge-$npm_package_version.zip README.md bridge-https.py checksums.txt && cd build && zip -ur ../bridge-$npm_package_version.zip ./* && cd ..",

7474 "release": "npm install && npm run build && npm run checksum && npm run zip",

75− "pilot:ganache": "ganache-cli --blockTime 1 --networkId 1 -m 'benefit crew supreme gesture quantum web media hazard theory mercy wing kitten' > /dev/null &",

75+ "pilot:ganache": "ganache-cli --blockTime 1 --networkId 1 --host '0.0.0.0' -m 'benefit crew supreme gesture quantum web media hazard theory mercy wing kitten' > /dev/null &",

7676 "pilot:deploy": "cd node_modules/azimuth-solidity && truffle deploy",

7777 "pilot:setup": "npm run pilot:ganache && npm run pilot:deploy",

7878 "pilot": "HTTPS=true npm-run-all pilot:setup start pilot:cleanup --continue-on-error",

src/components/InputSigil.js−1

@@ -42,7 +42,6 @@ export default function InputSigil({

4242 patp={Just(lastValidPatp)}

4343 size={size}

4444 colors={selectColorway(pass, error, focused)}

45− margin={0}

4645 {...rest}

4746 />

4847 );

src/components/MaybeSigil.js+1−1

@@ -14,7 +14,7 @@ export default function MaybeSigil({ className, patp, size, ...rest }) {

1414 });

1515

1616 return validPatp ? (

17− <Sigil patp={validPatp} size={size} margin={0} {...rest} />

17+ <Sigil patp={validPatp} size={size} {...rest} />

1818 ) : (

1919 <AspectRatio aspectRatio={1} />

2020 );

src/components/Passport.js+2−3

@@ -75,10 +75,10 @@ function Passport({ point, className, ticket = null, address = Nothing() }) {

7575 return (

7676 <Grid gap={4} className={cn('bg-black r8 p7', className)}>

7777 <Grid.Item cols={[1, 4]}>

78− <MaybeSigil patp={name} size={64} margin={0} />

78+ <MaybeSigil patp={name} size={64} />

7979 </Grid.Item>

8080 <Grid.Item as={Flex} cols={[4, 13]} col justify="between">

81− <Flex.Item className="mono white f5">{visualName}</Flex.Item>

81+ <Flex.Item className="mono white f5 pb2">{visualName}</Flex.Item>

8282 <Flex.Item as={Flex} col>

8383 <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

8484 Birth Time

@@ -141,7 +141,6 @@ Passport.Mini = function MiniPassport({ point, className, inverted, ...rest }) {

141141 <Sigil

142142 patp={name}

143143 size={64}

144− margin={0}

145144 colors={inverted ? INVERTED_COLORWAY : undefined}

146145 />

147146 </Grid.Item>

src/components/Sigil.js+2−1

@@ -4,8 +4,9 @@ export default function Sigil({ patp, size, colors, ...rest }) {

44 return sigil({

55 patp,

66 renderer: reactRenderer,

7− style: { width: '100%', height: '100%' }, //NOTE scale to container

7+ style: { width: '100%', height: '100%' }, // NOTE: scale to container

88 size,

9+ margin: size / 8,

910 colors,

1011 ...rest,

1112 });

src/components/View.js+1−1

@@ -62,7 +62,7 @@ function View({

6262 <Flex.Item as={Footer.Target} />

6363 </Flex.Item>

6464

65− <Flex.Item style={{ width: '48px' }} className={cn(insetPadding)} />

65+ <Flex.Item style={{ width: '48px' }} />

6666 </Flex>

6767 );

6868}

src/indigo-react/components/Input.js+5−3

@@ -73,8 +73,10 @@ export default React.memo(function Input({

7373 as={type === 'textarea' ? 'textarea' : 'input'}

7474 type={type === 'textarea' ? undefined : type}

7575 {...rest}

76− // NOTE: 24px = 12px * 2 (from p3 styling)

77− style={type === 'textarea' ? { minHeight: 'calc(1rem + 24px)' } : {}}

76+ // NOTE: 1.15 from input line-height, 24px = 12px * 2 (from p3 styling)

77+ style={

78+ type === 'textarea' ? { minHeight: 'calc(1.15rem * 2 + 24px)' } : {}

79+ }

7880 className={cn(

7981 'b b1 p3 outline-none',

8082 { mono },

@@ -107,7 +109,7 @@ export default React.memo(function Input({

107109 top: 0,

108110 right: 0,

109111 height: '100%',

110− width: '44px',

112+ width: 'calc(1.5em + 24px)',

111113 overflow: 'hidden',

112114 }}>

113115 {accessory}

src/lib/useInputs.js−1

@@ -178,7 +178,6 @@ export function usePointInput({ size = 4, validators = [], ...rest }) {

178178 <InputSigil

179179 patp={value}

180180 size={44}

181− margin={8}

182181 pass={pass}

183182 focused={focused}

184183 error={error}

src/store/network.js+1−1

@@ -41,7 +41,7 @@ function _useNetwork(initialNetworkType = null) {

4141 switch (networkType) {

4242 case NETWORK_TYPES.LOCAL: {

4343 const protocol = isDevelopment ? 'ws' : 'wss';

44− const endpoint = `${protocol}://localhost:8545`;

44+ const endpoint = `${protocol}://${document.location.hostname}:8545`;

4545

4646 return initWeb3(

4747 new Web3.providers.WebsocketProvider(endpoint),

src/style/bridge.scss+5−3

@@ -1,3 +1,5 @@

1+$handle-extent: 24px;

13@keyframes autofill {

24 to {

35 color: #000;

@@ -36,7 +38,7 @@ input[type='range'] {

3638

3739 /* Chrome */

3840 &::-webkit-slider-runnable-track {

39− height: 24px;

41+ height: $handle-extent;

4042 -webkit-appearance: none;

4143 background-color: #e6e6e6;

4244 margin-top: -1px;

@@ -44,7 +46,7 @@ input[type='range'] {

4446

4547 &::-webkit-slider-thumb {

4648 -webkit-appearance: none;

47− width: 24px;

49+ width: $handle-extent;

4850 height: 100%;

4951 background-color: #000;

5052 border: none;

@@ -63,7 +65,7 @@ input[type='range'] {

6365 }

6466

6567 &::-moz-range-thumb {

66− width: 24px;

68+ width: $handle-extent;

6769 height: 100%;

6870 background-color: #000;

6971 border: none;

src/style/form-reset.scssnew file+51

@@ -0,0 +1,51 @@

1+$form-padding: 24px; // indigo pv3

2+$form-line-height: 1.5rem;

4+// inspired by: https://gist.github.com/anthonyshort/552543

6+input,

7+button,

8+textarea,

9+select {

10+ padding: 0;

11+ margin: 0;

12+ border-radius: 0;

13+ -webkit-appearance: none;

14+

15+ &:focus,

16+ &:hover,

17+ &:active {

18+ outline: 0;

19+ }

20+

21+ &::-moz-focus-inner {

22+ border: 0;

23+ }

24+}

25+

26+input {

27+ box-sizing: border-box;

28+ -webkit-box-sizing: border-box;

29+

30+ height: calc(#{$form-line-height} + #{$form-padding});

31+ line-height: $form-line-height;

32+}

33+

34+textarea {

35+ /* Move the label to the top */

36+ vertical-align: top;

37+

38+ /* Turn off scroll bars in IE unless needed */

39+ overflow: auto;

40+}

41+

42+::-webkit-file-upload-button {

43+ padding: 0;

44+ border: 0;

45+ background: none;

46+}

47+

48+/* Turn off the recent search for webkit. It adds about 15px padding on the left */

49+::-webkit-search-decoration {

50+ display: none;

51+}

src/style/index.scss+3

@@ -1,3 +1,6 @@

1+/* Form Reset */

2+@import './form-reset.scss';

14/* Indigo */

25@import '../indigo-react/indigo.css';

36@import './indigo-proposals.scss';

src/views/AcceptTransfer.js+1−1

@@ -73,7 +73,7 @@ export default function AcceptTransfer() {

7373 <Grid.Item

7474 full

7575 as={Text}

76− className={cn('f5', {

76+ className={cn('f5 wrap', {

7777 green3: completed,

7878 })}>

7979 {completed

src/views/Admin/AdminCancelTransfer.js+1−1

@@ -65,7 +65,7 @@ export default function AdminCancelTransfer() {

6565 <Grid.Item

6666 full

6767 as={Text}

68− className={cn('f5', {

68+ className={cn('f5 wrap', {

6969 green3: completed,

7070 })}>

7171 {completed

src/views/Admin/AdminTransfer.js+1−1

@@ -69,7 +69,7 @@ export default function AdminTransfer() {

6969 <Grid.Item

7070 full

7171 as={Text}

72− className={cn('f5', {

72+ className={cn('f5 wrap', {

7373 green3: completed,

7474 })}>

7575 {completed

src/views/CreateGalaxy.js+1−1

@@ -137,7 +137,7 @@ export default function CreateGalaxy() {

137137 <Grid.Item

138138 full

139139 as={Text}

140− className={cn('f5', {

140+ className={cn('f5 wrap', {

141141 green3: completed,

142142 })}>

143143 {galaxyName} has been created and can be claimed by {owner}.

src/views/IssueChild.js+1−1

@@ -147,7 +147,7 @@ export default function IssueChild() {

147147 <Grid.Item

148148 full

149149 as={Text}

150− className={cn('f5', {

150+ className={cn('f5 wrap', {

151151 green3: completed,

152152 })}>

153153 {pointName} has been spawned and can be claimed by {owner}.

src/views/Party/PartySetPoolSize.js+1−1

@@ -104,7 +104,7 @@ export default function PartySetPoolSize() {

104104 <Grid.Item

105105 full

106106 as={Text}

107− className={cn('f5', {

107+ className={cn('f5 wrap', {

108108 green3: completed,

109109 })}>

110110 {completed

src/views/Points.js+1−1

@@ -40,7 +40,7 @@ const PointList = function({ points, className, actions, ...rest }) {

4040 return (

4141 <Grid gap={3} className={className}>

4242 {points.map((point, i) => (

43− <Grid.Item half={(i % 2) + 1} key={point}>

43+ <Grid.Item key={point} className={`full half-${(i % 2) + 1}-md`}>

4444 <Flex col>

4545 <Passport.Mini

4646 point={point}