issue #2060 mobile version of search filters added

In mobile mode, filters now occupy 100% of the page width. A small arrow is added when the filter is open.

themes/default/css/clear-search.css

@@ -270,3 +270,20 @@
 .filter-added_by-form .selectize-control.multi .selectize-input > div .remove {
   color:#000;
 }
+
+@media (max-width: 600px) {
+  .filter-form {
+    width: 101vw;
+    border-top: 1px solid #AAAAAA;
+    border-bottom: 1px solid #AAAAAA;
+  }
+
+  .arrow-border {
+    fill: transparent;
+    stroke: #AAAAAA;
+  }
+  
+  .arrow-fill {
+    fill: white;
+  }
+}

themes/default/css/dark-search.css

@@ -272,4 +272,21 @@
 .breadcrumb-item .link-path,
 .pwg-icon-cancel:before{
   color:black;
+}
+
+@media (max-width: 600px) {
+  .filter-form {
+    width: 100vw;
+    border-top: 1px solid #444 !important;
+    border-bottom: 1px solid #444 !important;
+  }
+
+  .arrow-border {
+    fill: transparent;
+    stroke: #444 !important;
+  }
+  
+  .arrow-fill {
+    fill: #333 !important;
+  }
 }

themes/default/css/search.css

@@ -607,6 +607,9 @@
 .filter-form .filter-form-title {
   font-weight: bold;
   margin-bottom: 10px;
+  display: flex;
+  gap: 1px;
+  align-items: center;
 }
 
 .filter-tag-form .selectize-control,
@@ -720,3 +723,106 @@
   padding:10px;
   margin-bottom:10px;
 }
+
+
+@media (max-width: 600px) {
+  html, body {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .filter-form {
+    width: 100vw;
+    padding: 15px;
+    border-radius: 0;
+    box-shadow: none !important;
+    top: 37px
+  }
+  .form_mobile_arrow {
+    position: absolute;
+    bottom: 100%;
+  }
+
+  .arrow-border {
+    stroke-width: 1.5px;
+  }
+
+  .filter-actions {
+    top: 15px;
+    right: 15px;
+  }
+
+  .search-params-title,
+  .search-params {
+    display: block !important;
+  }
+
+  .word-search-options {
+    display: grid;
+  }
+
+  .filter-added_by-form .added_by-option-container {
+    width: 100%;
+  }
+
+  .filter-tag-form .form-container,
+  .filter-author-form .form-container,
+  .filter-added_by-form .form-container {
+    display: block;
+  }
+
+  .form-container .filter-validate {
+    width: fit-content;
+    margin-left: auto;
+    margin-top: 10px;
+  }
+
+  .filter-tag-form .selectize-input,
+  .filter-author-form .selectize-input,
+  .filter-added_by-form .selectize-input {
+    width: auto;
+  }
+
+  .filter-manager-popin-container,
+  .tags-found-popin-container,
+  .albums-found-popin-container {
+    width: auto;
+    max-width: 400px;
+  }
+
+  .linkedAlbumPopInContainer{
+    width: auto;
+  }
+
+  .search-result-item {
+    height: auto;
+  }
+
+  .search-result-path,
+  .link-path {
+    white-space: unset !important;
+  }
+
+  .delete,
+  .clear {
+    font-size: 0;
+  }
+
+  .delete::before,
+  .clear::before {
+    font-size: 15px;
+  }
+
+  /* disable zoom on focus in IOS Device */
+  input, select, textarea {
+    font-size: 16px !important;
+  }
+
+  #word-search {
+    max-width: 100%;
+  }
+
+  *, ::after, ::before {
+    box-sizing: border-box;
+  }
+}

themes/default/js/mcs.js

@@ -850,21 +850,27 @@ function reloadPage(url){
  * Replace the filter_form elements if they exceed the window
  */
 function resize_filter_form(){
+  $('.form_mobile_arrow').remove();
   $('.filter').each(function() {
     const window_width = $(window).innerWidth();
     const left_distance = $(this).offset().left;
     const filter_form = $(this).find($('.filter-form'));
     const filter_form_width = filter_form.innerWidth();
     const too_left = (left_distance + $(this).innerWidth()) - filter_form_width;
+    const is_desktop = window.matchMedia("(min-width: 600px)").matches;
     filter_form.css('left', '0px');
+    const margin_left = is_desktop ? 15 : 0;
 
     if(left_distance + filter_form_width > window_width) {
-      console.log($(this)[0].outerText + ': dépasse de ' + (window_width - left_distance) + filter_form_width + 'px');
-      
-      const check_left = too_left < 0 ? Math.abs(too_left - 5) : 0;
-      const replace_form_width = - filter_form_width + $(this).innerWidth() + check_left;
+      const check_left = too_left < 0 ? Math.abs(too_left - margin_left) : 0;
+      const mobile_marg = is_desktop ? 0 : 2;
+      const replace_form_width = - filter_form_width + $(this).innerWidth() + check_left - mobile_marg;
       filter_form.css('left', replace_form_width+'px');
     }
+    if(!is_desktop){
+      const left_arrow = $(this).offset().left + ($(this).innerWidth() / 2);
+      filter_form.prepend('<svg width="10" height="10" viewBox="0 0 14 14" class="form_mobile_arrow" style="left:'+left_arrow+'px"><polygon class="arrow-border" points="7,0 14,14 0,14"/><polygon class="arrow-fill" points="7,1 13.5,14 0.5,14"/></svg>');
+    }
   });
 }
 $(window).on('load', function() {

themes/default/template/include/search_filters.inc.tpl

@@ -91,7 +91,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-word-form">
-      <div class="filter-form-title">{'Search for words'|@translate}</div>
+      <div class="filter-form-title pwg-icon-search">{'Search for words'|@translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left">{'Clear'|@translate}</span>
@@ -147,7 +147,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-tag-form">
-      <div class="filter-form-title">{'Tag'|@translate}</div>
+      <div class="filter-form-title pwg-icon-tag">{'Tag'|@translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left">{'Clear'|@translate}</span>
@@ -184,7 +184,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-date_posted-form">
-      <div class="filter-form-title">{'Post date'|@translate}</div>
+      <div class="filter-form-title pwg-icon-calendar-plus">{'Post date'|@translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash" title="{'Delete'|@translate}"></span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left" title="{'Clear'|@translate}"></span>
@@ -216,7 +216,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-album-form">
-    <div class="filter-form-title">{'Album'|@translate}</div>
+    <div class="filter-form-title pwg-icon-album"> {'Album'|@translate}</div>
     <div class="filter-actions"> 
       <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
       <span class="clear mcs-icon pwg-icon-arrow-rotate-left">{'Clear'|@translate}</span>
@@ -253,7 +253,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
     
     <div class="filter-form filter-author-form">
-      <div class="filter-form-title">{'Author'|@translate}</div>
+      <div class="filter-form-title pwg-icon-user-edit"> {'Author'|@translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left">{'Clear'|@translate}</span>
@@ -281,7 +281,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-added_by-form">
-      <div class="filter-form-title">{'Added by'|translate}</div>
+      <div class="filter-form-title pwg-icon-user">{'Added by'|translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash tiptip" title="{'Delete'|@translate}"></span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left tiptip" title="{'Clear'|@translate}"></span>
@@ -316,7 +316,7 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-filetypes-form">
-      <div class="filter-form-title">{'File type'|@translate}</div>
+      <div class="filter-form-title pwg-icon-file-image">{'File type'|@translate}</div>
       <div class="filter-actions"> 
         <span class="delete mcs-icon pwg-icon-trash tiptip" title="{'Delete'|@translate}"></span>
         <span class="clear mcs-icon pwg-icon-arrow-rotate-left tiptip" title="{'Clear'|@translate}"></span>