Skip to content

Commit

Permalink
fix: 🐛 adds scrollable content support for low res screens (#8913)
Browse files Browse the repository at this point in the history 
* fix: 🐛 adds scrollable content support for low res screens

* style: 💄 styles modal according to figma design

* style: 💄 styles button container according to figma design

* revert: 💄 reverts style changes in cfd-dashboard
  • Loading branch information
@shaheer-deriv
shaheer-deriv authored Jun 7, 2023
1 parent bbd63a3 commit 17f530c
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 59 deletions.
44 changes: 35 additions & 9 deletions packages/appstore/src/components/cfds-listing/cfds-listing.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
.jurisdiction-modal {
&__content-wrapper {
display: flex;
flex-direction: column;
@include desktop {
overflow: scroll;
}
}
&__scrollable-content {
@include desktop {
overflow: scroll;
}
}
&__footer-content {
background-color: var(--general-main-1);
@include mobile {
position: sticky;
bottom: 7.2rem;
}
}
&__footer-button {
background-color: var(--general-main-1);
@include mobile {
height: 7.2rem;
position: sticky;
bottom: 0;
}
}
}

.cfd-jurisdiction-card--synthetic,
.cfd-jurisdiction-card--financial,
.cfd-jurisdiction-card--all {
Expand All @@ -23,7 +53,7 @@
margin: 4rem 6rem 2rem;
display: flex;
justify-content: center;
gap: 2rem;
gap: 1.6rem;
@include mobile {
margin: 0;
padding: 4rem;
Expand Down Expand Up @@ -72,14 +102,14 @@
}
&-flipped-container {
gap: 2rem;
padding: 4rem 2rem;
padding: 4rem 1.6rem;
}
&-section-container {
display: flex;
flex-direction: column;
gap: 1.2rem;
height: 100%;
margin: 0 2rem;
margin: 0 1.6rem;
}
}

Expand All @@ -98,12 +128,8 @@
justify-content: space-between;
@include mobile {
min-height: auto;
background-color: var(--general-main-1);
width: 100%;
height: 100%;
position: sticky;
bottom: 0;
z-index: 12;
}
}

Expand All @@ -113,7 +139,7 @@
gap: 1rem;
margin: 1rem;
@include desktop {
min-height: 6rem;
min-height: 7.6rem;
}
@include mobile {
gap: 0;
Expand Down Expand Up @@ -173,7 +199,7 @@
transform-style: preserve-3d;
-webkit-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
width: 29rem;
width: 28rem;
&.synthetic,
&.all {
min-height: 48rem;
Expand Down
106 changes: 57 additions & 49 deletions packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react';
import { Button, Modal } from '@deriv/components';
import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared';
Expand Down Expand Up @@ -174,57 +175,64 @@ const JurisdictionModalContentWrapper = ({
};

return (
<React.Fragment>
<JurisdictionModalContent
account_status={account_status}
account_type={account_type.type}
financial_available_accounts={financial_available_accounts}
is_non_idv_design={is_non_idv_design}
is_virtual={is_virtual}
real_financial_accounts_existing_data={real_financial_accounts_existing_data}
real_synthetic_accounts_existing_data={real_synthetic_accounts_existing_data}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
real_swapfree_accounts_existing_data={real_swapfree_accounts_existing_data}
setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode}
swapfree_available_accounts={swapfree_available_accounts}
synthetic_available_accounts={synthetic_available_accounts}
/>
<div className={`cfd-jurisdiction-card--${account_type.type}__footer-wrapper`}>
<div className={`cfd-jurisdiction-card--${account_type.type}__footnotes-container`}>
<JurisdictionModalFootNote
account_status={account_status}
account_type={account_type.type}
card_classname={`cfd-jurisdiction-card--${account_type.type}`}
context={context}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
should_restrict_bvi_account_creation={should_restrict_bvi_account_creation}
should_restrict_vanuatu_account_creation={should_restrict_vanuatu_account_creation}
/>
<JurisdictionCheckBox
is_checked={checked}
context={context}
onCheck={() => setChecked(!checked)}
class_name={`cfd-jurisdiction-card--${account_type.type}__jurisdiction-checkbox`}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
should_restrict_bvi_account_creation={should_restrict_bvi_account_creation}
should_restrict_vanuatu_account_creation={should_restrict_vanuatu_account_creation}
/>
<div className='jurisdiction-modal__content-wrapper'>
<div className='jurisdiction-modal__scrollable-content'>
<JurisdictionModalContent
account_status={account_status}
account_type={account_type.type}
financial_available_accounts={financial_available_accounts}
is_non_idv_design={is_non_idv_design}
is_virtual={is_virtual}
real_financial_accounts_existing_data={real_financial_accounts_existing_data}
real_synthetic_accounts_existing_data={real_synthetic_accounts_existing_data}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
real_swapfree_accounts_existing_data={real_swapfree_accounts_existing_data}
setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode}
swapfree_available_accounts={swapfree_available_accounts}
synthetic_available_accounts={synthetic_available_accounts}
/>
<div
className={classNames(
'jurisdiction-modal__footer-content',
`cfd-jurisdiction-card--${account_type.type}__footer-wrapper`
)}
>
<div className={`cfd-jurisdiction-card--${account_type.type}__footnotes-container`}>
<JurisdictionModalFootNote
account_status={account_status}
account_type={account_type.type}
card_classname={`cfd-jurisdiction-card--${account_type.type}`}
context={context}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
should_restrict_bvi_account_creation={should_restrict_bvi_account_creation}
should_restrict_vanuatu_account_creation={should_restrict_vanuatu_account_creation}
/>
<JurisdictionCheckBox
is_checked={checked}
context={context}
onCheck={() => setChecked(!checked)}
class_name={`cfd-jurisdiction-card--${account_type.type}__jurisdiction-checkbox`}
jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
should_restrict_bvi_account_creation={should_restrict_bvi_account_creation}
should_restrict_vanuatu_account_creation={should_restrict_vanuatu_account_creation}
/>
</div>
</div>
<Modal.Footer has_separator>
<Button
disabled={isNextButtonDisabled()}
primary
style={{ width: isMobile() ? '100%' : 'unset' }}
onClick={() => {
toggleJurisdictionModal();
onSelectRealAccount();
}}
>
{localize('Next')}
</Button>
</Modal.Footer>
</div>
</React.Fragment>
<Modal.Footer className='jurisdiction-modal__footer-button' has_separator>
<Button
disabled={isNextButtonDisabled()}
primary
style={{ width: isMobile() ? '100%' : 'unset' }}
onClick={() => {
toggleJurisdictionModal();
onSelectRealAccount();
}}
>
{localize('Next')}
</Button>
</Modal.Footer>
</div>
);
};
export default connect(({ modules: { cfd }, client, traders_hub }: RootStore) => ({
Expand Down
2 changes: 1 addition & 1 deletion packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const JurisdictionModal = ({
toggleModal={toggleJurisdictionModal}
type='button'
context={context}
width={account_type.type === 'financial' ? '1300px' : '1160px'}
width={account_type.type === 'financial' ? '1200px' : '1040px'}
>
<JurisdictionModalContentWrapper openPasswordModal={openPasswordModal} context={context} />
</Modal>
Expand Down

1 comment on commit 17f530c

@vercel
Copy link

@vercel vercel bot commented on 17f530c Jun 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
binary.sx
deriv-app.binary.sx
deriv-app-git-master.binary.sx

Please sign in to comment.