mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Add Elastic logo to UI Framework doc site. (#11686)
This commit is contained in:
CJ Cenizal
GitHub
parent
4ba903e023
commit
01fcf6b927
10 changed files with 123 additions and 99 deletions
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
@include scrollbar;
|
||||
|
||||
@include whenNarrowerThan($normalBreakpoint) {
|
||||
@include whenNarrowerThan($guideNormalBreakpoint) {
|
||||
width: $guideCodeViewerSmallWidth;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: $guideMinWidth;
|
||||
height: $guideNavHeight;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
color: $guideTextColor;
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
}
|
||||
|
||||
.guideNav__header {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -57,6 +59,17 @@
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.guideNav__elasticLogo {
|
||||
position: absolute;
|
||||
background-image: url("images/elastic-logo.svg");
|
||||
width: 106px;
|
||||
height: 36px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.guideNavSearch {
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
|
|
@ -118,3 +131,36 @@
|
|||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.guideNavPaginationButtons {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.guideNavPaginationButton {
|
||||
appearance: none;
|
||||
border: none;
|
||||
line-height: 10px;
|
||||
padding: 4px 20px;
|
||||
color: $guideLinkHoverColor;
|
||||
background-color: #fff;
|
||||
border: 1px solid $guideLinkHoverColor;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #e6f7fc;
|
||||
}
|
||||
|
||||
&.guideNavPaginationButton-isDisabled {
|
||||
pointer-events: none;
|
||||
color: rgba($guideTextColor, 0.25);
|
||||
border-color: rgba($guideTextColor, 0.25);
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,17 @@ import {
|
|||
import classNames from 'classnames';
|
||||
|
||||
export class GuideNav extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const currentRoute = props.routes[1];
|
||||
const nextRoute = this.props.getNextRoute(currentRoute.name);
|
||||
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
|
||||
|
||||
this.state = {
|
||||
search: '',
|
||||
nextRoute,
|
||||
previousRoute,
|
||||
};
|
||||
|
||||
this.onSearchChange = this.onSearchChange.bind(this);
|
||||
|
|
@ -26,6 +32,17 @@ export class GuideNav extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const currentRoute = nextProps.routes[1];
|
||||
const nextRoute = this.props.getNextRoute(currentRoute.name);
|
||||
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
|
||||
|
||||
this.setState({
|
||||
nextRoute,
|
||||
previousRoute,
|
||||
});
|
||||
}
|
||||
|
||||
renderNoItems(name) {
|
||||
return (
|
||||
<p className="guideNavNoItems">
|
||||
|
|
@ -34,6 +51,41 @@ export class GuideNav extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
renderPagination() {
|
||||
const previousClasses = classNames('guideNavPaginationButton', {
|
||||
'guideNavPaginationButton-isDisabled': !this.state.previousRoute,
|
||||
});
|
||||
|
||||
const previousButton = (
|
||||
<Link
|
||||
className={previousClasses}
|
||||
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
|
||||
>
|
||||
<span className="fa fa-angle-left"></span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const nextClasses = classNames('guideNavPaginationButton', {
|
||||
'guideNavPaginationButton-isDisabled': !this.state.nextRoute,
|
||||
});
|
||||
|
||||
const nextButton = (
|
||||
<Link
|
||||
className={nextClasses}
|
||||
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
|
||||
>
|
||||
<span className="fa fa-angle-right"></span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="guideNavPaginationButtons">
|
||||
{previousButton}
|
||||
{nextButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const classes = classNames('guideNav', {
|
||||
'is-guide-nav-open': this.props.isNavOpen,
|
||||
|
|
@ -89,6 +141,9 @@ export class GuideNav extends Component {
|
|||
>
|
||||
Kibana UI Framework <span className="guideNav__version">{this.props.version}</span>
|
||||
</Link>
|
||||
<div className="guideNav__elasticLogo" />
|
||||
|
||||
{this.renderPagination()}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -125,6 +180,9 @@ GuideNav.propTypes = {
|
|||
onToggleNav: PropTypes.func,
|
||||
onClickNavItem: PropTypes.func,
|
||||
version: PropTypes.string,
|
||||
routes: PropTypes.array,
|
||||
getNextRoute: PropTypes.func,
|
||||
getPreviousRoute: PropTypes.func,
|
||||
components: PropTypes.array,
|
||||
sandboxes: PropTypes.array,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerWidth});
|
||||
}
|
||||
|
||||
@include whenNarrowerThan($normalBreakpoint) {
|
||||
@include whenNarrowerThan($guideNormalBreakpoint) {
|
||||
$leftMargin: 20px + $guideSideNavSmallWidth;
|
||||
$rightMargin: 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@include scrollbar;
|
||||
|
||||
@include whenNarrowerThan($normalBreakpoint) {
|
||||
@include whenNarrowerThan($guideNormalBreakpoint) {
|
||||
width: $guideSideNavSmallWidth;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
ui_framework/doc_site/src/images/elastic-logo.svg
Normal file
3
ui_framework/doc_site/src/images/elastic-logo.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-155 383.3 687.5 235.7" xml:space="preserve" enable-background="new -155 383.3 687.5 235.7">
|
||||
<path fill="#FFFFFF" d="M81.6 506.8c0-19.8-12.3-37.2-30.8-43.9 0.8-4.2 1.2-8.4 1.2-12.7 0-36.9-30-66.9-66.8-66.9 -21.6 0-41.6 10.3-54.2 27.7 -6.2-4.8-13.8-7.4-21.7-7.4 -19.6 0-35.5 15.9-35.5 35.5 0 4.3 0.8 8.5 2.2 12.4 -18.4 6.6-31 24.3-31 44 0 19.9 12.4 37.3 30.9 44 -0.8 4.1-1.2 8.4-1.2 12.7 0 36.8 29.9 66.7 66.7 66.7 21.6 0 41.6-10.4 54.1-27.8 6.2 4.9 13.8 7.6 21.7 7.6 19.6 0 35.5-15.9 35.5-35.5 0-4.3-0.8-8.5-2.2-12.4C68.9 544.2 81.6 526.5 81.6 506.8"/><path fill="#FED10A" d="M-62 484.8l51.8 23.6L42 462.6c0.8-3.8 1.1-7.5 1.1-11.5 0-32.2-26.2-58.4-58.4-58.4 -19.3 0-37.2 9.5-48.1 25.4l-8.7 45.1L-62 484.8z"/><path fill="#24BBB1" d="M-115.6 539.6c-0.8 3.8-1.1 7.7-1.1 11.7 0 32.3 26.3 58.5 58.6 58.5 19.4 0 37.5-9.6 48.4-25.6l8.6-44.9 -11.5-22 -52-23.7L-115.6 539.6z"/><path fill="#EF5098" d="M-115.9 450l35.5 8.4 7.8-40.3c-4.8-3.7-10.8-5.7-17-5.7 -15.4 0-28 12.5-28 28C-117.6 443.7-117 447-115.9 450"/><path fill="#17A8E0" d="M-119 458.5c-15.8 5.2-26.9 20.4-26.9 37.1 0 16.3 10.1 30.8 25.2 36.6l49.8-45 -9.1-19.5L-119 458.5z"/><path fill="#93C83E" d="M-0.7 584.2c4.9 3.7 10.8 5.8 16.9 5.8 15.4 0 28-12.5 28-28 0-3.4-0.6-6.7-1.7-9.7L7.1 544 -0.7 584.2z"/><path fill="#0779A1" d="M6.5 534.7l39 9.1c15.9-5.2 26.9-20.4 26.9-37.2 0-16.2-10.1-30.8-25.2-36.5l-51 44.7L6.5 534.7z"/><path d="M175.8 548.8l4.7-0.5 0.3 9.6c-12.4 1.7-23 2.6-31.8 2.6 -11.7 0-20-3.4-24.9-10.2s-7.3-17.4-7.3-31.7c0-28.6 11.4-42.9 34.1-42.9 11 0 19.2 3.1 24.6 9.2s8.1 15.8 8.1 28.9l-0.7 9.3h-53.8c0 9 1.6 15.7 4.9 20 3.3 4.3 8.9 6.5 17 6.5C159.2 549.8 167.4 549.5 175.8 548.8zM171.4 513.5c0-10-1.6-17.1-4.8-21.2 -3.2-4.1-8.4-6.2-15.6-6.2s-12.7 2.2-16.3 6.5c-3.6 4.3-5.5 11.3-5.6 20.9H171.4z"/><path d="M200.6 559V442h12.2v117H200.6z"/><path d="M289.9 502.1v40.1c0 4.1 10.1 4.9 10.1 4.9l-0.6 10.8c-8.6 0-15.7 0.7-20-3.4 -9.8 4.3-19.5 6.1-29.3 6.1 -7.5 0-13.2-2.1-17.1-6.4 -3.9-4.2-5.9-10.3-5.9-18.3 0-7.9 2-13.8 6-17.5 4-3.7 10.3-6.1 18.9-6.9l25.6-2.4v-7c0-5.5-1.2-9.5-3.6-11.9 -2.4-2.4-5.7-3.6-9.8-3.6h-32.1v-10.8h31.3c9.2 0 15.9 2.1 20.1 6.4C287.8 486.4 289.9 493.1 289.9 502.1zM239.7 535.3c0 10 4.1 15 12.4 15 7.4 0 14.7-1.2 21.8-3.7l3.7-1.3v-26.9l-24.1 2.3c-4.9 0.4-8.4 1.8-10.6 4.2C240.7 527.3 239.7 530.8 239.7 535.3z"/><path d="M337.6 486.7c-11.8 0-17.8 4.1-17.8 12.4 0 3.8 1.4 6.5 4.1 8.1s8.9 3.2 18.6 4.9c9.7 1.7 16.5 4 20.5 7.1 4 3 6 8.7 6 17.1 0 8.4-2.7 14.5-8.1 18.4 -5.4 3.9-13.2 5.9-23.6 5.9 -6.7 0-29.2-2.5-29.2-2.5l0.7-10.6c12.9 1.2 22.3 2.2 28.6 2.2 6.3 0 11.1-1 14.4-3s5-5.4 5-10.1 -1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8s-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3 0-7.9 2.8-13.8 8.4-17.6 5.6-3.8 12.6-5.7 20.9-5.7 6.6 0 29.6 1.7 29.6 1.7v10.7C354.4 487.6 344.5 486.7 337.6 486.7z"/><path d="M428 488.1h-25.9v39c0 9.3 0.7 15.5 2 18.4 1.4 2.9 4.6 4.4 9.7 4.4l14.5-1 0.8 10.1c-7.3 1.2-12.8 1.8-16.6 1.8 -8.5 0-14.3-2.1-17.6-6.2s-4.9-12-4.9-23.6v-42.9h-11.6v-10.6H390v-25h12.1v24.9H428V488.1z"/><path d="M445 459v-14.1h12.2v14.2L445 459 445 459zM445 559v-81.5h12.2V559H445z"/><path d="M510.2 475.8c3.6 0 9.7 0.7 18.3 2l3.9 0.5 -0.5 9.9c-8.7-1-15.1-1.5-19.2-1.5 -9.2 0-15.5 2.2-18.8 6.6s-5 12.6-5 24.5c0 11.9 1.5 20.2 4.6 24.9 3.1 4.7 9.5 7 19.3 7l19.2-1.5 0.5 10.1c-10.1 1.5-17.7 2.3-22.7 2.3 -12.7 0-21.5-3.3-26.3-9.8s-7.3-17.5-7.3-33 2.6-26.4 7.8-32.6C489.3 479 498 475.8 510.2 475.8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -20,6 +20,7 @@ body {
|
|||
background-color: $guideBaseBackgroundColor;
|
||||
line-height: 40px; /* 1 */
|
||||
margin: 0;
|
||||
min-width: $guideMinWidth;
|
||||
}
|
||||
|
||||
.guide {
|
||||
|
|
@ -35,7 +36,7 @@ body {
|
|||
&.is-code-viewer-open {
|
||||
padding-right: $guideCodeViewerWidth;
|
||||
|
||||
@include whenNarrowerThan($normalBreakpoint) {
|
||||
@include whenNarrowerThan($guideNormalBreakpoint) {
|
||||
padding-right: $guideCodeViewerSmallWidth;
|
||||
}
|
||||
}
|
||||
|
|
@ -52,37 +53,3 @@ body {
|
|||
.guideBreak {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.guidePaginationButtons {
|
||||
position: fixed;
|
||||
z-index: 10001;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.guidePaginationButton {
|
||||
appearance: none;
|
||||
border: none;
|
||||
line-height: 10px;
|
||||
padding: 4px 20px;
|
||||
color: $guideLinkHoverColor;
|
||||
background-color: #fff;
|
||||
border: 1px solid $guideLinkHoverColor;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #e6f7fc;
|
||||
}
|
||||
|
||||
&.guidePaginationButton-isDisabled {
|
||||
pointer-events: none;
|
||||
color: rgba($guideTextColor, 0.25);
|
||||
border-color: rgba($guideTextColor, 0.25);
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ $guidePanelBackgroundColor: #ffffff;
|
|||
$guideTextColor: #444;
|
||||
$guideLinkHoverColor: #00a9e5;
|
||||
|
||||
$normalBreakpoint: 1900px;
|
||||
// Breakpoints
|
||||
$guideMinWidth: 840px;
|
||||
$guideNormalBreakpoint: 1900px;
|
||||
|
||||
@mixin whenNarrowerThan($browserWidth) {
|
||||
@media only screen and (max-width: #{$browserWidth}) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@ import React, {
|
|||
PropTypes,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
Link,
|
||||
} from 'react-router';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import {
|
||||
|
|
@ -25,14 +21,8 @@ export class AppView extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const currentRoute = props.routes[1];
|
||||
const nextRoute = Routes.getNextRoute(currentRoute.name);
|
||||
const previousRoute = Routes.getPreviousRoute(currentRoute.name);
|
||||
|
||||
this.state = {
|
||||
isNavOpen: false,
|
||||
nextRoute,
|
||||
previousRoute,
|
||||
};
|
||||
|
||||
this.onClickNavItem = this.onClickNavItem.bind(this);
|
||||
|
|
@ -56,52 +46,6 @@ export class AppView extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const currentRoute = nextProps.routes[1];
|
||||
const nextRoute = Routes.getNextRoute(currentRoute.name);
|
||||
const previousRoute = Routes.getPreviousRoute(currentRoute.name);
|
||||
|
||||
this.setState({
|
||||
nextRoute,
|
||||
previousRoute,
|
||||
});
|
||||
}
|
||||
|
||||
renderPagination() {
|
||||
const previousClasses = classNames('guidePaginationButton', {
|
||||
'guidePaginationButton-isDisabled': !this.state.previousRoute,
|
||||
});
|
||||
|
||||
const previousButton = (
|
||||
<Link
|
||||
className={previousClasses}
|
||||
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
|
||||
>
|
||||
<span className="fa fa-angle-left"></span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const nextClasses = classNames('guidePaginationButton', {
|
||||
'guidePaginationButton-isDisabled': !this.state.nextRoute,
|
||||
});
|
||||
|
||||
const nextButton = (
|
||||
<Link
|
||||
className={nextClasses}
|
||||
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
|
||||
>
|
||||
<span className="fa fa-angle-right"></span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="guidePaginationButtons">
|
||||
{previousButton}
|
||||
{nextButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const contentClasses = classNames('guideContent', {
|
||||
'is-code-viewer-open': this.props.isCodeViewerOpen,
|
||||
|
|
@ -114,6 +58,9 @@ export class AppView extends Component {
|
|||
onToggleNav={this.onToggleNav}
|
||||
onClickNavItem={this.onClickNavItem}
|
||||
version={pkg.version}
|
||||
routes={this.props.routes}
|
||||
getNextRoute={Routes.getNextRoute}
|
||||
getPreviousRoute={Routes.getPreviousRoute}
|
||||
components={Routes.components}
|
||||
sandboxes={Routes.sandboxes}
|
||||
/>
|
||||
|
|
@ -128,8 +75,6 @@ export class AppView extends Component {
|
|||
title={this.props.title}
|
||||
source={this.props.source}
|
||||
/>
|
||||
|
||||
{this.renderPagination()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,9 @@ module.exports = {
|
|||
test: /\.html$/,
|
||||
loader: 'html',
|
||||
exclude: /node_modules/
|
||||
}, {
|
||||
test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/,
|
||||
loader: 'file',
|
||||
}, {
|
||||
test: require.resolve('jquery'),
|
||||
loader: 'expose?jQuery!expose?$'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue