lark
/
server_table
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

menu aesthetics

master
Malar Kannan 2018-07-02 00:43:06 +05:30
parent 97e628c4e1
commit 6bdb8b6174
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.css
View File

@ -23,8 +23,16 @@
} }
.navbar-item:hover { .navbar-item:hover {
background-color: #f0f0f0; background-color: rgba(10, 10, 10, .1);
color: #3273dc; color: white;
}
/* body {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
} */
a,a:hover {
color: white;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {

5
src/App.tsx
View File

@ -1,12 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import 'bulma/css/bulma.css';
import './App.css'; import './App.css';
import AppRoute from './RouteMenu'; import RouteMenu from './RouteMenu';
class App extends React.Component { class App extends React.Component {
public render() { public render() {
return ( return (
<div className="App"> <div className="App">
<AppRoute /> <RouteMenu />
</div> </div>
); );
} }

4
src/ChartLoader.tsx
View File

@ -6,7 +6,9 @@ export default class ChartLoader extends React.Component<any, any> {
public render() { public render() {
const colorMaps = this.props.colorMaps; const colorMaps = this.props.colorMaps;
return ( return (
<Columns isCentered={true} isMultiline={true}> <Columns isCentered={true} isMultiline={true} style={{
backgroundColor:'#f0f0f0'
}}>
{this.props.chartList.map((o: any, i: number) => { {this.props.chartList.map((o: any, i: number) => {
const colorMap = colorMaps[o.chartColumn]; const colorMap = colorMaps[o.chartColumn];
return ( return (

7
src/RouteMenu.tsx
View File

@ -6,7 +6,6 @@ import {
} from 'react-router-dom'; } from 'react-router-dom';
import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer'; import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
import * as local from 'localforage'; import * as local from 'localforage';
import 'bulma/css/bulma.css';
import ServerTabLoader from './ServerTabLoader'; import ServerTabLoader from './ServerTabLoader';
import ChartLoader from './ChartLoader'; import ChartLoader from './ChartLoader';
@ -16,7 +15,7 @@ const navButton = (name: string, link: string) => (
const RedirectCharts = () => (<Redirect to='/charts' />); const RedirectCharts = () => (<Redirect to='/charts' />);
class AppRoute extends React.Component { class RouteMenu extends React.Component {
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.state = { this.state = {
@ -45,7 +44,7 @@ class AppRoute extends React.Component {
<Router> <Router>
<div> <div>
<Container isFluid={true} isMarginless={true} isFullWidth={true}> <Container isFluid={true} isMarginless={true} isFullWidth={true}>
<Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}> <Navbar style={{ backgroundColor:'#00D1B2' }}>
<NavbarMenu isActive={true}> <NavbarMenu isActive={true}>
<NavbarItem >{navButton('Charts', '/charts')}</NavbarItem> <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
<NavbarItem>{navButton('Tables', '/tables')}</NavbarItem> <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
@ -62,4 +61,4 @@ class AppRoute extends React.Component {
); );
} }
} }
export default AppRoute export default RouteMenu