Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Set catalog min-width at minimum shrinkable width of its ui child elements #3761

Merged
merged 1 commit into from
Dec 17, 2019
Merged

Set catalog min-width at minimum shrinkable width of its ui child elements #3761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...end/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const OperatorHubPage = withFallback(
appear in the <a href="/catalog">Developer Catalog</a>, providing a self-service
experience.
</p>
<div className="co-catalog-connect">
<div className="co-catalog__body">
<Firehose
resources={[
{
Expand Down
12 changes: 9 additions & 3 deletions frontend/public/components/catalog/_catalog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,20 @@ $co-modal-ignore-warning-icon-width: 30px;
}

.co-catalog {
background-color: $pf-color-black-200;
display: flex;
flex-direction: column;
min-height: 100%;
min-width: 515px; // in order to accommodate filters and tiles at mobile
padding: 0 0 ($grid-gutter-width / 2);
}

.co-catalog__body {
min-width: 575px; // Minimum shrinkable width of .co-catalog child elements => 15 + ((220 + 15) + (30 + 250 + 30)) + 15
@media (min-width: $screen-sm-min) {
min-width: 590px; // Left margin 30 instead of 15
}
}

.co-catalog-item-details {
display: flex;
margin: 0 0 10px;
Expand Down Expand Up @@ -123,7 +129,7 @@ $co-modal-ignore-warning-icon-width: 30px;
}

&__header {
margin: 0 ($grid-gutter-width / 2) 0 0;
margin: 0 $grid-gutter-width 0 0;
}

&__heading {
Expand All @@ -132,7 +138,7 @@ $co-modal-ignore-warning-icon-width: 30px;
}

&__input {
margin: 0 0 20px 30px;
margin: 0 10px 20px 30px;
width: auto !important;
}

Expand Down
18 changes: 10 additions & 8 deletions frontend/public/components/catalog/catalog-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,14 +339,16 @@ export const Catalog = connectToFlags<CatalogProps>(
];

return (
<Firehose resources={mock ? [] : resources}>
<CatalogListPage
namespace={namespace}
templateMetadata={templateMetadata}
projectTemplateMetadata={projectTemplateMetadata}
{...props as any}
/>
</Firehose>
<div className="co-catalog__body">
<Firehose resources={mock ? [] : resources}>
<CatalogListPage
namespace={namespace}
templateMetadata={templateMetadata}
projectTemplateMetadata={projectTemplateMetadata}
{...props as any}
/>
</Firehose>
</div>
);
});

Expand Down