finished to theme search form

sites/all/modules/figli/edlp_search/src/Form/EdlpSearchForm.php

@@ -24,32 +24,41 @@ class EdlpSearchForm extends FormBase {
    * {@inheritdoc}
    */
   public function buildForm(array $form, FormStateInterface $form_state) {
-    $form['keys'] = [
-      '#type' => 'search',
-      // '#title' => $this->t('Keys'),
-      '#maxlength' => 64,
-      '#size' => 15,
-      '#weight' => '0',
+    $form['fieldset_search'] = [
+      '#type' => 'fieldgroup',
+      '#title' => $this->t('Search'),
+      'keys' => [
+        '#type' => 'search',
+        '#maxlength' => 20,
+        '#size' => 15,
+        '#weight' => '0',
+      ]
     ];
 
-    $form['language'] = [
-      '#type' => 'textfield',
+    $form['fieldset_langues'] = [
+      '#type' => 'fieldgroup',
       '#title' => $this->t('Language'),
-      '#autocomplete_route_name' => 'edlp_search.edlp_search_controller_autocomplete',
-      '#autocomplete_route_parameters' => array('field_name' => 'field_langues'),
-      '#maxlength' => 64,
-      '#size' => 15,
-      '#weight' => '0',
+      'language' => [
+        '#type' => 'textfield',
+        '#autocomplete_route_name' => 'edlp_search.edlp_search_controller_autocomplete',
+        '#autocomplete_route_parameters' => array('field_name' => 'field_langues'),
+        '#maxlength' => 20,
+        '#size' => 15,
+        '#weight' => '0',
+      ]
     ];
 
-    $form['genres'] = [
-      '#type' => 'textfield',
+    $form['fieldset_genre'] = [
+      '#type'=>'fieldgroup',
       '#title' => $this->t('Genres'),
-      '#autocomplete_route_name' => 'edlp_search.edlp_search_controller_autocomplete',
-      '#autocomplete_route_parameters' => array('field_name' => 'field_genres'),
-      '#maxlength' => 64,
-      '#size' => 15,
-      '#weight' => '0',
+      'genres' => [
+        '#type' => 'textfield',
+        '#autocomplete_route_name' => 'edlp_search.edlp_search_controller_autocomplete',
+        '#autocomplete_route_parameters' => array('field_name' => 'field_genres'),
+        '#maxlength' => 20,
+        '#size' => 15,
+        '#weight' => '0',
+      ]
     ];
 
     $this->getEntries();

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

@@ -1685,6 +1685,128 @@ body.ajax-loading main[role="main"]:before {
         padding-left: 1em;
         border-left: 1px solid #aaa; }
 
+.col[theme="edlp_search_search_form"], .col[theme="edlp_search_search_form"] > .wrapper {
+  position: relative;
+  height: 100%; }
+
+#edlp-search-form {
+  height: 100%; }
+  #edlp-search-form .fieldgroup {
+    border-bottom: 1px solid red;
+    margin-top: 1em;
+    margin-bottom: 0em; }
+    #edlp-search-form .fieldgroup legend {
+      font-size: 0.9em;
+      margin: 0;
+      font-weight: 500; }
+    #edlp-search-form .fieldgroup .fieldset-wrapper {
+      padding-bottom: 1em; }
+    #edlp-search-form .fieldgroup .form-item {
+      margin: 0; }
+  #edlp-search-form input[type="text"], #edlp-search-form input[type="search"] {
+    font-size: 0.8em;
+    padding: 0.2em;
+    margin: 0;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    width: 90%; }
+  #edlp-search-form #edit-entries .form-item label, #edlp-search-form #edit-entries .form-item input {
+    display: inline-block;
+    vertical-align: middle; }
+  #edlp-search-form #edit-entries .form-item label {
+    font-size: 0.756em; }
+  #edlp-search-form #edit-entries .form-item input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    border: 1px double black;
+    background-color: white; }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"]:checked {
+      background-color: black; }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='134'] {
+      border-color: var(--e-col-134); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='134']:checked {
+        background-color: var(--e-col-134); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='121'] {
+      border-color: var(--e-col-121); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='121']:checked {
+        background-color: var(--e-col-121); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='125'] {
+      border-color: var(--e-col-125); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='125']:checked {
+        background-color: var(--e-col-125); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='119'] {
+      border-color: var(--e-col-119); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='119']:checked {
+        background-color: var(--e-col-119); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='132'] {
+      border-color: var(--e-col-132); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='132']:checked {
+        background-color: var(--e-col-132); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='122'] {
+      border-color: var(--e-col-122); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='122']:checked {
+        background-color: var(--e-col-122); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='129'] {
+      border-color: var(--e-col-129); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='129']:checked {
+        background-color: var(--e-col-129); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='120'] {
+      border-color: var(--e-col-120); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='120']:checked {
+        background-color: var(--e-col-120); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='130'] {
+      border-color: var(--e-col-130); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='130']:checked {
+        background-color: var(--e-col-130); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='118'] {
+      border-color: var(--e-col-118); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='118']:checked {
+        background-color: var(--e-col-118); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='127'] {
+      border-color: var(--e-col-127); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='127']:checked {
+        background-color: var(--e-col-127); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='133'] {
+      border-color: var(--e-col-133); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='133']:checked {
+        background-color: var(--e-col-133); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='128'] {
+      border-color: var(--e-col-128); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='128']:checked {
+        background-color: var(--e-col-128); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='124'] {
+      border-color: var(--e-col-124); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='124']:checked {
+        background-color: var(--e-col-124); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='116'] {
+      border-color: var(--e-col-116); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='116']:checked {
+        background-color: var(--e-col-116); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='117'] {
+      border-color: var(--e-col-117); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='117']:checked {
+        background-color: var(--e-col-117); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='131'] {
+      border-color: var(--e-col-131); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='131']:checked {
+        background-color: var(--e-col-131); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='126'] {
+      border-color: var(--e-col-126); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='126']:checked {
+        background-color: var(--e-col-126); }
+    #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='123'] {
+      border-color: var(--e-col-123); }
+      #edlp-search-form #edit-entries .form-item input[type="checkbox"][value='123']:checked {
+        background-color: var(--e-col-123); }
+  #edlp-search-form input[type="submit"] {
+    font-size: 0.756em;
+    padding: 0.1em;
+    margin: 1em 0 0 0;
+    float: right; }
+
 .col[theme="edlp_search_results"] article .entrees span {
   display: inline-block;
   width: 8px;

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

@@ -592,9 +592,144 @@ main[role="main"]{
 // / __| ___ __ _ _ _ __| |_
 // \__ \/ -_) _` | '_/ _| ' \
 // |___/\___\__,_|_| \__|_||_|
-
+.col[theme="edlp_search_search_form"]{
+  &, >.wrapper{
+    position: relative;
+    height:100%;
+  }
+}
 #edlp-search-form{
+  height:100%;
+
+  .fieldgroup{
+    border-bottom: 1px solid red;
+    margin-top:1em;
+    margin-bottom: 0em;
+    legend{
+      font-size: 0.9em;
+      margin: 0;
+      font-weight: 500;
+    }
+    .fieldset-wrapper{
+      padding-bottom: 1em;
+    }
+    .form-item{
+      margin:0;
+    }
+  }
+
+  input[type="text"], input[type="search"]{
+    font-size: 0.8em;
+    padding:0.2em; margin:0;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    width:90%;
+  }
+
+  #edit-entries{
+    .form-item{
+      label, input{
+        display: inline-block;
+        vertical-align: middle;
+      }
+      label{
+        font-size: 0.756em;
+      }
+      input[type="checkbox"]{
+        appearance:none;
+        $w:10px;
+        width:$w; height:$w;
+        border: 1px double black;
+        background-color: white;
+        &:checked{
+          background-color: black;
+        }
+        &[value='134']{
+          border-color: var(--e-col-134);
+          &:checked{background-color: var(--e-col-134);}
+        }
+        &[value='121']{
+          border-color: var(--e-col-121);
+          &:checked{background-color: var(--e-col-121);}
+        }
+        &[value='125']{
+          border-color: var(--e-col-125);
+          &:checked{background-color: var(--e-col-125);}
+        }
+        &[value='119']{
+          border-color: var(--e-col-119);
+          &:checked{background-color: var(--e-col-119);}
+        }
+        &[value='132']{
+          border-color: var(--e-col-132);
+          &:checked{background-color: var(--e-col-132);}
+        }
+        &[value='122']{
+          border-color: var(--e-col-122);
+          &:checked{background-color: var(--e-col-122);}
+        }
+        &[value='129']{
+          border-color: var(--e-col-129);
+          &:checked{background-color: var(--e-col-129);}
+        }
+        &[value='120']{
+          border-color: var(--e-col-120);
+          &:checked{background-color: var(--e-col-120);}
+        }
+        &[value='130']{
+          border-color: var(--e-col-130);
+          &:checked{background-color: var(--e-col-130);}
+        }
+        &[value='118']{
+          border-color: var(--e-col-118);
+          &:checked{background-color: var(--e-col-118);}
+        }
+        &[value='127']{
+          border-color: var(--e-col-127);
+          &:checked{background-color: var(--e-col-127);}
+        }
+        &[value='133']{
+          border-color: var(--e-col-133);
+          &:checked{background-color: var(--e-col-133);}
+        }
+        &[value='128']{
+          border-color: var(--e-col-128);
+          &:checked{background-color: var(--e-col-128);}
+        }
+        &[value='124']{
+          border-color: var(--e-col-124);
+          &:checked{background-color: var(--e-col-124);}
+        }
+        &[value='116']{
+          border-color: var(--e-col-116);
+          &:checked{background-color: var(--e-col-116);}
+        }
+        &[value='117']{
+          border-color: var(--e-col-117);
+          &:checked{background-color: var(--e-col-117);}
+        }
+        &[value='131']{
+          border-color: var(--e-col-131);
+          &:checked{background-color: var(--e-col-131);}
+        }
+        &[value='126']{
+          border-color: var(--e-col-126);
+          &:checked{background-color: var(--e-col-126);}
+        }
+        &[value='123']{
+          border-color: var(--e-col-123);
+          &:checked{background-color: var(--e-col-123);}
+        }
+      }
+    }
+  }
 
+  input[type="submit"]{
+    font-size: 0.756em;
+    padding:0.1em;
+    margin:1em 0 0 0;
+    float:right;
+  }
 }
 
 .col[theme="edlp_search_results"]{
@@ -981,6 +1116,12 @@ footer{
           }
         }
 
+        // TODO: replace variable system by attribute color
+        // a.term-link:before, .entree-content span.oblique-wrapper a:before{
+        //   border-color: attr(color);
+        //   background-color: attr(color);
+        // }
+
         &[tid='134']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
             border-color: var(--e-col-134);background-color: var(--e-col-134);}}

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -17,6 +17,7 @@ global-js:
     assets/dist/scripts/main.min.js: { scope: footer }
   dependencies:
     - core/drupal
+    - core/drupal.autocomplete
     - core/matchmedia
     - core/matchmedia.addListener
     - core/jquery