dataforge title and navbar changes
This commit is contained in:
parent
0dede17feb
commit
6149290e0e
@ -1,12 +1,20 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import favicon from "../../images/dataforge/df_logo.png"
|
||||
import Helmet from "react-helmet"
|
||||
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
import Header from "./header"
|
||||
import Footer from "./footer"
|
||||
import "../../styles/dataforge/docs.css"
|
||||
|
||||
const DocsLayout = ({children}) => (
|
||||
<>
|
||||
<Helmet>
|
||||
<link rel="icon" href={favicon}/>
|
||||
</Helmet>
|
||||
<SEO PageTitle="Documentation |"/>
|
||||
<Header id="df"/>
|
||||
<main id="docs">{children}</main>
|
||||
<Footer id="df"/>
|
||||
|
@ -1,41 +1,43 @@
|
||||
import React from "react"
|
||||
import {Link} from "gatsby"
|
||||
import { globalHistory as history } from '@reach/router'
|
||||
import { Link } from "@reach/router"
|
||||
|
||||
import logo from "../../images/dataforge/df_logo.png"
|
||||
import "../../styles/dataforge/header.css"
|
||||
import "../../styles/bootstrap.min.css"
|
||||
import {Navbar, Nav} from "react-bootstrap"
|
||||
|
||||
const Header = () => {
|
||||
let curActive = [' ', ' ', ' ', ' ', ' ', ' '];
|
||||
const { location } = history;
|
||||
if (location.pathname === '/dataforge/news'){curActive[0] = 'active';}
|
||||
if (location.pathname === '/dataforge/docs'){curActive[1] = 'active';}
|
||||
if (location.pathname === '/dataforge/modules'){curActive[2] = 'active';}
|
||||
if (location.pathname === '/dataforge/releases'){curActive[3] = 'active';}
|
||||
if (location.pathname === '/dataforge/apps'){curActive[4] = 'active';}
|
||||
if (location.pathname === '/dataforge/misc'){curActive[5] = 'active';}
|
||||
|
||||
return(
|
||||
const NavLink = props => (
|
||||
<Link
|
||||
{...props}
|
||||
getProps={({ isCurrent }) => {
|
||||
return {
|
||||
style: {
|
||||
color: isCurrent ? "white" : "rgb(230, 221, 221)"
|
||||
}
|
||||
};
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const Header = () => (
|
||||
<header id="df">
|
||||
<Navbar expand="lg" fixed="top">
|
||||
<div class="container">
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<Navbar.Brand><Link to="./dataforge"><img src={logo} height="50px" alt="dataforge logo" id="logo"/></Link></Navbar.Brand>
|
||||
<Nav.Link><Link id={`${curActive[0]}`} to="./dataforge/news">News</Link></Nav.Link>
|
||||
<Nav.Link><Link id={`${curActive[1]}`} to="./dataforge/docs">Documentation</Link></Nav.Link>
|
||||
<Nav.Link><Link id={`${curActive[2]}`} to="./dataforge/modules">Modules</Link></Nav.Link>
|
||||
<Nav.Link><Link id={`${curActive[3]}`} to="./dataforge/releases">Releases</Link></Nav.Link>
|
||||
<Nav.Link><Link id={`${curActive[4]}`} to="./dataforge/apps">Applications</Link></Nav.Link>
|
||||
<Nav.Link><Link id={`${curActive[5]}`} to="./dataforge/misc">See also</Link></Nav.Link>
|
||||
<Navbar.Brand><Link to="/dataforge"><img src={logo} height="60px" width="65px" alt="dataforge logo" id="dflogo"/></Link></Navbar.Brand>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/news">News</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/docs">Documentation</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/modules">Modules</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/releases">Releases</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/apps">Applications</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id="df" to="/dataforge/misc">See also</NavLink></Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</div>
|
||||
</Navbar>
|
||||
</header>
|
||||
)}
|
||||
)
|
||||
|
||||
export default Header
|
@ -1,12 +1,20 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import favicon from "../../images/dataforge/df_logo.png"
|
||||
import Helmet from "react-helmet"
|
||||
|
||||
import Header from "./header"
|
||||
import Footer from "./footer"
|
||||
import SEO from "./seo"
|
||||
import "../../styles/dataforge/layout.css"
|
||||
|
||||
const Layout = ({children}) => (
|
||||
<>
|
||||
<Helmet>
|
||||
<link rel="icon" href={favicon}/>
|
||||
</Helmet>
|
||||
<SEO title=" "/>
|
||||
<Header id="df"/>
|
||||
<div class = "container">
|
||||
<main id="df">{children}</main>
|
||||
|
28
src/components/dataforge/seo.js
Normal file
28
src/components/dataforge/seo.js
Normal file
@ -0,0 +1,28 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import Helmet from "react-helmet"
|
||||
|
||||
const SEO = ({ lang, PageTitle }) => {
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title="DataForge"
|
||||
pageTitle = {PageTitle}
|
||||
titleTemplate={`${PageTitle} %s`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
lang: `en`,
|
||||
}
|
||||
|
||||
SEO.propTypes = {
|
||||
lang: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default SEO
|
@ -1,8 +1,10 @@
|
||||
import React from "react"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
|
||||
const AppPage = () => (
|
||||
<Layout>
|
||||
<SEO PageTitle="Applications |"/>
|
||||
<h1>Troitsk nu-mass</h1>
|
||||
<img src="http://www.inr.ru/~trdat/img/spectrometer900.jpg" alt="spectrometer"/>
|
||||
<p>
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React from "react"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
import {graphql} from "gatsby"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
|
||||
const DataforgePage = ({ data }) => (
|
||||
<Layout id="df">
|
||||
<SEO PageTitle=" "/>
|
||||
{data.index.nodes.map(index=>{
|
||||
return(<p
|
||||
dangerouslySetInnerHTML = {{
|
||||
|
@ -1,10 +1,12 @@
|
||||
import React from "react"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
|
||||
import sms_logo from "../../images/dataforge/sms_logo.png"
|
||||
|
||||
const MiscPage = () => (
|
||||
<Layout>
|
||||
<SEO PageTitle="See also |"/>
|
||||
<h1 id="about">About us...</h1>
|
||||
|
||||
<img width="150" src={sms_logo} style={{marginRight: `25px`}} alt="sms"/>
|
||||
|
@ -1,8 +1,10 @@
|
||||
import React from "react"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
|
||||
const ModulesPage = () => (
|
||||
<Layout id="df">
|
||||
<SEO PageTitle="Modules |" />
|
||||
<h1 id="core">dataforge-core</h1>
|
||||
<ul>
|
||||
<li>Meta-data processing tools.</li>
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React from "react"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
import {graphql} from "gatsby"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
|
||||
const NewsPage = ({ data }) => (
|
||||
<Layout>
|
||||
<SEO PageTitle="News |"/>
|
||||
{data.posts.nodes.map(post => {
|
||||
const title = post.frontmatter.title;
|
||||
const date = post.frontmatter.date;
|
||||
|
@ -1,8 +1,10 @@
|
||||
import React from "react"
|
||||
import SEO from "../../components/dataforge/seo"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
|
||||
const ReleasesPage = () => (
|
||||
<Layout>
|
||||
<SEO PageTitle="Releases |"/>
|
||||
<h2>Versioning</h2>
|
||||
<p>DataForge uses <a href="https://docs.oracle.com/middleware/1212/core/MAVEN/maven_version.htm">Maven version</a> policy.</p>
|
||||
<h2>Source code and documentation consistency</h2>
|
||||
|
@ -10,14 +10,12 @@ header#df .navbar {
|
||||
background-color: rgb(114, 111, 111);
|
||||
border: none; }
|
||||
|
||||
header#df img#logo { opacity: 0.8; margin-top: 5px; }
|
||||
header#df img#logo:hover { opacity: 1; }
|
||||
a[aria-current="page"] img#logo { opacity: 1; }
|
||||
a[aria-current="page"] img#dflogo { opacity: 1; background-color: rgb(114,111,111);}
|
||||
|
||||
header#df a.nav-link:hover { color: black; background-color: rgb(182, 188, 192); }
|
||||
header#df a.nav-link:hover { color: white; background-color: rgb(182, 188, 192); padding-top: 15px }
|
||||
header#df a.nav-link { margin-top: 7px; }
|
||||
header#df a.nav-link a { padding: 15px; }
|
||||
header#df a.nav-link a#active {
|
||||
header#df a.nav-link a#df { padding: 15px; }
|
||||
a[aria-current="page"]#df {
|
||||
background-color: rgb(182, 188, 192);
|
||||
padding-top: 11px;
|
||||
padding-bottom: 18px; }
|
||||
@ -38,7 +36,7 @@ header#df div.mr-auto.navbar-nav {
|
||||
/* ------ media ------------------------------------ */
|
||||
@media (max-width: 769px){
|
||||
header#df a.nav-link { margin-left: 40px; margin-right: 40px; padding: 15px; }
|
||||
header#df img#logo { margin-left: 20px; margin-right: 0px;}
|
||||
header#df img#dflogo { margin-left: 0px; margin-right: 0px; padding-left: 10px}
|
||||
header#df div#basic-navbar-nav.navbar-collapse.collapse.show {
|
||||
background-color: rgb(114,111,111);
|
||||
padding-bottom: 450px; }
|
||||
|
Loading…
Reference in New Issue
Block a user