Web: Backup: Fixed styles for backup.
This commit is contained in:
parent
934b9824d4
commit
36959d8eec
@ -145,12 +145,12 @@ class BackupMobileView extends React.Component {
|
|||||||
onClick={() => this.onClickModule(section)}
|
onClick={() => this.onClickModule(section)}
|
||||||
>
|
>
|
||||||
{sectionTitle}
|
{sectionTitle}
|
||||||
|
<StyledArrowRightIcon
|
||||||
|
className="backup-section_arrow-button"
|
||||||
|
size="small"
|
||||||
|
color="#333333"
|
||||||
|
/>
|
||||||
</Text>
|
</Text>
|
||||||
<StyledArrowRightIcon
|
|
||||||
className="backup-section_arrow-button"
|
|
||||||
size="small"
|
|
||||||
color="#333333"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Trans
|
<Trans
|
||||||
|
@ -117,7 +117,7 @@ const StyledAutoBackup = styled.div`
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.auto-backup_buttons {
|
.auto-backup_buttons {
|
||||||
${(props) => !props.isMobileOnly && "margin-bottom: 24px"}
|
${!isMobileOnly && "margin-bottom: 24px"}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -182,6 +182,9 @@ const StyledRestoreBackup = styled.div`
|
|||||||
.backup_radio-button {
|
.backup_radio-button {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
.restore-backup_button {
|
||||||
|
${isMobileOnly && "width:100%"}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledModules = styled.div`
|
const StyledModules = styled.div`
|
||||||
@ -244,47 +247,45 @@ const StyledScheduleComponent = styled.div`
|
|||||||
max-width: 363px;
|
max-width: 363px;
|
||||||
}
|
}
|
||||||
|
|
||||||
${(props) =>
|
${!isMobileOnly
|
||||||
!props.isMobileOnly
|
? css`
|
||||||
? css`
|
.main_options {
|
||||||
.main_options {
|
max-width: ${INPUT_LENGTH};
|
||||||
max-width: ${INPUT_LENGTH};
|
display: grid;
|
||||||
display: grid;
|
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.weeklySchedule || props.monthlySchedule
|
props.weeklySchedule || props.monthlySchedule
|
||||||
? css`
|
? css`
|
||||||
grid-template-areas: "days weekly-monthly time";
|
grid-template-areas: "days weekly-monthly time";
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
`
|
`
|
||||||
: css`
|
: css`
|
||||||
grid-template-areas: "days time";
|
grid-template-areas: "days time";
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
`};
|
`};
|
||||||
grid-gap: 8px;
|
grid-gap: 8px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
.days_option {
|
||||||
|
grid-area: time;
|
||||||
|
|
||||||
|
max-width: ${INPUT_LENGTH};
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
.drop-down_variable-size {
|
||||||
|
max-width: ${INPUT_LENGTH} !important;
|
||||||
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
: css`
|
`}
|
||||||
.days_option {
|
|
||||||
grid-area: time;
|
|
||||||
|
|
||||||
max-width: ${INPUT_LENGTH};
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
.drop-down_variable-size {
|
|
||||||
max-width: ${INPUT_LENGTH} !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
|
|
||||||
.time_options {
|
.time_options {
|
||||||
grid-area: time;
|
grid-area: time;
|
||||||
${(props) =>
|
${isMobileOnly &&
|
||||||
props.isMobileOnly &&
|
css`
|
||||||
css`
|
max-width: ${INPUT_LENGTH};
|
||||||
max-width: ${INPUT_LENGTH};
|
`};
|
||||||
`};
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.drop-down_variable-size {
|
.drop-down_variable-size {
|
||||||
max-width: ${INPUT_LENGTH} !important;
|
max-width: ${INPUT_LENGTH} !important;
|
||||||
@ -325,7 +326,7 @@ const StyledBackup = styled.div`
|
|||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
.layout-progress-bar {
|
.layout-progress-bar {
|
||||||
${(props) => !props.isMobileOnly && "cursor: default;"}
|
${!isMobileOnly && "cursor: default;"}
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup_modules-description {
|
.backup_modules-description {
|
||||||
@ -348,10 +349,9 @@ const StyledBackup = styled.div`
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
margin-right: 7.29px;
|
|
||||||
}
|
}
|
||||||
.backup-section_arrow-button {
|
.backup-section_arrow-button {
|
||||||
margin: auto 0;
|
margin: auto 0 auto 7.29px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -450,6 +450,7 @@ class RestoreBackup extends React.Component {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
className="restore-backup_button"
|
||||||
label={t("Common:Restore")}
|
label={t("Common:Restore")}
|
||||||
onClick={this.onRestoreClick}
|
onClick={this.onRestoreClick}
|
||||||
primary
|
primary
|
||||||
|
Loading…
Reference in New Issue
Block a user