git.iko.soy/bridge
on master help sign in
fix: allow tabs to wrap, simplify half/full layout logic
commit537ff5bdffdd3c983380f1d7f485bbb24e7805ee authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateMon 8 Jul 2019, 13:51 (7 years ago) parente471cdb
3 files changed+11−7
compare with master
unifiedsplit
src/components/Tabs.js+1−1 src/views/Activate/ActivatePassport.js+3−4 src/views/Login/Ledger.js+7−2
src/components/Tabs.js+1−1
@@ -14,7 +14,7 @@ export default function Tabs({
1414
1515 return (
1616 <Grid className={className}>
17− <Grid.Item full as={Flex} className="b-gray3 bb1">
17+ <Grid.Item full as={Flex} wrap className="b-gray3 bb1">
1818 {options.map(option => {
1919 const isActive = option.value === currentTab;
2020 return (
src/views/Activate/ActivatePassport.js+3−4
@@ -46,8 +46,7 @@ export default function ActivatePassport() {
4646 const gap = useBreakpoints([4, 4, 7]);
4747 const marginTop = useBreakpoints([false, false, 8]);
4848 const full = useBreakpoints([true, true, false]);
49− const leftHalf = useBreakpoints([false, false, 1]);
50− const rightHalf = useBreakpoints([false, false, 2]);
49+ const half = useBreakpoints([false, false, true]);
5150
5251 // addresses are not derived until we set[Urbit]Wallet(), so do that inline
5352 const address = useMemo(
@@ -68,7 +67,7 @@ export default function ActivatePassport() {
6867 <LocalRouterProvider value={router}>
6968 <View full={fullView}>
7069 <Grid gap={gap} className="mt8 mb10">
71− <Grid.Item half={leftHalf} full={full}>
70+ <Grid.Item half={half && 1} full={full}>
7271 <Passport
7372 className={cn({ [`mt${marginTop}`]: marginTop })}
7473 point={derivedPoint}
@@ -77,7 +76,7 @@ export default function ActivatePassport() {
7776 />
7877 </Grid.Item>
7978 <Grid.Item
80− half={rightHalf}
79+ half={half && 2}
8180 full={full}
8281 as={Route}
8382 resetActivateRouter={resetActivateRouter}
src/views/Login/Ledger.js+7−2
@@ -25,6 +25,7 @@ import {
2525import { WALLET_TYPES } from 'lib/wallet';
2626import useLoginView from 'lib/useLoginView';
2727import SelectInput from 'indigo-react/components/SelectInput';
28+import useBreakpoints from 'lib/useBreakpoints';
2829
2930const PATH_OPTIONS = [
3031 { text: 'Ledger Live', value: LEDGER_LIVE_PATH },
@@ -105,6 +106,8 @@ export default function Ledger({ className }) {
105106 }
106107 }, [useCustomPath, setHdPath, basePathPattern, accountIndex]);
107108
109+ const full = useBreakpoints([true, true, false]);
110+ const half = useBreakpoints([false, false, true]);
108111 const isHTTPS = document.location.protocol === 'https:';
109112
110113 // when not on https, tell user how to get there
@@ -163,13 +166,15 @@ export default function Ledger({ className }) {
163166 {!useCustomPath && (
164167 <>
165168 <Grid.Item
166− half={1}
169+ full={full}
170+ half={half && 1}
167171 as={SelectInput}
168172 className="pr1"
169173 {...derivationPathInput}
170174 />
171175 <Grid.Item
172− half={2}
176+ full={full}
177+ half={half && 2}
173178 as={SelectInput}
174179 className="pl1"
175180 {...accountInput}