Unified the search options placement and handling.

client/css/styles.css

@@ -354,10 +354,13 @@ div.title span.unfolded::before{
 
 }
 
-.exclusive-search-line{
-  margin: 4px auto;
+.search-option {
+  padding: 10px 0px;
   font-size: 0.85em;
-  text-align: left;
+}
+.search-option>input {
+  margin-top:-0px;
+  vertical-align: middle;
 }
 .search-query-wrapper{
   width: 85%;

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

@@ -124,8 +124,6 @@ class MaterialList {
     this.searchJson.search_by.page = this.page;
     this.searchJson.search_by.after = this.afters.get(this.page);
     this.searchJson.search_by.per_page = 10;
-    let restricted = document.getElementById('restrict-checkbox').checked;
-    this.searchJson.search_by.restricted = restricted;
 
     let postQuery = JSON.stringify(this.searchJson);
   

client/src/search-mod/SearchMod.js

@@ -59,7 +59,7 @@ class SearchMod {
     `
     <div class="search-page">
 
-      <div class="searchline" style="visibility: hidden">
+      <div class="searchline" style="visibility: visible">
         <div class="search-query-wrapper" style="float: left;">
           <div class="search-query-box" style="float: left;">
           </div>
@@ -68,24 +68,27 @@ class SearchMod {
 
         <button style="float: right" class="search-btn" >Search</button>
         <div style="clear: both;"></div>
-        <div class="exclusive-search-line">
-           Exclusive search <input class="exclusive-search" type="checkbox" >
+        <div style="display: flex">
+          <div class="perm-tooltip search-option" style="margin-right: 10px">
+              <input id="exclusive-search" name="exclusive-search" type="checkbox" >
+              <label for="exclusive-search" class="perm-tooltip">Exclusive elements</label>
+              <span class="tooltiptext">If selected, the query will return materials with a composition that exclusively contains the selected atoms.</span>
+          </div>
+          <div class="perm-tooltip search-option">
+              <input id="restricted-search" name="restricted-search" type="checkbox" >
+              <label for="restricted-search" class="perm-tooltip">Restrict to individual calculations</label>
+              <span class="tooltiptext">If selected, the query will return materials that have individual calculations matching all your search criteria.</span>
+          </div>
         </div>
       </div>
 
 
       <div class="add-buttons" style="display: flex">
-        <div class="tab-buttons" style="width: 72%">
+        <div class="tab-buttons" style="width: 70%">
           <button class="element-add-btn" id="add-tab-selected">Element</button>
           <button class="formula-add-btn" style="padding: 10px 20px;" >Formula/Material</button>
           <button class="props-add-btn" >Properties</button>
         </div>
-        <div class="bool-buttons" style="width: 23%; display: flex; flex-direction: column">
-          <label class="perm-tooltip">Restrict search to individual calculations
-            <input type="checkbox" name="check" id="restrict-checkbox">
-            <span class="tooltiptext">Select to restrict the search to individual calculations. If not selected, the query will combine results from several different calculations related to the same material.</span>
-          </label>
-        </div>
         <!--<div class="bool-buttons" style="width: 28%; display: inline-block" >
           <button  disabled >AND</button>
           <button  disabled >OR</button>
@@ -222,8 +225,10 @@ class SearchMod {
         if (elements.length > 0)
           queryObj.search_by.element = elements.join(',');
 
-        let exclusiveEl = this.element.querySelector('.exclusive-search:checked');
+        let exclusiveEl = this.element.querySelector('#exclusive-search:checked');
+        let restrictedEl = this.element.querySelector('#restricted-search:checked');
         queryObj.search_by.exclusive =  (exclusiveEl === null ? '0' : '1');
+        queryObj.search_by.restricted =  (restrictedEl === null ? '0' : '1');
 
         this.materialList.setSearch(queryObj);
         util.setBrowserHashPath('search', 'results');