@@ -1,6 +1,8 @@ | |||||
{ | { | ||||
"dependencies": { | "dependencies": { | ||||
"@fortawesome/fontawesome-free": "^5.12.0", | |||||
"bootstrap": "^4.4.1", | "bootstrap": "^4.4.1", | ||||
"font-awesome": "^4.7.0", | |||||
"jquery": "^3.4.1", | "jquery": "^3.4.1", | ||||
"linkstate": "^1.1.1", | "linkstate": "^1.1.1", | ||||
"popper.js": "^1.16.1", | "popper.js": "^1.16.1", | ||||
@@ -24,6 +24,23 @@ export default { | |||||
'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css', | 'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css', | ||||
'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js', | 'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js', | ||||
'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js', | 'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js', | ||||
'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js': 'dist/js/fontawesome.min.js', | |||||
'node_modules/@fortawesome/fontawesome-free/css/all.min.css': 'dist/css/all.min.css', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot': 'dist/webfonts/fa-regular-400.eot', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg': 'dist/webfonts/fa-regular-400.svg', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf': 'dist/webfonts/fa-regular-400.ttf', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff': 'dist/webfonts/fa-regular-400.woff', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2': 'dist/webfonts/fa-regular-400.woff2', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot': 'dist/webfonts/fa-solid-900.eot', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg': 'dist/webfonts/fa-solid-900.svg', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf': 'dist/webfonts/fa-solid-900.ttf', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff': 'dist/webfonts/fa-solid-900.woff', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2': 'dist/webfonts/fa-solid-900.woff2', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot': 'dist/webfonts/fa-brands-400.eot', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg': 'dist/webfonts/fa-brands-400.svg', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf': 'dist/webfonts/fa-brands-400.ttf', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff': 'dist/webfonts/fa-brands-400.woff', | |||||
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2', | |||||
verbose: true | verbose: true | ||||
}), | }), | ||||
buble({jsx: 'h'}), | buble({jsx: 'h'}), | ||||
@@ -2,8 +2,10 @@ | |||||
<head> | <head> | ||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||||
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" /> | <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" /> | ||||
<link rel="stylesheet" type="text/css" href="/css/all.min.css" /> | |||||
<script language="javascript" src="/js/jquery.min.js"></script> | <script language="javascript" src="/js/jquery.min.js"></script> | ||||
<script language="javascript" src="/js/bootstrap.min.js"></script> | <script language="javascript" src="/js/bootstrap.min.js"></script> | ||||
<script language="javascript" src="/js/fontawesome.min.js"></script> | |||||
</head> | </head> | ||||
<body> | <body> | ||||
<script language="javascript" src="/js/app.min.js"></script> | <script language="javascript" src="/js/app.min.js"></script> | ||||
@@ -3,12 +3,14 @@ import WBTabs from 'wb-tabs'; | |||||
import WBTable from 'wb-table'; | import WBTable from 'wb-table'; | ||||
import WBPagination from 'wb-pagination'; | import WBPagination from 'wb-pagination'; | ||||
import WBProjectListing from 'wb-project-listing'; | import WBProjectListing from 'wb-project-listing'; | ||||
import WBNavbar from 'wb-navbar'; | |||||
class WBApp extends Component { | class WBApp extends Component { | ||||
render({}, { activePage }) { | render({}, { activePage }) { | ||||
return ( | return ( | ||||
<div> | <div> | ||||
<h1>WBApp</h1> | |||||
<h1>WBApp <i class="fab fa-adobe"></i></h1> | |||||
<WBNavbar /> | |||||
<WBProjectListing arvHost="api.arkau.roche.com" | <WBProjectListing arvHost="api.arkau.roche.com" | ||||
arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" | arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" | ||||
itemsPerPage="5" /> | itemsPerPage="5" /> | ||||
@@ -0,0 +1,49 @@ | |||||
import { h, Component } from 'preact'; | |||||
class WBNavbar extends Component { | |||||
render() { | |||||
return ( | |||||
<nav class="navbar navbar-expand-lg navbar-light bg-light"> | |||||
<a class="navbar-brand" href="#">Workbench Advanced</a> | |||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |||||
<span class="navbar-toggler-icon"></span> | |||||
</button> | |||||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |||||
<ul class="navbar-nav mr-auto"> | |||||
<li class="nav-item active"> | |||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |||||
</li> | |||||
<li class="nav-item"> | |||||
<a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a> | |||||
</li> | |||||
<li class="nav-item"> | |||||
<a class="nav-link" href="#">Link</a> | |||||
</li> | |||||
<li class="nav-item dropdown"> | |||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |||||
Dropdown | |||||
</a> | |||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> | |||||
<a class="dropdown-item" href="#">Action</a> | |||||
<a class="dropdown-item" href="#">Another action</a> | |||||
<div class="dropdown-divider"></div> | |||||
<a class="dropdown-item" href="#">Something else here</a> | |||||
</div> | |||||
</li> | |||||
<li class="nav-item"> | |||||
<a class="nav-link disabled" href="#">Disabled</a> | |||||
</li> | |||||
</ul> | |||||
<form class="form-inline my-2 my-lg-0"> | |||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> | |||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | |||||
</form> | |||||
</div> | |||||
</nav> | |||||
); | |||||
} | |||||
} | |||||
export default WBNavbar; |