mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-03 14:57:22 +03:00
Added improvements using new components
This commit is contained in:
Alejandro Celaya
parent
e62416e9bb
commit
41bc8f8459
6 changed files with 87 additions and 28 deletions
|
|
@ -23,6 +23,27 @@ const publicUrl = '';
|
|||
// Get environment variables to inject into our app.
|
||||
const env = getClientEnvironment(publicUrl);
|
||||
|
||||
const postCssLoader = {
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// This is the development configuration.
|
||||
// It is focused on developer experience and fast rebuilds.
|
||||
// The production configuration is different and lives in a separate file.
|
||||
|
|
@ -167,33 +188,14 @@ module.exports = {
|
|||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
postCssLoader,
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader', 'sass-loader']
|
||||
use: ['css-loader', 'sass-loader', postCssLoader]
|
||||
})
|
||||
},
|
||||
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||
|
|
@ -251,7 +253,7 @@ module.exports = {
|
|||
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||
// You can remove this if you don't use Moment.js:
|
||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||
new ExtractTextPlugin('main.[hash:8].css'),
|
||||
new ExtractTextPlugin('main.css'),
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
"@fortawesome/fontawesome-free-solid": "^5.0.13",
|
||||
"@fortawesome/react-fontawesome": "0.0.19",
|
||||
"autoprefixer": "7.1.6",
|
||||
"babel-core": "6.26.0",
|
||||
"babel-eslint": "7.2.3",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,65 @@
|
|||
import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import React from 'react';
|
||||
import {
|
||||
Collapse, DropdownItem, DropdownMenu,
|
||||
DropdownToggle,
|
||||
Nav,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarToggler,
|
||||
NavItem,
|
||||
NavLink,
|
||||
UncontrolledDropdown
|
||||
} from 'reactstrap';
|
||||
import './MainHeader.scss';
|
||||
import {Navbar, NavbarBrand} from 'reactstrap';
|
||||
import shlinkLogo from './shlink-logo-white.png';
|
||||
|
||||
export default class MainHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
isOpen: ! this.state.isOpen
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Navbar light fixed="top" className="main-header">
|
||||
<NavbarBrand href="https://shlink.io" className="mr-auto">
|
||||
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
|
||||
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
|
||||
<NavbarBrand href="https://shlink.io" target="_blank">
|
||||
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
|
||||
</NavbarBrand>
|
||||
<NavbarToggler onClick={() => this.toggle()} />
|
||||
<Collapse navbar isOpen={this.state.isOpen}>
|
||||
<Nav navbar>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<FontAwesomeIcon icon={plusIcon} /> Add server
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<UncontrolledDropdown nav>
|
||||
<DropdownToggle nav caret>
|
||||
Servers
|
||||
</DropdownToggle>
|
||||
|
||||
<DropdownMenu right>
|
||||
<DropdownItem>
|
||||
Server 1
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Server 2
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../utils/base";
|
||||
|
||||
.main-header {
|
||||
background-color: $mainColor;
|
||||
.main-header.main-header {
|
||||
background-color: $mainColor !important;
|
||||
color: white;
|
||||
|
||||
.navbar-brand {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './index.scss';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
|
|
|
|||
3
src/index.scss
Normal file
3
src/index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
* {
|
||||
outline: none !important;
|
||||
}
|
||||
Loading…
Reference in a new issue