Commit 78beb631 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Implement the last details of the design (finished) and two issues (82, 84)

parent 4b4ca1de
Pipeline #15591 passed with stages
in 6 seconds
This diff is collapsed.
......@@ -56,6 +56,7 @@
let UserGuidance = __webpack_require__(29);
let contentElement= document.getElementById("content");
let titleElement= document.querySelector('title');
class Breadcrumb {
......@@ -158,6 +159,7 @@
PubSub.subscribe('show-material', data => {
console.log('Handling event show-material: '+data.id+' view: '+data.view);
//titleElement.innerHTML = 'NOMAD Encyclopedia - Material '+data.id;
breadcrumb.setState('material',data.view);
if (typeof materialModDOM === 'undefined'){
......@@ -175,19 +177,13 @@
PubSub.subscribe('show-search', search => {
console.log('Handling event show-search: '+search);
//materialModDOM.style.display = 'none';
titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
breadcrumb.setState('search',search);
if (search === undefined){
searchMod.showSearchPage();
LoadingPopup.hide(); // In case it comes from the result page
/*}else if (search === 'new'){ To REMOVE
//searchMod = new SearchModule();
//searchMod.reset();
document.location= "#/search";
*/
}else if (search === 'results')
searchMod.showResultsPage();
......@@ -503,7 +499,8 @@
function getMaterialTitleHTML(data){
let title = getSubscriptedFormula(data.formula_reduced);
if (data.space_group !== null) title += ' - space group '+data.space_group;
return '<span style="font-size: 0.9em">'+title+' </span>';
//return '<span style="font-size: 0.9em">'+title+' </span>';
return title;
}
function getMinMaxHTML(calcs,prop){
......@@ -1062,6 +1059,8 @@
DataStore.setMaterialData(materialData);
//console.log("CELLS: "+JSON.stringify(materialData.cell));
document.querySelector('title').innerHTML =
'NOMAD Encyclopedia - Material '+util.getMaterialTitle(materialData);
this.overview.setMaterialData();
this.structureDetails.setMaterialData();
this.electronicStructDetails.setMaterialData();
......@@ -5218,7 +5217,7 @@
<table id="methodology-data">
<thead>
<tr>
<th style="width: 14%;"></th>
<th style="width: 14%;"><span>Calculation ID</span></th>
<th style="width: 16%;">
<span>Type</span>
</th>
......@@ -5375,6 +5374,7 @@
updateMarkedLeaf(leafId){
/* Do nothing for now...
this.markedCalc = leafId;
let rowElement= this.element.querySelector('.data-row-marked');
if (rowElement !== null) rowElement.className= 'data-row';
......@@ -5383,6 +5383,7 @@
let rowElement1= document.querySelector('tr[data-calc-id="'+this.markedCalc+'"]');
if (rowElement1 !== null) rowElement1.className= 'data-row-marked';
}
*/
}
......@@ -5538,7 +5539,8 @@
let html = '';
itemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+itemName+' &nbsp;&nbsp; ';
html += '<input type="checkbox" value="'+itemId+'" checked>'+
'<span style="vertical-align: 20%">'+itemName+'</span> &nbsp;&nbsp; ';
});
this.unfoldedPanel.innerHTML += html;
......
.info-sys-label{background-color: #EEE;
border: 1px solid #D9D9D9;
border-radius: 4px; padding: 0 4px;}
#info-sys-switch-box{font-size: 12px; padding: 4px 10px;
#info-sys-switch-box{font-size: 10pt; padding: 4px 10px;
}
.user-guidance{
......@@ -88,7 +86,8 @@ button:focus{ outline: none;}
a.uplink{ display:block;}
body { font-family: 'Ubuntu', sans-serif;
body { font-family: 'Arimo', sans-serif;
font-size: 11pt;
margin: 0; padding: 0; color: #777;
background-color: #EEE;
......@@ -159,7 +158,8 @@ img.close-btn{ cursor: pointer;
.title {
color: #E56400; padding: 10px 0;
font-size: 14pt; text-align: center;
font-size: 14pt;
text-align: center;
border-bottom: 2px solid #E56400; }
div.title span.folded::before{
......@@ -173,10 +173,11 @@ div.title span.unfolded::before{
}
.summary-title{
color: #ff8100; padding: 10px 0;
font-size: 13pt; text-align: center;
border-bottom: 1px solid #ff8100;
border-top: 1px solid #ff8100;
color: #FFB743; padding: 10px 0;
font-size: 13pt; font-weight: bold;
text-align: center;
border-bottom: 2px solid #FFB743;
border-top: 2px solid #FFB743; /*#ff8100;*/
}
......@@ -570,8 +571,9 @@ span.nextButton{ display: inline-block; cursor: pointer;}
#navigation-tree{
padding: 20px 0;
font-size: 1.1em;
/*height: 250px;*/
font-size: 12pt;
/*
height: 250px;*/
overflow: auto;
}
......@@ -602,7 +604,7 @@ navTreeWrapper
.node-checkbox::before{
content:url(../img/calc-non-selected.png);
padding: 0 6px;
padding: 0 4px;
cursor: pointer;
}
......@@ -614,12 +616,12 @@ navTreeWrapper
.node-selected .node-checkbox::before, .node-selected-marked .node-checkbox::before{
content:url(../img/calc-selected.png);
padding: 0 6px;
padding: 0 4px;
}
.node-label{
cursor: pointer;
vertical-align: 10%;
}
.node-counter{
......@@ -691,7 +693,7 @@ navTreeWrapper
/******* Material data pages ******/
.material-title{
color: #E56400; font-size: 18pt; font-style: bold;
color: #E56400; font-size: 15pt; font-weight: bold;
text-align: center;
}
......@@ -823,9 +825,10 @@ div.charts-selector{
table#methodology-data{width: 100%;
table#methodology-data{
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#methodology-data th {
......@@ -842,13 +845,17 @@ table#methodology-data{width: 100%;
tr.data-row, tr.data-row-marked {
cursor: pointer;
}
/*
tr.data-row{
background-color: white;
}*/
tr.data-row{
background-color: white;
}
tr.moreinfo {
background-color: #EEE;
tr.data-row:nth-child(even) {background: #E4E4E4}
tr.data-row:nth-child(odd) {background: #8D8D8D; color: white}
tr.moreinfo {
background-color: white;
}
#methodology-data tr.data-row-marked {
......
......@@ -5,7 +5,10 @@
<head>
<meta charset="utf-8">
<title>NOMAD</title>
<title>NOMAD Encyclopedia</title>
<link href="https://fonts.googleapis.com/css?family=Arimo"
rel="stylesheet"> <!-- Arimo:400,400i,700 -->
<link rel="stylesheet" href="css/styles.css"/>
......@@ -76,7 +79,7 @@
<div style="float: right; width: 30%;text-align: right">
<div id="info-sys-switch-box" >
Additional information &nbsp;&nbsp;
Additional information &nbsp;
<!--<input id="info-sys-switch" type="checkbox" />-->
</div>
</div>
......
......@@ -63,7 +63,8 @@ class FilterComponent {
let html = '';
itemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+itemName+' &nbsp;&nbsp; ';
html += '<input type="checkbox" value="'+itemId+'" checked>'+
'<span style="vertical-align: 20%">'+itemName+'</span> &nbsp;&nbsp; ';
});
this.unfoldedPanel.innerHTML += html;
......
......@@ -285,7 +285,8 @@ function toAngstromMinus3(density){
function getMaterialTitleHTML(data){
let title = getSubscriptedFormula(data.formula_reduced);
if (data.space_group !== null) title += ' - space group '+data.space_group;
return '<span style="font-size: 0.9em">'+title+' </span>';
//return '<span style="font-size: 0.9em">'+title+' </span>';
return title;
}
function getMinMaxHTML(calcs,prop){
......
......@@ -10,6 +10,7 @@ let SearchModule = require('./search-mod/SearchMod.js');
let UserGuidance = require('./common/UserGuidance.js');
let contentElement= document.getElementById("content");
let titleElement= document.querySelector('title');
class Breadcrumb {
......@@ -112,6 +113,7 @@ function showModuleDOM(module){
PubSub.subscribe('show-material', data => {
console.log('Handling event show-material: '+data.id+' view: '+data.view);
//titleElement.innerHTML = 'NOMAD Encyclopedia - Material '+data.id;
breadcrumb.setState('material',data.view);
if (typeof materialModDOM === 'undefined'){
......@@ -129,19 +131,13 @@ PubSub.subscribe('show-material', data => {
PubSub.subscribe('show-search', search => {
console.log('Handling event show-search: '+search);
//materialModDOM.style.display = 'none';
titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
breadcrumb.setState('search',search);
if (search === undefined){
searchMod.showSearchPage();
LoadingPopup.hide(); // In case it comes from the result page
/*}else if (search === 'new'){ To REMOVE
//searchMod = new SearchModule();
//searchMod.reset();
document.location= "#/search";
*/
}else if (search === 'results')
searchMod.showResultsPage();
......
......@@ -156,6 +156,8 @@ class MaterialMod{
DataStore.setMaterialData(materialData);
//console.log("CELLS: "+JSON.stringify(materialData.cell));
document.querySelector('title').innerHTML =
'NOMAD Encyclopedia - Material '+util.getMaterialTitle(materialData);
this.overview.setMaterialData();
this.structureDetails.setMaterialData();
this.electronicStructDetails.setMaterialData();
......
......@@ -59,7 +59,7 @@ class MethodologyDetails extends DetailsViewBase {
<table id="methodology-data">
<thead>
<tr>
<th style="width: 14%;"></th>
<th style="width: 14%;"><span>Calculation ID</span></th>
<th style="width: 16%;">
<span>Type</span>
</th>
......@@ -216,6 +216,7 @@ class MethodologyDetails extends DetailsViewBase {
updateMarkedLeaf(leafId){
/* Do nothing for now...
this.markedCalc = leafId;
let rowElement= this.element.querySelector('.data-row-marked');
if (rowElement !== null) rowElement.className= 'data-row';
......@@ -224,6 +225,7 @@ class MethodologyDetails extends DetailsViewBase {
let rowElement1= document.querySelector('tr[data-calc-id="'+this.markedCalc+'"]');
if (rowElement1 !== null) rowElement1.className= 'data-row-marked';
}
*/
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment