Commit d033b5e2 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Unified the search options placement and handling.

parent f19b84de
Pipeline #85581 skipped with stage
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -354,10 +354,13 @@ div.title span.unfolded::before{
margin: 4px auto;
.search-option {
padding: 10px 0px;
font-size: 0.85em;
text-align: left;
.search-option>input {
vertical-align: middle;
width: 85%;
......@@ -124,8 +124,6 @@ class MaterialList { =;
this.searchJson.search_by.after = this.afters.get(;
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);
......@@ -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;">
......@@ -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 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 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 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>
<!--<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');
util.setBrowserHashPath('search', 'results');
Supports Markdown
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