From 3b811e12638e30ed874ae2bd27e32293a729c93a Mon Sep 17 00:00:00 2001
From: Moises Sacal <moisbo@gmail.com>
Date: Fri, 4 Oct 2019 10:56:53 +1000
Subject: [PATCH] added more style eresearch/rdm#1291
---
src/components/Router.js | 16 +++++++++-------
src/components/SolrService.js | 4 ----
src/components/views/Container.js | 7 +++++++
src/components/views/Footer.js | 6 +++---
src/components/views/Main.js | 18 +++++++++++++-----
src/components/views/Menu.js | 19 +++++++++++++++++++
src/components/views/Search.js | 3 ++-
src/index.js | 5 +++--
src/styles/styles.scss | 2 +-
src/styles/theme.scss | 4 ++++
webpack.config.js | 13 ++++++++++---
11 files changed, 71 insertions(+), 26 deletions(-)
create mode 100644 src/components/views/Container.js
create mode 100644 src/components/views/Menu.js
diff --git a/src/components/Router.js b/src/components/Router.js
index fb337f9..5d14a77 100644
--- a/src/components/Router.js
+++ b/src/components/Router.js
@@ -1,4 +1,6 @@
+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('');
}
}
};
diff --git a/src/components/SolrService.js b/src/components/SolrService.js
index 42d5017..1567a10 100644
--- a/src/components/SolrService.js
+++ b/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 = '*';
}
diff --git a/src/components/views/Container.js b/src/components/views/Container.js
new file mode 100644
index 0000000..5d165a5
--- /dev/null
+++ b/src/components/views/Container.js
@@ -0,0 +1,7 @@
+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
diff --git a/src/components/views/Footer.js b/src/components/views/Footer.js
index 2def709..8906e59 100644
--- a/src/components/views/Footer.js
+++ b/src/components/views/Footer.js
@@ -1,17 +1,17 @@
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">© copyright</p>
+ <p class="font-weight-light small">© ${data.footer.text}</p>
</div>
</div>
</div>
</div>
</footer>
- `*/
+ `
};
module.exports = Footer;
\ No newline at end of file
diff --git a/src/components/views/Main.js b/src/components/views/Main.js
index c1ff76e..d312824 100644
--- a/src/components/views/Main.js
+++ b/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;
};
diff --git a/src/components/views/Menu.js b/src/components/views/Menu.js
new file mode 100644
index 0000000..29f4230
--- /dev/null
+++ b/src/components/views/Menu.js
@@ -0,0 +1,19 @@
+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
diff --git a/src/components/views/Search.js b/src/components/views/Search.js
index e495f32..f2d1ff0 100644
--- a/src/components/views/Search.js
+++ b/src/components/views/Search.js
@@ -1,6 +1,7 @@
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">
diff --git a/src/index.js b/src/index.js
index b950518..5ad51be 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,3 @@
-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
};
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 42081db..6948c55 100644
--- a/src/styles/styles.scss
+++ b/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");*/
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 6942f36..1cccca2 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -1,3 +1,7 @@
+.bg-black{
+ background-color: $background-color;
+}
+
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
diff --git a/webpack.config.js b/webpack.config.js
index 6ec2d1a..a62febd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+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,
--
GitLab