Several UI improvements

- Enable a user message area
- Element table size reduction
- Some graphical changes

client/css/styles.css

@@ -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;

client/index.html

@@ -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>

client/src/search-mod/MaterialList.view.js

@@ -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 = '';
+
+    
   }