Skip to content

Commit

Permalink
[K7]: Responsive page layout components (elastic#13162)
Browse files Browse the repository at this point in the history 
Page layout components added to KUI.
  • Loading branch information
@snide @cjcenizal
snide authored and cjcenizal committed Aug 16, 2017
1 parent 6458da0 commit 7025edd
Show file tree
Hide file tree
Showing 49 changed files with 1,003 additions and 0 deletions.
127 changes: 127 additions & 0 deletions ui_framework/dist/ui_framework.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -606,6 +606,133 @@ table {
background: #e6f2f6;
outline: solid 3px #e6f2f6; }

.kuiPage {
padding: 32px; }

.kuiPageBody {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
min-height: 400px; }

@media only screen and (max-width: 768px) {
.kuiPageBody {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }

.kuiPageContent {
padding: 24px;
background: #FFF;
border: 1px solid #D9D9D9;
border-radius: 4px;
width: 100%; }
.kuiPageContent.kuiPageContent--verticalCenter {
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }
.kuiPageContent.kuiPageContent--horizontalCenter {
width: auto;
margin: auto; }

.kuiPageContentHeader {
margin-bottom: 32px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }

@media only screen and (max-width: 768px) {
.kuiPageContentHeader {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }

.kuiPageContentHeaderSection + .kuiPageContentHeaderSection {
margin-left: 32px; }

@media only screen and (max-width: 768px) {
.kuiPageContentHeaderSection {
width: 100%; }
.kuiPageContentHeaderSection + .kuiPageContentHeaderSection {
margin-left: 0;
margin-top: 16px; } }

.kuiPageSidebar {
width: 192px;
margin-right: 32px; }

@media only screen and (max-width: 768px) {
.kuiPageSidebar {
width: 100%;
margin-bottom: 32px; } }

.kuiPageHeader {
margin-bottom: 32px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }

@media only screen and (max-width: 768px) {
.kuiPageHeader {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }

.kuiPageHeaderSection + .kuiPageHeaderSection {
margin-left: 32px; }

@media only screen and (max-width: 768px) {
.kuiPageHeaderSection {
width: 100%; }
.kuiPageHeaderSection + .kuiPageHeaderSection {
margin-left: 0;
margin-top: 16px; } }

.kuiPopover {
display: inline-block;
position: relative; }
Expand Down
6 changes: 6 additions & 0 deletions ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,9 @@
background-color: #272727;
padding: 10px;
}

.guideDemo__highlightLayout {
div {
background: transparentize(#0096CC, .9);
}
}
7 changes: 7 additions & 0 deletions ui_framework/doc_site/src/services/routes/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import HeaderExample
import KeyPadMenuExample
from '../../views/key_pad_menu/key_pad_menu_example';

import PageExample
from '../../views/page/page_example';

import PopoverExample
from '../../views/popover/popover_example';

Expand All @@ -35,6 +38,10 @@ const components = [{
name: 'KeyPadMenu',
component: KeyPadMenuExample,
hasReact: true,
}, {
name: 'Page',
component: PageExample,
hasReact: true,
}, {
name: 'Popover',
component: PopoverExample,
Expand Down
50 changes: 50 additions & 0 deletions ui_framework/doc_site/src/views/page/page.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from 'react';

import {
KuiPage,
KuiPageBody,
KuiPageContent,
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiPageHeader,
KuiPageHeaderSection,
KuiPageSidebar,
KuiTitle,
} from '../../../../components';

export default () => (

<KuiPage>
<KuiPageHeader>
<KuiPageHeaderSection>
<KuiTitle size="large">
<h1>Page title</h1>
</KuiTitle>
</KuiPageHeaderSection>
<KuiPageHeaderSection>
Page abilities
</KuiPageHeaderSection>
</KuiPageHeader>
<KuiPageBody>
<KuiPageSidebar>
Sidebar nav
</KuiPageSidebar>
<KuiPageContent>
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
<h2>Content title</h2>
</KuiTitle>
</KuiPageContentHeaderSection>
<KuiPageContentHeaderSection>
Content abilities
</KuiPageContentHeaderSection>
</KuiPageContentHeader>
<KuiPageContentBody>
Content body
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
</KuiPage>
);
33 changes: 33 additions & 0 deletions ui_framework/doc_site/src/views/page/page_content_center.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

import {
KuiPage,
KuiPageBody,
KuiPageContent,
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiTitle,
} from '../../../../components';

export default () => (
<KuiPage>
<KuiPageBody>
<KuiPageContent verticalPosition="center" horizontalPosition="center">
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
<h2>Content title</h2>
</KuiTitle>
</KuiPageContentHeaderSection>
</KuiPageContentHeader>
<KuiPageContentBody>
Content body
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
</KuiPage>
);



51 changes: 51 additions & 0 deletions ui_framework/doc_site/src/views/page/page_content_center_with_sidebar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';

import {
KuiPage,
KuiPageBody,
KuiPageContent,
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiPageHeader,
KuiPageHeaderSection,
KuiPageSidebar,
KuiTitle,
} from '../../../../components';

export default () => (

<KuiPage>
<KuiPageHeader>
<KuiPageHeaderSection>
<KuiTitle size="large">
<h1>Page title</h1>
</KuiTitle>
</KuiPageHeaderSection>
<KuiPageHeaderSection>
Page abilities
</KuiPageHeaderSection>
</KuiPageHeader>
<KuiPageBody>
<KuiPageSidebar>
Sidebar nav
</KuiPageSidebar>
<KuiPageContent verticalPosition="center" horizontalPosition="center">
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
<h2>Content title</h2>
</KuiTitle>
</KuiPageContentHeaderSection>
<KuiPageContentHeaderSection>
Content abilities
</KuiPageContentHeaderSection>
</KuiPageContentHeader>
<KuiPageContentBody>
Content body
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
</KuiPage>
);

32 changes: 32 additions & 0 deletions ui_framework/doc_site/src/views/page/page_content_only.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';

import {
KuiPage,
KuiPageBody,
KuiPageContent,
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiTitle,
} from '../../../../components';

export default () => (
<KuiPage>
<KuiPageBody>
<KuiPageContent>
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
<h2>Content title</h2>
</KuiTitle>
</KuiPageContentHeaderSection>
</KuiPageContentHeader>
<KuiPageContentBody>
Content body
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
</KuiPage>
);


Loading

0 comments on commit 7025edd

Please sign in to comment.