added genres an langues condition to search, added close column bouton

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -634,9 +634,7 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // shuydown articles if active
-      if(_$articles_link.is('.is-active'))
-        _$articles_link.trigger('click');
+      shutDownArticles();
 
       _nodes_centered = [];
       for (var n = 0; n < _nodes.length; n++) {
@@ -661,6 +659,28 @@
       }
     };
 
+
+    //  ___                  _
+    // / __| ___ __ _ _ _ __| |_
+    // \__ \/ -_) _` | '_/ _| ' \
+    // |___/\___\__,_|_| \__|_||_|
+    function filterSearchResults(nids){
+      shutDownArticles();
+
+      _nodes_centered = [];
+      for (var n = 0; n < _nodes.length; n++) {
+        if(nids.indexOf(_nodes[n].nid) == -1){
+          _nodes[n].setAside();
+        }else{
+          _nodes[n].setCentered();
+          // record centered nodes for inter node repulsions
+          _nodes_centered.push(_nodes[n]);
+        }
+      }
+      createNodesRepulsions();
+    };
+
+
     //  ___                    _    _ _
     // / __| __ _ _ __ _ _ __ | |__| (_)_ _  __ _
     // \__ \/ _| '_/ _` | '  \| '_ \ | | ' \/ _` |
@@ -733,7 +753,11 @@
         _no_articles_nodes[i].unFade();
       }
     };
-
+    function shutDownArticles(){
+      // shutdown articles if active
+      if(_$articles_link.is('.is-active'))
+        _$articles_link.trigger('click');
+    };
     //  ___             _
     // | __|_ _____ _ _| |_ ___
     // | _|\ V / -_) ' \  _(_-<
@@ -808,6 +832,10 @@
         .on('search-results-loaded', function(e){
           console.log("Edlp Corpus, search-results-loaded",e.results);
           // TODO: filter map's nodes
+          filterSearchResults(e.results);
+        })
+        .on('search-closed', function(e){
+          scrambleCollection();
         });
     };
 

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -634,9 +634,7 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // shuydown articles if active
-      if(_$articles_link.is('.is-active'))
-        _$articles_link.trigger('click');
+      shutDownArticles();
 
       _nodes_centered = [];
       for (var n = 0; n < _nodes.length; n++) {
@@ -661,6 +659,28 @@
       }
     };
 
+
+    //  ___                  _
+    // / __| ___ __ _ _ _ __| |_
+    // \__ \/ -_) _` | '_/ _| ' \
+    // |___/\___\__,_|_| \__|_||_|
+    function filterSearchResults(nids){
+      shutDownArticles();
+
+      _nodes_centered = [];
+      for (var n = 0; n < _nodes.length; n++) {
+        if(nids.indexOf(_nodes[n].nid) == -1){
+          _nodes[n].setAside();
+        }else{
+          _nodes[n].setCentered();
+          // record centered nodes for inter node repulsions
+          _nodes_centered.push(_nodes[n]);
+        }
+      }
+      createNodesRepulsions();
+    };
+
+
     //  ___                    _    _ _
     // / __| __ _ _ __ _ _ __ | |__| (_)_ _  __ _
     // \__ \/ _| '_/ _` | '  \| '_ \ | | ' \/ _` |
@@ -733,7 +753,11 @@
         _no_articles_nodes[i].unFade();
       }
     };
-
+    function shutDownArticles(){
+      // shutdown articles if active
+      if(_$articles_link.is('.is-active'))
+        _$articles_link.trigger('click');
+    };
     //  ___             _
     // | __|_ _____ _ _| |_ ___
     // | _|\ V / -_) ' \  _(_-<
@@ -808,6 +832,10 @@
         .on('search-results-loaded', function(e){
           console.log("Edlp Corpus, search-results-loaded",e.results);
           // TODO: filter map's nodes
+          filterSearchResults(e.results);
+        })
+        .on('search-closed', function(e){
+          scrambleCollection();
         });
     };
 

sites/all/modules/figli/edlp_search/assets/js/edlp_search.js

@@ -13,7 +13,8 @@
 
   function initEvents(){
     $('body')
-      .on('new-content-ajax-loaded', initAjax);
+      .on('new-content-ajax-loaded', initAjax)
+      .on('edlp_search_search_form-col-closed', onSearchClosed);
   };
 
   function initAjax(){
@@ -41,7 +42,15 @@
       args.entries.push($(this).val());
     });
 
-    loadResults(args)
+    // langues
+    args.langues = $('input[name="langues"]', this).val();
+
+    // genres
+    args.genres = $('input[name="genres"]', this).val();
+
+    console.log('EdlpSearch onSubmitForm() : args',args);
+
+    loadResults(args);
 
     return false;
   };
@@ -49,6 +58,8 @@
   function loadResults(args){
     console.log('EdlpSearch loadResults() : args', args);
     _$form.addClass('ajax-loading');
+    _$body.addClass('ajax-loading');
+    $('[theme="edlp_search_results"]', _$container).addClass('ajax-loading');
     var path = window.location.origin + drupalSettings.path.baseUrl +settings.results_ajax_url;
     $.getJSON(path, args)
       .done(function(data){
@@ -61,6 +72,9 @@
 
   function onResultsLoaded(data){
     console.log('EdlpSearch onResultsLoaded()', data);
+    _$form.removeClass('ajax-loading');
+    _$body.removeClass('ajax-loading');
+
     // insert results col
     $prev_results = $('[theme="edlp_search_results"]', _$container);
     if($prev_results.length){
@@ -68,7 +82,7 @@
     }else{
       _$container.append(data.rendered);
     }
-    
+
     // trigger event
     _$body.trigger({
       'type':'search-results-loaded',
@@ -81,5 +95,12 @@
     console.warn('EdlpSearch : search results ajax load failed : '+error, jqxhr.responseText);
   };
 
+  function onSearchClosed(e){
+    console.log('Edlp Search onSearchClosed()', e);
+    $('div[theme="edlp_search_results"]').remove();
+    // trigger event
+    _$body.trigger({'type':'search-closed'});
+  }
+
   init();
 })(jQuery, Drupal, drupalSettings);

sites/all/modules/figli/edlp_search/src/Controller/EdlpSearchController.php

@@ -273,6 +273,16 @@ class EdlpSearchController extends ControllerBase {
       $query->keys($this->keys);
     }
 
+    // TODO: langues
+    if (!empty($this->langues)) {
+      $query->addCondition('field_langues', $this->langues, "=");
+    }
+
+    // TODO: genres
+    if (!empty($this->genres)) {
+      $query->addCondition('field_genres', $this->genres, "=");
+    }
+
     // entries
     if (!empty($this->entries)){
       $entries_condition_group = $query->createConditionGroup();
@@ -283,13 +293,8 @@ class EdlpSearchController extends ControllerBase {
       $query->addConditionGroup($entries_condition_group);
     }
 
-
-    // TODO: genres
-
     // TODO: locuteurs
 
-    // TODO: langues
-
     $result = $query->execute();
     $items = $result->getResultItems();
     // dpm($items);
@@ -318,6 +323,8 @@ class EdlpSearchController extends ControllerBase {
   private function getRequestSearchArgs(){
     // dpm($this->request);
     $this->keys = $this->request->query->get('keys');
+    $this->langues = $this->request->query->get('langues');
+    $this->genres = $this->request->query->get('genres');
     $this->entries = $this->request->query->get('entries');
   }
 

sites/all/themes/custom/edlptheme/assets/dist/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458333 2.6458334"><g fill="none"><g stroke="#000" stroke-width=".265"><path d="M.111.111l2.424 2.424M.111 2.535L2.535.11" stroke-width=".15170455000000002"/></g><path style="isolation:auto;mix-blend-mode:normal" d="M1.883 0H.763A.76.76 0 0 0 0 .762v1.121c0 .423.34.763.762.763h1.121a.76.76 0 0 0 .763-.763V.763A.76.76 0 0 0 1.883 0z" color="#000" overflow="visible"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -24,10 +24,14 @@
 
       initAjaxLinks();
 
-      if (_$body.is('.path-productions')) {
+      if (_$body.is('.path-productions')){
         initProductions();
       }
 
+      if(_$body.is('.path-frontpage')){
+        addCloseBtnToCols();
+      }
+
       // initScrollbars();
       initEvents();
     };
@@ -50,7 +54,7 @@
         })
         .on('close_entree', function(e){
           // e.tid available
-          closeAllModals();
+          backToFrontPage();
         });
     }
 
@@ -392,7 +396,7 @@
       //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
       // };
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+      var path = window.location.origin + Drupal.url(ajax_path);
       $.getJSON(path, {})
         .done(function(data){
           onAjaxLinkLoaded(data, $link, sys_path);
@@ -414,9 +418,13 @@
 
       // replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-
       _$row.html(data.rendered);
 
+      // add close btn
+      if(sys_path != 'procuction'){
+        addCloseBtnToCols();
+      }
+
       // add body class for currently loaded content
       var body_classes = [
         'path-'+sys_path.replace(/\//g, '-'),
@@ -452,11 +460,37 @@
 
       _$body.trigger({'type':'new-content-ajax-loaded'});
 
-      // TODO: call behaviours
+      // call behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
 
+    function addCloseBtnToCols(){
+      $('.col', _$row).each(function(index, el) {
+
+        if($('span.close-col-btn', this).length)
+          return true;
+
+        $(this).children('.wrapper').append($('<span>')
+          .addClass('close-col-btn')
+          .on('click', function(e){
+            // check for theme attribute and emmit event
+            var $col = $(this).parents('.col');
+            var theme = $col.attr('theme');
+            if(theme != ''){
+              _$body.trigger({'type':theme+'-col-closed'});
+            }
+            // remove the col
+            $col.remove();
+            // if row is empty call closeAllModals()
+            if(!$('.col', _$row).length){
+              backToFrontPage();
+            }
+          })
+        );
+      });
+    };
+
     //   ___
     //  / __|___ _ _ _ __ _  _ ___
     // | (__/ _ \ '_| '_ \ || (_-<

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1303,7 +1303,7 @@ main[role="main"] .layout-content {
   transition: opacity 0.5s ease-in-out;
   opacity: 1; }
 
-body.ajax-loading main[role="main"] .layout-content {
+body.ajax-loading main[role="main"] .layout-content .col:not([theme="edlp_search_search_form"]) {
   opacity: 0.2; }
 
 body.ajax-loading main[role="main"]:before {
@@ -1321,6 +1321,22 @@ body.ajax-loading main[role="main"]:before {
   background-repeat: no-repeat;
   background-position: center; }
 
+main[role="main"] span.close-col-btn {
+  pointer-events: all;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 !important;
+  margin: 0.5em;
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-image: url(../img/close.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain; }
+
 #audio-player {
   position: absolute;
   top: 0;
@@ -1805,58 +1821,69 @@ body.ajax-loading main[role="main"]:before {
     font-size: 0.756em;
     padding: 0.1em;
     margin: 1em 0 0 0;
-    float: right; }
+    float: right;
+    opacity: 1;
+    -webkit-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out; }
+  #edlp-search-form.ajax-loading input[type="submit"] {
+    opacity: 0.2;
+    pointer-events: none; }
 
-.col[theme="edlp_search_results"] article .entrees span {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: black;
-  margin-right: 3px; }
-  .col[theme="edlp_search_results"] article .entrees span[tid='134'] {
-    background-color: var(--e-col-134); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='121'] {
-    background-color: var(--e-col-121); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='125'] {
-    background-color: var(--e-col-125); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='119'] {
-    background-color: var(--e-col-119); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='132'] {
-    background-color: var(--e-col-132); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='122'] {
-    background-color: var(--e-col-122); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='129'] {
-    background-color: var(--e-col-129); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='120'] {
-    background-color: var(--e-col-120); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='130'] {
-    background-color: var(--e-col-130); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='118'] {
-    background-color: var(--e-col-118); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='127'] {
-    background-color: var(--e-col-127); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='133'] {
-    background-color: var(--e-col-133); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='128'] {
-    background-color: var(--e-col-128); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='124'] {
-    background-color: var(--e-col-124); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='116'] {
-    background-color: var(--e-col-116); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='117'] {
-    background-color: var(--e-col-117); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='131'] {
-    background-color: var(--e-col-131); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='126'] {
-    background-color: var(--e-col-126); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='123'] {
-    background-color: var(--e-col-123); }
-
-.col[theme="edlp_search_results"] article h2.node-title {
-  margin: 0 0 0.3em 0;
-  font-size: 1em;
-  font-weight: 500;
-  text-transform: none; }
+.col[theme="edlp_search_results"] {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out; }
+  .col[theme="edlp_search_results"].ajax-loading {
+    opacity: 0.2; }
+  .col[theme="edlp_search_results"] article .entrees span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: black;
+    margin-right: 3px; }
+    .col[theme="edlp_search_results"] article .entrees span[tid='134'] {
+      background-color: var(--e-col-134); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='121'] {
+      background-color: var(--e-col-121); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='125'] {
+      background-color: var(--e-col-125); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='119'] {
+      background-color: var(--e-col-119); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='132'] {
+      background-color: var(--e-col-132); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='122'] {
+      background-color: var(--e-col-122); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='129'] {
+      background-color: var(--e-col-129); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='120'] {
+      background-color: var(--e-col-120); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='130'] {
+      background-color: var(--e-col-130); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='118'] {
+      background-color: var(--e-col-118); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='127'] {
+      background-color: var(--e-col-127); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='133'] {
+      background-color: var(--e-col-133); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='128'] {
+      background-color: var(--e-col-128); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='124'] {
+      background-color: var(--e-col-124); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='116'] {
+      background-color: var(--e-col-116); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='117'] {
+      background-color: var(--e-col-117); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='131'] {
+      background-color: var(--e-col-131); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='126'] {
+      background-color: var(--e-col-126); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='123'] {
+      background-color: var(--e-col-123); }
+  .col[theme="edlp_search_results"] article h2.node-title {
+    margin: 0 0 0.3em 0;
+    font-size: 0.8em;
+    font-weight: 500;
+    text-transform: none; }
 
 body.path-agenda main .col > .wrapper {
   height: 100%; }

sites/all/themes/custom/edlptheme/assets/img/close.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="10"
+   viewBox="0 0 2.6458333 2.6458334"
+   version="1.1"
+   id="svg18014"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="close.svg">
+  <defs
+     id="defs18008" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="63.356767"
+     inkscape:cx="3.2141101"
+     inkscape:cy="5.3735394"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata18011">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-294.35415)">
+    <g
+       style="display:inline"
+       transform="matrix(0.57246602,0,0,0.57246602,-27.152497,260.5372)"
+       id="g5677-6">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 47.624999,59.266663 4.233334,4.233334"
+         id="path5673-2"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5675-7"
+         d="m 47.624999,63.499997 4.233334,-4.233334"
+         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 1.8834657,294.35415 H 0.7623677 C 0.340016,294.35415 0,294.69418 0,295.11654 v 1.1211 c 0,0.42234 0.340016,0.76235 0.7623677,0.76235 h 1.121098 c 0.4223516,0 0.7623677,-0.34001 0.7623677,-0.76235 v -1.1211 c 0,-0.42236 -0.3400161,-0.76239 -0.7623677,-0.76239 z"
+       id="rect18590"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -24,10 +24,14 @@
 
       initAjaxLinks();
 
-      if (_$body.is('.path-productions')) {
+      if (_$body.is('.path-productions')){
         initProductions();
       }
 
+      if(_$body.is('.path-frontpage')){
+        addCloseBtnToCols();
+      }
+
       // initScrollbars();
       initEvents();
     };
@@ -50,7 +54,7 @@
         })
         .on('close_entree', function(e){
           // e.tid available
-          closeAllModals();
+          backToFrontPage();
         });
     }
 
@@ -392,7 +396,7 @@
       //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
       // };
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+      var path = window.location.origin + Drupal.url(ajax_path);
       $.getJSON(path, {})
         .done(function(data){
           onAjaxLinkLoaded(data, $link, sys_path);
@@ -414,9 +418,13 @@
 
       // replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-
       _$row.html(data.rendered);
 
+      // add close btn
+      if(sys_path != 'procuction'){
+        addCloseBtnToCols();
+      }
+
       // add body class for currently loaded content
       var body_classes = [
         'path-'+sys_path.replace(/\//g, '-'),
@@ -452,11 +460,37 @@
 
       _$body.trigger({'type':'new-content-ajax-loaded'});
 
-      // TODO: call behaviours
+      // call behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
 
+    function addCloseBtnToCols(){
+      $('.col', _$row).each(function(index, el) {
+
+        if($('span.close-col-btn', this).length)
+          return true;
+
+        $(this).children('.wrapper').append($('<span>')
+          .addClass('close-col-btn')
+          .on('click', function(e){
+            // check for theme attribute and emmit event
+            var $col = $(this).parents('.col');
+            var theme = $col.attr('theme');
+            if(theme != ''){
+              _$body.trigger({'type':theme+'-col-closed'});
+            }
+            // remove the col
+            $col.remove();
+            // if row is empty call closeAllModals()
+            if(!$('.col', _$row).length){
+              backToFrontPage();
+            }
+          })
+        );
+      });
+    };
+
     //   ___
     //  / __|___ _ _ _ __ _  _ ___
     // | (__/ _ \ '_| '_ \ || (_-<

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -215,7 +215,7 @@ main[role="main"]{
     opacity: 1;
   }
   body.ajax-loading &{
-    .layout-content{
+    .layout-content .col:not([theme="edlp_search_search_form"]){
       opacity:0.2;
     }
     &:before{
@@ -235,6 +235,21 @@ main[role="main"]{
       // border-radius: $s/2;
     }
   }
+  span.close-col-btn{
+    // z-index: 10;
+    pointer-events: all;
+    cursor: pointer;
+    position:absolute;
+    top:0; right:0;
+    padding:0!important; margin:0.5em;
+    display: block;
+    $s:10px;
+    width:$s; height:$s;
+    background-image: url(../img/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
 }
 
 
@@ -729,10 +744,22 @@ main[role="main"]{
     padding:0.1em;
     margin:1em 0 0 0;
     float:right;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &.ajax-loading input[type="submit"]{
+    opacity:0.2;
+    pointer-events: none;
   }
 }
 
 .col[theme="edlp_search_results"]{
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  &.ajax-loading{
+    opacity:0.2;
+  }
   article{
     .entrees{
       span{
@@ -741,7 +768,7 @@ main[role="main"]{
     }
     h2.node-title{
       margin:0 0 0.3em 0;
-      font-size: 1em;
+      font-size: 0.8em;
       font-weight: 500;
       text-transform: none;
     }

sites/all/themes/custom/edlptheme/templates/content/edlp-search-results.html.twig

@@ -1,4 +1,4 @@
-<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
+<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-2 float-right">
   <div class="wrapper">
     {{ items }}
     {{ no_results_found }}

sites/all/themes/custom/edlptheme/templates/content/edlp-search-search-form.html.twig

@@ -1,4 +1,4 @@
-<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
+<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-2 float-right">
   <div class="wrapper">
     {{ form }}
   </div>