github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UI Framework] Improve UI Framework Home Page and 404 Page. (#11715) (#11716)

Browse source 
* Improve usability and accessibility of UI Framework nav.

* Improve UI Framework Home Page and 404 Page.
This commit is contained in:
CJ Cenizal 2017-05-10 14:18:50 -07:00 • committed by GitHub
parent 8eb393a5d1
commit 62a5dc63bb
10 changed files with 206 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

9
ui_framework/doc_site/src/components/guide_link/_guide_link.scss
View file

@ -0,0 +1,9 @@
.guideLink {
color: $guideLinkColor;
text-decoration: none;
&:hover {
color: $guideLinkHoverColor;
text-decoration: underline;
}
}

3
ui_framework/doc_site/src/components/guide_nav/guide_nav.js
View file

@ -141,7 +141,7 @@ export class GuideNav extends Component {
>
Kibana UI Framework <span className="guideNav__version">{this.props.version}</span>
</Link>
<div className="guideNav__elasticLogo" />
<a href="http://elastic.co" className="guideNav__elasticLogo" aria-label="Go to the Elastic website" />
{this.renderPagination()}
</div>
@ -149,6 +149,7 @@ export class GuideNav extends Component {
<div>
<input
type="text"
placeholder="Search components and sandboxes"
className="guideNavSearch"
value={this.state.search}
onChange={this.onSearchChange}

15
ui_framework/doc_site/src/components/guide_text/_guide_text.scss
View file

@ -1,5 +1,16 @@
.guideTitle {
font-weight: 700;
font-size: 22px;
line-height: 1.5;
margin: 0;
}
.guideText {
font-size: 14px;
line-height: 21px;
margin-top: $guideVerticalRhythm;
line-height: 1.5;
margin: $guideVerticalRhythm 0 0;
}
.guideText--noMargin {
margin-top: 0;
}

25
ui_framework/doc_site/src/images/hint-arrow.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="49px" viewBox="0 0 33 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="arrow" transform="translate(1.000000, 1.000000)">
<polygon id="Path-2" fill="#FFFFFF" points="11.5991211 0.698242188 28.7232122 12.8994141 23.8833008 14.7114258 30.5878906 40.6455078 25.2529297 45.0541992 13.1123047 46.5180664 7.92724609 22.1758009 0.65625 21.4760742 6.46533203 3.15625"></polygon>
<polygon id="Path-3" stroke="#00C0B4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="12.2182617 0.248046875 29.2192383 12.9946289 24.0693359 14.1850586 30.3686523 40.2514648 17.4643555 42.2636719 11.4897461 17.4106445 5.90136719 18.2470703"></polygon>
<polyline id="Path-4" stroke="#00C0B4" stroke-width="2" stroke-linejoin="round" points="12.0644531 0.201171875 7.65820313 2.56591797 0.029296875 23.2556152 8.34814453 21.8032227 12.9428711 46.269043 24.7758789 44.972168 30.7910156 40.1357422"></polyline>
<path d="M25.5,41.5 L20.5,45.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M6.5,5.5 L9.5,4.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M4.5,10.5 L8.5,8.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M7.5,12.5 L2.5,15.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M5.5,17.5 L1.5,20.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M3.5,22.5 L11.5,17.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M9.5,24.5 L12.5,22.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M9.5,30.5 L13.5,27.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M11.5,35.5 L15.5,32.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M11.5,41.5 L15.5,38.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M15.5,45.5 L18.5,42.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
ui_framework/doc_site/src/index.js
View file

@ -16,8 +16,8 @@ import configureStore from './store/configure_store';
// Guide views.
import AppContainer from './views/app_container';
import HomeView from './views/home/home_view';
import NotFoundView from './views/not_found/not_found_view';
import { HomeView } from './views/home/home_view';
import { NotFoundView } from './views/not_found/not_found_view';
import {
Routes,

52
ui_framework/doc_site/src/main.scss
View file

@ -1,6 +1,5 @@
@import "../../dist/ui_framework.css";
@import "./variables";
@import "./views/home/home_view";
@import "./components/guide_components";
* {
@ -29,6 +28,8 @@ body {
}
.guideContent {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding-top: $guideNavHeight;
transition: padding-right $guideCodeViewerTransition;
@ -42,6 +43,55 @@ body {
}
}
@media only screen and (max-width: 1300px) {
.guideHomePage {
justify-content: flex-start !important;
.guideContentPage__content {
margin-left: 250px;
}
}
}
.guideContentPage {
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
background-color: #ffffff;
}
.guideContentPage__hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 260px;
max-height: 500px;
padding: 30px;
margin: 20px;
border-radius: 4px;
background-color: #e8e8e8;
line-height: $guideLineHeight;
}
.guideContentPage__content {
width: 100%;
max-width: 800px;
padding: 30px 60px;
}
.guideHintArrow {
position: absolute;
top: -15px;
left: 12px;
background-image: url("images/hint-arrow.svg");
width: 26px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
}
.guideWarning {
border-left: 5px solid #e8488b;
margin-top: 19px;

1
ui_framework/doc_site/src/variables.scss
View file

@ -10,6 +10,7 @@ $guideCodeViewerTransition: 0.2s ease;
$guideBaseBackgroundColor: #f7f7f7;
$guidePanelBackgroundColor: #ffffff;
$guideTextColor: #444;
$guideLinkColor: #00a9e5;
$guideLinkHoverColor: #00a9e5;
// Breakpoints

28
ui_framework/doc_site/src/views/home/_home_view.scss
View file

@ -1,28 +0,0 @@
@import "../../variables";
.guideHome {
display: flex;
justify-content: center;
}
.guideHome__panel {
width: 100%;
max-width: 600px;
max-height: 500px;
padding: 60px;
margin: 20px;
border-radius: 3px;
background-color: #e8e8e8;
line-height: $guideLineHeight;
}
.guideHome__panelTitle {
font-weight: 700;
font-size: 22px;
margin-bottom: 20px;
}
.guideHome__panelText {
font-size: 18px;
}

101
ui_framework/doc_site/src/views/home/home_view.js
View file

@ -1,28 +1,85 @@
import React from 'react';
import React, {
Component,
} from 'react';
import {
Link,
} from 'react-router';
export default class HomeView extends Component {
export const HomeView = () => (
<div className="guideContentPage guideHomePage">
<div className="guideContentPage__hint">
<p className="guideText guideText--noMargin">
You can navigate the docs with this little menu button.
</p>
constructor(props) {
super(props);
}
<div className="guideHintArrow" />
</div>
render() {
return (
<div className="guideHome">
<div className="guideHome__panel">
<div className="guideHome__panelTitle">
Welcome to the Kibana UI Framework
</div>
<div className="guideContentPage__content">
<h1 className="guideTitle">
Welcome to the Kibana UI Framework docs!
</h1>
<div className="guideHome__panelText">
Get started by clicking the menu button in the top left corner of the screen.
</div>
</div>
</div>
);
}
<p className="guideText">
The Kibana team uses the UI Framework to build Kibana's user interface. Please see
the <a href="https://www.elastic.co/guide/en/kibana/current/index.html" className="guideLink">general Kibana docs</a> for information on how to use Kibana, and
the <a href="https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html" className="guideLink">plugin-specific section</a> for
help developing Kibana plugins.
</p>
}
<p className="guideText">
You can find the source for the UI Framework
at the <a href="https://github.com/elastic/kibana/tree/master/ui_framework" className="guideLink">Kibana repo</a>.
</p>
<p className="guideText">
If you're just getting started with the UI Framework for the first time, you may
be interested in some of the more commonly-used components:
</p>
<p className="guideText">
<Link
className="guideLink"
to="button"
>
<span className="fa fa-angle-double-right" /> Buttons
</Link>
</p>
<p className="guideText">
<Link
className="guideLink"
to="form"
>
<span className="fa fa-angle-double-right" /> Form elements
</Link>
</p>
<p className="guideText">
<Link
className="guideLink"
to="table"
>
<span className="fa fa-angle-double-right" /> Tables
</Link>
</p>
<p className="guideText">
<Link
className="guideLink"
to="typography"
>
<span className="fa fa-angle-double-right" /> Typography
</Link>
</p>
<p className="guideText">
<Link
className="guideLink"
to="infopanel"
>
<span className="fa fa-angle-double-right" /> InfoPanels
</Link>
</p>
</div>
</div>
);

41
ui_framework/doc_site/src/views/not_found/not_found_view.js
View file

@ -1,20 +1,27 @@
import React from 'react';
import React, {
Component,
} from 'react';
import {
Link,
} from 'react-router';
export default class NotFoundView extends Component {
export const NotFoundView = () => (
<div className="guideContentPage">
<div className="guideContentPage__content">
<h1 className="guideTitle">
Wow, a 404! You just created <em>something</em> from <em>nothing</em>.
</h1>
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Page not found.</h1>
</div>
);
}
}
<p className="guideText">
You visited a page which doesn't exist, causing <em>this</em> page to exist. This page thanks
you for summoning it into existence from the raw fabric of reality, but it thinks you may
find another page more interesting. Might it suggest
the <Link
className="guideLink"
to="/"
>
home page
</Link>?
</p>
</div>
</div>
);