15dd385 · bridge · git.iko.soy

git.iko.soy/bridge

fix: scrollable tabs, remove hardware tab on mobile

commit15dd385969a91f3625c8838d13aafdff7e031650 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 6 Aug 2019, 23:58 (7 years ago) parent44049eb

5 files changed+71−65

compare with master

unifiedsplit

src/components/Tabs.js+28−26 src/style/bridge.scss+1−17 src/style/form-reset.scss+16−20 src/style/indigo-proposals.scss+8 src/views/Login.js+18−2

src/components/Tabs.js+28−26

@@ -14,33 +14,35 @@ export default function Tabs({

1414

1515 return (

1616 <Grid className={className}>

17− <Grid.Item full as={Flex} wrap className="b-gray3 bb1">

18− {options.map((option, i) => {

19− const isActive = option.value === currentTab;

20− const isFirst = i === 0;

17+ <Grid.Item full as={Flex} className="b-gray3 bb1 scroll-x hidden-y">

18+ <Flex.Item as={Flex}>

19+ {options.map((option, i) => {

20+ const isActive = option.value === currentTab;

21+ const isFirst = i === 0;

2122

22− return (

23− <Flex.Item

24− key={option.value}

25− onClick={() => onTabChange(option.value)}

26− className={cn(

27− 'f5 pv3 clickable',

28− {

29− 'black b-black bb1': isActive,

30− gray3: !isActive,

31− },

32− {

33− // all items have right margin/padding

34− 'mr2 pr2': true,

35− // the first one is flush to the left

36− 'ml2 pl2': !isFirst,

37− }

38− )}

39− style={{ marginBottom: '-1px' }}>

40− {option.text}

41− </Flex.Item>

42− );

43− })}

23+ return (

24+ <Flex.Item

25+ key={option.value}

26+ onClick={() => onTabChange(option.value)}

27+ className={cn(

28+ 'f5 pv3 clickable nowrap',

29+ {

30+ 'black b-black bb1': isActive,

31+ gray3: !isActive,

32+ },

33+ {

34+ // all items have right margin/padding

35+ 'mr2 pr2': true,

36+ // the first one is flush to the left

37+ 'ml2 pl2': !isFirst,

38+ }

39+ )}

40+ style={{ marginBottom: '-1px' }}>

41+ {option.text}

42+ </Flex.Item>

43+ );

44+ })}

45+ </Flex.Item>

4446 </Grid.Item>

4547 <Grid.Item full as={Tab} {...rest} />

4648 </Grid>

src/style/bridge.scss+1−17

@@ -1,20 +1,4 @@

1−$handle-extent: 24px;

2−

3−@keyframes autofill {

4− to {

5− color: #000;

6− background: transparent;

7− }

8−}

9−

10−/* avoid yellow autofill highlight on browsers that respect this attribute */

11−input:-webkit-autofill {

12− animation-name: autofill;

13− animation-fill-mode: both;

14−

15− -webkit-animation-name: autofill;

16− -webkit-animation-fill-mode: both;

17−}

1+$handle-extent: 24px; // $lh-regular

182

193// min-height the top elements so footer behavior works correctly

204html {

src/style/form-reset.scss+16−20

@@ -1,7 +1,12 @@

11$form-padding: 24px; // indigo pv3

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

2+$form-line-height: 1.5rem; // $lh-regular

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

4+@keyframes autofill {

5+ to {

6+ color: #000;

7+ background: transparent;

8+ }

9+}

510

611input,

712button,

@@ -24,28 +29,19 @@ select {

2429}

2530

2631input {

32+ // enforce border-box

2733 box-sizing: border-box;

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

2934

35+ // enforce height & line-height for accessories

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

3137 line-height: $form-line-height;

32−}

3338

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−}

39+ // avoid yellow autofill highlight on browsers that respect this attribute

40+ &:-webkit-autofill {

41+ animation-name: autofill;

42+ animation-fill-mode: both;

4143

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;

44+ -webkit-animation-name: autofill;

45+ -webkit-animation-fill-mode: both;

46+ }

5147}

src/style/indigo-proposals.scss+8

@@ -48,3 +48,11 @@

4848.arial {

4949 font-family: Arial, monospace;

5050}

51+

52+.scroll-x {

53+ overflow-x: auto;

54+}

55+

56+.hidden-y {

57+ overflow-y: hidden;

58+}

src/views/Login.js+18−2

@@ -1,7 +1,8 @@

1−import React, { useCallback, useState } from 'react';

1+import React, { useCallback, useState, useMemo } from 'react';

22import { Just, Nothing } from 'folktale/maybe';

33import * as azimuth from 'azimuth-js';

44import { H4, Grid } from 'indigo-react';

5+import { filter } from 'lodash';

67import { useHistory } from 'store/history';

78import { useNetwork } from 'store/network';

@@ -21,6 +22,7 @@ import Ticket from './Login/Ticket';

2122import Mnemonic from './Login/Mnemonic';

2223import Advanced from './Login/Advanced';

2324import Hardware from './Login/Hardware';

25+import useBreakpoints from 'lib/useBreakpoints';

2426

2527const NAMES = {

2628 TICKET: 'TICKET',

@@ -70,6 +72,20 @@ export default function Login() {

7072

7173 const [deducing, setDeducing] = useState(false);

7274

75+ // again, using breakpoint to decide if we're on mobile or not

76+ // see ActivateCode for more details

77+ const hardwareAllowed = useBreakpoints([false, true, true]);

78+

79+ // filter out hardware if mobile

80+ const options = useMemo(

81+ () =>

82+ filter(

83+ OPTIONS,

84+ ({ value }) => hardwareAllowed || value !== NAMES.HARDWARE

85+ ),

86+ [hardwareAllowed]

87+ );

88+

7389 // inputs

7490 const [currentTab, setCurrentTab] = useState(

7591 walletTypeToViewName(walletType)

@@ -132,7 +148,7 @@ export default function Login() {

132148 as={Tabs}

133149 className="mt1"

134150 views={VIEWS}

135− options={OPTIONS}

151+ options={options}

136152 currentTab={currentTab}

137153 onTabChange={setCurrentTab}

138154 />