From 383ca8b173813a5b8b4274c8b38b2055935b03bd Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 21 Nov 2017 10:38:27 +0100 Subject: [PATCH] improved display of advanced search --- .../materiobasemod/materio_search_api.module | 3 +- .../gui/materiobasetheme/css/styles.css | 36 ++++++++++++------- .../gui/materiobasetheme/scss/styles.scss | 35 ++++++++++++++---- 3 files changed, 55 insertions(+), 19 deletions(-) diff --git a/sites/all/modules/gui/materiobasemod/materio_search_api.module b/sites/all/modules/gui/materiobasemod/materio_search_api.module index 1ff72692..f0e118c3 100755 --- a/sites/all/modules/gui/materiobasemod/materio_search_api.module +++ b/sites/all/modules/gui/materiobasemod/materio_search_api.module @@ -1087,7 +1087,8 @@ function materio_search_api_advanced_search_form($form, &$form_state){ 'wrapper' => 'advancedsearch-filters-wrapper', // 'trigger_as' => array("name"=>"rmfilters".$l), ), - "#attributes" => array('class'=>array('rm-btn')), + // "#attributes" => array('class'=>array('rm-btn')), + '#prefix'=> '
', '#suffix'=> '
', ); } // end of lines loop diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css index a8e5a76e..7b41093a 100644 --- a/sites/all/themes/gui/materiobasetheme/css/styles.css +++ b/sites/all/themes/gui/materiobasetheme/css/styles.css @@ -3941,14 +3941,14 @@ body.home-v2 #main { #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col a.back-search-home i:before { font-size: 1.3em; } #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col #edit-search { - margin: 1em 0 0.5em; } + margin: 0.5em 0 0.5em; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters { padding-right: 0.5em; margin-right: 0.5em; border-right: 1px solid #ccc; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-table { display: table; - border-collapse: separate; + border-collapse: collapse; border-spacing: 0 0.2em; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-headers { display: table-header-group; @@ -3964,14 +3964,24 @@ body.home-v2 #main { #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line { margin: 0.3em 0; padding-top: 0.3em; - display: table-row; } + display: table-row; + vertical-align: middle; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:not(:first-child) { border-top: 1px solid #ccc; } + #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:not(:first-child) > * { + padding: 0.5em 0; } + #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:first-child > * { + padding: 0.3em 0 0.5em; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > * { display: table-cell; text-align: left; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > *:not(:last-child) { - padding: 0 1em 0 0; } + padding-right: 0.5em; } + #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > *:not(:first-child):not(:last-child):before { + content: ">"; + color: #999; + font-size: 11px; + padding-right: 0.5em; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .form-item { font-size: 12px; line-height: 1; @@ -3979,14 +3989,16 @@ body.home-v2 #main { margin: 0 0em 0 0; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line select { width: auto; } - #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup span { - padding: 0.4em 1em; - display: block; - font-size: 11px; - background-color: #eee; - color: #777; - text-align: center; - border-radius: 7px; } + #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup { + position: relative; } + #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup span { + padding: 0.4em 1em; + display: inline-block; + width: 78%; + font-size: 11px; + color: #ccc; + text-align: center; + border-radius: 7px; } #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .add-filter { margin: 0.5em 0; display: table-row; } diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss index 0431b4ba..b48db7eb 100644 --- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss +++ b/sites/all/themes/gui/materiobasetheme/scss/styles.scss @@ -1214,7 +1214,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom; } } #edit-search{ - margin: 1em 0 0.5em; + margin: 0.5em 0 0.5em; } } } @@ -1226,7 +1226,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom; .advanced-search-form-table{ display:table; - border-collapse:separate; + // border-collapse:separate; + border-collapse: collapse; border-spacing: 0 0.2em; // min-width: 500px; @@ -1253,16 +1254,30 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom; margin:0.3em 0; padding-top:0.3em; display: table-row; + vertical-align: middle; &:not(:first-child){ border-top: 1px solid #ccc; + >*{ + padding:0.5em 0; + } + } + &:first-child{ + >*{padding: 0.3em 0 0.5em;} } >*{ display:table-cell; text-align: left; + // padding:0; &:not(:last-child){ - padding:0 1em 0 0; + padding-right:0.5em; + } + &:not(:first-child):not(:last-child):before{ + content:">"; + color: #999; + font-size: 11px; + padding-right:0.5em; } } @@ -1282,16 +1297,24 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom; .filter-markup{ // border-left: 1px solid #ccc; + position: relative; span{ padding:0.4em 1em; - display: block; + display: inline-block; + width:78%; font-size: 11px; - background-color: #eee; - color:#777; + // background-color: #eee; + color:#ccc; text-align: center; border-radius: 7px; } } + .rm-btn{ + // vertical-align: text-bottom; + // line-height: 3; + // height: 100%; + // input{margin-top:2em;} + } } // .rm-btn{