IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: PortalSettings: fixed mobile styles

Browse Source
This commit is contained in:
Nikita Gopienko 2023-12-20 16:00:33 +03:00
parent 67886ed433
commit 188de5d2f5
8 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
View File

@ -46,12 +46,6 @@ const StyledComponent = styled.div`
display: none;
}
}
@media (max-height: 700px) {
.save-cancel-buttons {
bottom: auto;
}
}
`;
const CompanyInfoSettings = (props) => {

22
packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js
View File

@ -146,19 +146,17 @@ const StyledSettingsComponent = styled.div`
`}
.send-request-container {
box-sizing: border-box;
position: absolute;
padding-block: 30px;
position: sticky;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
padding: 16px;
width: 100%;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
.send-request-button {

6
packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js
View File

@ -197,8 +197,7 @@ const WelcomePageSettings = (props) => {
.finally(() => {
getGreetingSettingsIsDefault();
setState((val) => ({ ...val, isLoadingGreetingSave: false }));
}
);
});
setState((val) => ({ ...val, showReminder: false }));
@ -225,8 +224,7 @@ const WelcomePageSettings = (props) => {
.finally(() => {
getGreetingSettingsIsDefault();
setState((val) => ({ ...val, isLoadingGreetingRestore: false }));
}
);
});
};
const settingIsEqualInitialValue = (stateName, value) => {

14
packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
View File

@ -399,6 +399,20 @@ const StyledRestoreBackup = styled.div`
margin-bottom: 16px;
}
.restore-backup_button-container {
padding-block: 30px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
.restore-backup_button {
@media ${mobile} {
width: 100%;

4
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/ButtonComponent.js
View File

@ -103,7 +103,7 @@ const ButtonContainer = (props) => {
const isLoadingButton = isLoading;
return (
<>
<div className="restore-backup_button-container">
<Button
className="restore-backup_button"
label={t("Common:Restore")}
@ -123,7 +123,7 @@ const ButtonContainer = (props) => {
percent={downloadingProgress}
/>
)}
</>
</div>
);
};

33
packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js
View File

@ -14,33 +14,18 @@ import { useIsMobileView } from "../../../utils/useIsMobileView";
const StyledWrapper = styled.div`
.button-wrapper {
margin-top: 24px;
}
padding-block: 16px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
.button-wrapper {
box-sizing: border-box;
position: absolute;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
width: 100%;
padding: 16px 16px 16px 24px;
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
@media ${mobile}{
.button-wrapper {
padding: 16px;
}
}
}
`;
const ProviderMetadata = (props) => {

12
packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
View File

@ -86,6 +86,18 @@ const DownLoadWrapper = styled.div`
align-items: center;
gap: 12px;
padding-block: 16px 30px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
.download-report_button {
width: auto;
height: auto;

24
packages/components/save-cancel-buttons/styled-save-cancel-buttons.js
View File

@ -111,6 +111,7 @@ const StyledSaveCancelButtons = styled.div`
align-items: center;
bottom: ${(props) => props.theme.saveCancelButtons.bottom};
width: ${(props) => props.theme.saveCancelButtons.width};
background-color: ${({ theme }) => theme.backgroundColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
@ -120,8 +121,12 @@ const StyledSaveCancelButtons = styled.div`
.save-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-left: ${props.theme.saveCancelButtons.marginRight};`
: `margin-right: ${props.theme.saveCancelButtons.marginRight};`}
? css`
margin-left: ${props.theme.saveCancelButtons.marginRight};
`
: css`
margin-right: ${props.theme.saveCancelButtons.marginRight};
`}
}
.unsaved-changes {
color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
@ -133,14 +138,25 @@ const StyledSaveCancelButtons = styled.div`
${(props) => props.displaySettings && tabletButtons}
${(props) =>
!props.displaySettings &&
`
css`
justify-content: flex-end;
position: fixed;
.unsaved-changes {
display: none;
}
`}
`}
}
@media ${mobile} {
position: fixed;
inset-inline: 0;
bottom: 0;
${({ showReminder }) =>
showReminder &&
css`
padding-top: 30px;
`}
}
`;
StyledSaveCancelButtons.defaultProps = { theme: Base };