added more style eresearch/rdm#1291

src/components/Router.js

+const Container = require('./views/Container');
 const Header = require('./views/header');
+const Menu = require('./views/menu');
 const Main = require('./views/main');
 const Footer = require('./views/footer');
 const Search = require('./views/search');
@@ -19,7 +21,7 @@ const Router = async function (state) {
       if (status === 200) {
         state.main.doc = data;
         //Just to avoid extra ajax calls but we can have multiple relationships here
-        if(state.main.doc.record_type_s || state.main.doc.record_type_s === 'Person') {
+        if (state.main.doc.record_type_s || state.main.doc.record_type_s === 'Person') {
           //Removing orcid.org to have better matches
           state.main.doc.id = state.main.doc.id.replace("https://orcid.org/", "");
           //state.main.doc.id = encodeURIComponent(state.main.doc.id);
@@ -34,9 +36,9 @@ const Router = async function (state) {
             state.main.related = res.data.docs || [];
           }
         }
-        app.innerHTML = [Header(state), Search(state), ViewDoc(state), Footer(state)].join('');
+        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewDoc(state)]), Footer(state)].join('');
       } else {
-        app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
+        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
       }
     }
     if (verb === '#search/') {
@@ -55,13 +57,13 @@ const Router = async function (state) {
         state.main.docs = data.docs;
         state.main.numFound = data.numFound;
         state.main.searchText = searchText;
-        app.innerHTML = [Header(state), Search(state), Main(state), Footer(state)].join('');
+        app.innerHTML = [Header(state), Menu(state), Container([Search(state), Main(state)]), Footer(state)].join('');
         const input = document.getElementById('text-to-search');
         if (input) {
           input.value = searchText;
         }
       } else {
-        app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
+        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
       }
     }
   } else {
@@ -70,9 +72,9 @@ const Router = async function (state) {
       state.main.docs = data.docs;
       state.main.numFound = data.numFound;
       state.main.searchText = '';
-      app.innerHTML = [Header(state), Search(state), Main(state), Footer(state)].join('');
+      app.innerHTML = [Header(state), Menu(state), Container([Search(state), Main(state)]), Footer(state)].join('');
     } else {
-      app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
+      app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
     }
   }
 };

src/components/SolrService.js

@@ -16,7 +16,6 @@ const SolrService = {
   get: async function (config, data) {
     try {
       let param = `get?id=`;
-      //Twice encoded, once for html one for solr
       data = encodeURIComponent(`${data}`);
       const req = await axios.get(`${config.api}/${param}${data}`);
       if (req.data) {
@@ -31,9 +30,6 @@ const SolrService = {
   search: async function (config, {start: start, page: page, searchParam: searchParam, text: text}) {
     try {
       let param = `select?q=`;
-      //Twice encoded, once for html one for solr
-      //let data = encodeURIComponent(`${text}`);
-      //data = encodeURIComponent(`${text}`);
       if (text === '' || !text) {
         text = '*';
       }

src/components/views/Container.js

+const Container = function (data) {
+  const html = `<div class="content-inside">`;
+  const endhtml = `</div>`;
+  return [html, ...data, endhtml].join('');
+};
+
+module.exports = Container;
\ No newline at end of file

src/components/views/Footer.js

 const Footer = function (data) {
-  return ''/*
+  return `
   <footer class="footer">
     <div class="container">
       <div class="row">
         <div class="col-md-10">
           <div class="copyright">
-            <p class="font-weight-light small">&copy; copyright</p>
+            <p class="font-weight-light small">&copy; ${data.footer.text}</p>
           </div>
         </div>
       </div>
     </div>
   </footer>
-  `*/
+  `
 };
 
 module.exports = Footer;
\ No newline at end of file

src/components/views/Main.js

@@ -3,13 +3,21 @@ const ListDocs = require('./ListDocs');
 const Pagination = require('./Pagination');
 
 const Main = function (data) {
-  let html = '';
+  let html = `<div class="maincontent-body">
+<div><br/></div>
+
+`;
   html = [ListDocs(data), Pagination(data)].join('');
 
-  html += `<div class="container">
-  <div class="text-center">
-  <p>Results: ${data.main.numFound}</p>
-  </div>`;
+  html += `
+   <div class="container">
+    <div class="text-center">
+    <p>Results: ${data.main.numFound}</p>
+    </div>
+  </div>
+  <div><br/></div>
+  </div>
+`;
 
   return html;
 };

src/components/views/Menu.js

+const Menu = function (data) {
+  return `
+<nav class="navbar navbar-expand-lg navbar-dark bg-black">
+  <a class="navbar-brand" style="visibility: hidden" href="">Data Portal</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNav">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
+      </li>      
+    </ul>
+  </div>
+</nav>
+  `
+};
+
+module.exports = Menu;
\ No newline at end of file

src/components/views/Search.js

 const Search = function (data) {
   return `
-    <div class="">
+    <div class="container">
+    <div class="row"><br/></div>
       <div class="row no-gutters align-items-center">
         <div class="col-md-2"></div>
         <div class="col-md-8">

src/index.js

-import * as $ from 'jquery';
-//import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap';
 import './styles/styles.scss';
 import './images/logo.svg';
@@ -45,6 +43,9 @@ let state = {
       {display: "SubDoc", field: "contactPoint", fieldName: 'Contact Point', template: '${item.name} ${item.email}'},
     ]
   },
+  footer:{
+    text: '2019 University of Technology Sydney'
+  },
   config: config
 };
 

src/styles/styles.scss

@@ -6,7 +6,7 @@ $over-color: black;
 $navbar-light-color: rgba($over-color, .5) !default;
 $navbar-light-hover-color: rgba($over-color, .7) !default;
 $navbar-light-active-color: rgba($over-color, .9) !default;
-$background-color: #ebebeb;
+$background-color: #000000;
 $search-header-background-image: none;
 /*url("../assets/images/search-header-bg.jpg");
 /*url("../assets/images/devon-divine-1348025-unsplash.jpg");*/

src/styles/theme.scss

+.bg-black{
+  background-color: $background-color;
+}
+
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
 }

webpack.config.js

+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
@@ -13,9 +14,15 @@ module.exports = {
   // optimization: {
   //   minimizer: [new UglifyJsPlugin()]
   // },
-  plugins: [new HtmlWebpackPlugin({
-    title:'Data Portal',
-    template: 'src/index.html'})],//Keep this file as is. We should manage html in JS
+  plugins: [new webpack.ProvidePlugin({ // inject ES5 modules as global vars
+    $: 'jquery',
+    jQuery: 'jquery',
+    'window.jQuery': 'jquery',
+    Tether: 'tether'
+  }), new HtmlWebpackPlugin({
+    title: 'Data Portal',
+    template: 'src/index.html'
+  })],//Keep this file as is. We should manage html in JS
   devServer: {
     contentBase: path.join(__dirname, 'dist'),
     port: 9000,