Commit 92194480 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Several UI improvements

- Enable a user message area
- Element table size reduction
- Some graphical changes
parent 1fc09971
Pipeline #93887 skipped with stage
......@@ -235,6 +235,13 @@ header{ background-color: #23356d; }
flex-grow: 1;
}
.user-msg-box{
color: #E56400;
font-size: 1.2em;
font-weight: bold;
}
div#logo-header {
width: 1200px; margin: 0 auto;
/* padding-top: 10px;padding-bottom: 56px;*/
......@@ -248,7 +255,11 @@ div#logo-header img{ vertical-align: middle; }
div#second-header, #breadcrumb-placeholder{
width: 1200px; margin: 0 auto;}
div#second-header{ padding: 16px 0;}
div#second-header{
display: flex;
justify-content: space-between;
padding: 16px 0;
}
#breadcrumb-placeholder{
font-style: normal;
......@@ -350,7 +361,7 @@ div.title span.unfolded::before{
/*width: 62%; margin: 10px auto;*/
display: flex;
margin-top: 10px;
/* margin-top: 10px; */
justify-content: space-evenly;/*center;*/
align-items: flex-start;
......@@ -414,10 +425,12 @@ div.title span.unfolded::before{
.add-buttons{
display: inline-block;
background-color: #DDD;
width: 100%;
margin: 40px 0 0;
/*background-color: #DDD;
padding: 20px 0;
*/
margin: 20px 0 0;
}
......@@ -432,7 +445,7 @@ div.title span.unfolded::before{
.tab-buttons button{
display: inline-block;
background-color: #EEE;
background-color: #DDD;/*EEE;*/
width: 115px;
padding: 10px 30px;
margin: 0 10px;
......@@ -467,10 +480,10 @@ div.title span.unfolded::before{
width: 0;
height: 0;
margin: -10px 0px;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #DDD;
border-right: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid #DDD;
}
.add-panel button{
......@@ -747,7 +760,7 @@ background-color: #DDD;}
}
#elementable table#pt-main{
padding-top: 40px;
padding-top: 25px;
color: #333; border: 0;
}
......@@ -820,10 +833,10 @@ background-color: #DDD;}
#elementable td.el-selected{ background-color: black;
color: #FFF; }
div#specialRows{margin: 30px 40px;}
div#specialRows{margin: 20px 40px;}
.legend{ text-align: center; padding: 40px 0;}
.legend{ text-align: center; padding: 16px 0;}
.legend div{
display: inline-block; color: black;
padding: 2px 12px; margin: 4px 0;
......
......@@ -71,17 +71,19 @@
</header>
<div id="second-header">
<div style="float: left; width: 60%;">
<div>
<a href=""> <img src="img/NOMADEncyclopedia.png" /></a>
</div>
<div style="float: right; width: 30%;text-align: right">
<div class="user-msg-box"></div>
<div style="text-align: right">
<div id="info-sys-switch-box" >
Additional information &nbsp;
<!--<input id="info-sys-switch" type="checkbox" />-->
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="breadcrumb-placeholder" ></div>
......
......@@ -44,6 +44,7 @@ class MaterialList {
this.optimadeQuery = null;
this.noResultsBox = document.createElement('div');
this.noResultsBox.style = 'text-align: center; font-weight: bold'
this.noResultsBox.innerHTML = 'NO RESULTS FOUND';
this.element.append(this.noResultsBox);
......@@ -118,6 +119,9 @@ class MaterialList {
LoadingPopup.hide();
})
.catch(error => {
document.querySelector('.user-msg-box').innerHTML = 'Query expression NOT valid';
});
/*
......@@ -140,7 +144,11 @@ class MaterialList {
this.noResultsBox.style.display = this.noResults ? '' : 'none';
this.matListWrapper.style.display = this.noResults ? 'none' : '';
this.matListContainer.updateList(this.matMap);
}
document.querySelector('.user-msg-box').innerHTML = this.noResults ? 'No search results' : 'See result list below';
}else
document.querySelector('.user-msg-box').innerHTML = '';
}
......
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