finished to theme search form

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-19 18:21:41 +01:00
parent 8f7ab6bb66
commit 4d2a3f85ce
4 changed files with 294 additions and 21 deletions
@@ -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();
@@ -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;
@@ -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);}}
@@ -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