hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix: use page-layout with fullsize viewport

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-11-04 17:01:24 +02:00
parent 0446fd4e89
commit 3e31b1d886
3 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/renderer/components/+extensions/extensions.scss
View File

@ -1,4 +1,7 @@
.Extensions { .Extensions {
--width: 100%;
--max-width: auto;
.extension { .extension {
--flex-gap: $padding / 3; --flex-gap: $padding / 3;
padding: $padding $padding * 2; padding: $padding $padding * 2;
@ -10,9 +13,13 @@
word-break: break-all; word-break: break-all;
} }
.info-col { .WizardLayout {
flex: 0.6; padding: 0;
align-self: flex-start;
.info-col {
flex: 0.6;
align-self: flex-start;
}
} }
.SearchInput { .SearchInput {

30
src/renderer/components/+extensions/extensions.tsx
View File

@ -9,6 +9,7 @@ import { Button } from "../button";
import { WizardLayout } from "../layout/wizard-layout"; import { WizardLayout } from "../layout/wizard-layout";
import { Input } from "../input"; import { Input } from "../input";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { PageLayout } from "../layout/page-layout";
import { extensionLoader } from "../../../extensions/extension-loader"; import { extensionLoader } from "../../../extensions/extension-loader";
import { extensionManager } from "../../../extensions/extension-manager"; import { extensionManager } from "../../../extensions/extension-manager";
@ -91,20 +92,21 @@ export class Extensions extends React.Component {
render() { render() {
return ( return (
<WizardLayout className="Extensions" infoPanel={this.renderInfo()}> <PageLayout showOnTop className="Extensions" header={<h2>Extensions</h2>}>
<h2><Trans>Extensions</Trans></h2> <WizardLayout infoPanel={this.renderInfo()}>
<Input <Input
autoFocus autoFocus
theme="round-black" theme="round-black"
className="SearchInput" className="SearchInput"
placeholder={_i18n._(t`Search extensions`)} placeholder={_i18n._(t`Search extensions`)}
value={this.search} value={this.search}
onChange={(value) => this.search = value} onChange={(value) => this.search = value}
/> />
<div className="extension-list flex column gaps"> <div className="extension-list flex column gaps">
{this.renderExtensions()} {this.renderExtensions()}
</div> </div>
</WizardLayout> </WizardLayout>
</PageLayout>
); );
} }
} }

12
src/renderer/components/layout/page-layout.scss
View File

@ -1,5 +1,8 @@
.PageLayout { .PageLayout {
$spacing: $padding * 2; $spacing: $padding * 2;
--width: 60%;
--max-width: 1000px;
--min-width: 570px;
position: relative; position: relative;
height: 100%; height: 100%;
@ -26,12 +29,15 @@
> .content-wrapper { > .content-wrapper {
@include custom-scrollbar-themed; @include custom-scrollbar-themed;
padding: $spacing * 2; padding: $spacing * 2;
display: flex;
flex-direction: column;
> .content { > .content {
flex: 1;
margin: 0 auto; margin: 0 auto;
width: 60%; width: var(--width);
min-width: 570px; min-width: var(--min-width);
max-width: 1000px; max-width: var(--max-width);
} }
} }