diff --git a/themes/fid_adlr/images/background-shape-left.svg b/themes/fid_adlr/images/background-shape-left.svg
new file mode 100755
index 0000000000000000000000000000000000000000..2ce7d4cbcacb9d31fdf354cc81e42ac1ab61694a
--- /dev/null
+++ b/themes/fid_adlr/images/background-shape-left.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="214px" height="424px" viewBox="0 0 214 424" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+ <title>Combined Shape Copy 2</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Webdesign-Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="home" transform="translate(0.000000, -718.000000)" fill="#EDF3FF" fill-rule="nonzero">
+ <g id="global-background" transform="translate(-72.000000, 718.000000)">
+ <path d="M387.995307,349.44229 L346.916022,349.44229 C346.919879,348.961983 346.921811,348.481217 346.921811,348 C346.921811,250.841067 268.158933,172.078189 171,172.078189 C73.8410668,172.078189 -4.9218107,250.841067 -4.9218107,348 C-4.9218107,348.481217 -4.91987856,348.961983 -4.91602162,349.44229 L-45.9953074,349.44229 C-45.9984342,348.961895 -46,348.481131 -46,348 C-46,228.154209 51.1542093,131 171,131 C290.845791,131 388,228.154209 388,348 C388,348.481131 387.998434,348.961895 387.995307,349.44229 Z" id="Combined-Shape-Copy-2" transform="translate(171.000000, 240.221145) rotate(108.000000) translate(-171.000000, -240.221145) "></path>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/themes/fid_adlr/images/background-shape-right.svg b/themes/fid_adlr/images/background-shape-right.svg
new file mode 100755
index 0000000000000000000000000000000000000000..84e193832135eccbbb47ca7bb42fa774ff9b0216
--- /dev/null
+++ b/themes/fid_adlr/images/background-shape-right.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="236px" height="433px" viewBox="0 0 236 433" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+ <title>Combined Shape Copy 3</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Webdesign-Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="home" transform="translate(-1684.000000, -2577.000000)" fill="#EDF3FF" fill-rule="nonzero">
+ <g id="global-background" transform="translate(-72.000000, 718.000000)">
+ <path d="M2083.68138,2200.11332 L2042.6021,2200.11332 C2042.60595,2199.63301 2042.60789,2199.15224 2042.60789,2198.67103 C2042.60789,2101.51209 1963.84501,2022.74922 1866.68608,2022.74922 C1769.52714,2022.74922 1690.76426,2101.51209 1690.76426,2198.67103 C1690.76426,2199.15224 1690.7662,2199.63301 1690.77005,2200.11332 L1649.69077,2200.11332 C1649.68764,2199.63292 1649.68608,2199.15216 1649.68608,2198.67103 C1649.68608,2078.82524 1746.84028,1981.67103 1866.68608,1981.67103 C1986.53187,1981.67103 2083.68608,2078.82524 2083.68608,2198.67103 C2083.68608,2199.15216 2083.68451,2199.63292 2083.68138,2200.11332 Z" id="Combined-Shape-Copy-3" transform="translate(1866.686076, 2090.892173) rotate(261.000000) translate(-1866.686076, -2090.892173) "></path>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/themes/fid_adlr/images/header-bg-lg-mirror-stretched.png b/themes/fid_adlr/images/header-bg-lg-mirror-stretched.png
new file mode 100755
index 0000000000000000000000000000000000000000..904d80cd50d41ed614a46896d333c1e754cd1c49
Binary files /dev/null and b/themes/fid_adlr/images/header-bg-lg-mirror-stretched.png differ
diff --git a/themes/fid_adlr/images/header-bg-lg-mirror.png b/themes/fid_adlr/images/header-bg-lg-mirror.png
new file mode 100755
index 0000000000000000000000000000000000000000..30cbeb214fda90bfb3023131cb0a0b5bb8b8645d
Binary files /dev/null and b/themes/fid_adlr/images/header-bg-lg-mirror.png differ
diff --git a/themes/fid_adlr/images/header-bg-md.png b/themes/fid_adlr/images/header-bg-md.png
new file mode 100755
index 0000000000000000000000000000000000000000..88ca4651a681ab8d55bb00b293c602c8f6e7e790
Binary files /dev/null and b/themes/fid_adlr/images/header-bg-md.png differ
diff --git a/themes/fid_adlr/images/header-bg-sm.png b/themes/fid_adlr/images/header-bg-sm.png
old mode 100644
new mode 100755
index ade9e6305085ae065b29425961326f5cb2d4b8c8..487df2ffda3a6a25c4ddebed3091bc6d66f77555
Binary files a/themes/fid_adlr/images/header-bg-sm.png and b/themes/fid_adlr/images/header-bg-sm.png differ
diff --git a/themes/fid_adlr/images/header-srch-affix-bg-md.png b/themes/fid_adlr/images/header-srch-affix-bg-md.png
new file mode 100755
index 0000000000000000000000000000000000000000..b93794e1900a9bf9e150997568ae31631497b0af
Binary files /dev/null and b/themes/fid_adlr/images/header-srch-affix-bg-md.png differ
diff --git a/themes/fid_adlr/images/header-srch-affix-bg-xs.png b/themes/fid_adlr/images/header-srch-affix-bg-xs.png
old mode 100644
new mode 100755
index a3030783922ef290e15830c117a7817ceebdfa9b..adbce4c4d317ebd9d9828930d1d352cf39daea1c
Binary files a/themes/fid_adlr/images/header-srch-affix-bg-xs.png and b/themes/fid_adlr/images/header-srch-affix-bg-xs.png differ
diff --git a/themes/fid_adlr/scss/_customMixins.scss b/themes/fid_adlr/scss/_customMixins.scss
index c4765d0c0f3dc75b8313a03a96f93342c43dd943..c39adba146f7992b34e5de6ca651f2c883180bbc 100644
--- a/themes/fid_adlr/scss/_customMixins.scss
+++ b/themes/fid_adlr/scss/_customMixins.scss
@@ -39,6 +39,14 @@
opacity: 1;
}
+@mixin default-background-lg {
+ background-image: url('../images/header-bg-lg-mirror-stretched.png');
+ background-image: url('../images/header-bg-lg-mirror-stretched.png'), linear-gradient($midnight, $midnight); /* W3C */
+ background-position: 100% 74%;
+ background-repeat: no-repeat;
+ opacity: 1;
+}
+
// Default border radius
@mixin default-border-radius {
border-radius: 2px;
@@ -71,7 +79,7 @@
color: $white;
display: inline-block;
margin-right: 2rem;
- padding-top: 0px;
+ padding-top: 0;
&:active,
&:hover,
&:focus {
@@ -111,32 +119,41 @@
padding-top: $content-top-padding;
overflow-x: hidden;
position: fixed;
- top: calc(#{$navbar-header-height-xs-sm});
+ top: $navbar-header-height;
visibility: visible;
width: 9999px;
z-index: z-index(navigation-overlay, 0);
@media screen and (min-width: $screen-sm-min) {
padding-top: 0;
- top: calc(#{$navbar-header-height-xs-sm} - #{$content-top-padding});
+ top: calc(#{$navbar-header-height} - #{$content-top-padding});
+ transition: all .2s ease-out;
}
+
a {
color: $azure;
font-family: $font-family-monospace;
- font-size: em($font-size-menu-xs);
+ font-size: $font-size-menu-xs;
font-weight: bold;
- line-height: em(43px);
+ line-height: $font-size-menu-xs;
margin-left: $navbar-margin-left;
position: relative;
text-decoration: none;
- @media screen and (min-width: $screen-sm-min) {
+ transition: all .2s ease-out;
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ font-size: $font-size-menu-sm;
+ left: calc(#{$logo-max-width} / 2);
+ letter-spacing: 2.87px;
+ line-height: em($font-size-menu-sm);
+ top: 100px;
+ }
+ @media screen and (min-width: $mobile-navigation-menu-breakpoint) {
color: $black;
font-size: $font-size-menu-lg;
+ left: $logo-max-width;
letter-spacing: 2.87px;
line-height: em(53px);
top: 100px;
- }
- @media screen and (min-width: $screen-md-min) {
- left: $logo-max-width;
+ transition: all .2s ease-out;
}
}
li {
@@ -147,11 +164,19 @@
@mixin shift-main-menu-entries-to-navigation-overlay {
background: transparent;
+ border: 0;
color: $black;
+ display: block;
left: $navbar-margin-left;
position: fixed;
text-transform: uppercase;
z-index: z-index(navigation-overlay, 1);
+ font-family: $font-family-monospace;
+ font-size: 18px;
+ font-weight: bold;
+ letter-spacing: 2px;
+ margin: 0;
+ padding: 0;
li {
background: transparent;
display: inline-block;
@@ -170,47 +195,72 @@
@mixin fixed-navbar-search {
position: fixed;
+ top: 0;
z-index: z-index(search affix, 0);
@media screen and (max-width: $screen-xs-max) {
+ padding-left: $content-l-r-padding;
+ padding-right: $content-l-r-padding;
+ }
+
+ @media screen and (max-width: $screen-md-max) {
background-color: transparent;
- // FIXME solve differently, apply bg image when in top position or similar - CK
- background-image: url('../images/header-srch-affix-bg-xs.png');
- background-position: bottom center;
+ background-image: url('../images/header-srch-affix-bg-md.png');
+ background-position: 0% -100%;
background-repeat: no-repeat;
+ border-radius: 0;
margin-top: 0;
- padding-bottom: $search-toggle-padding-bottom-top;
- padding-left: $content-l-r-padding;
+ padding-bottom: 0;
padding-top: $search-toggle-padding-bottom-top;
+ top: $navbar-header-height; // TODO: sync with tablet header
width: 100%;
- // Make DD-Button 100% wide
+
+ // Make DD-Button and inputs full wide
.sbox-dd .dropdown-toggle:not(.button-quickfilter-format) {
@include default-btn-font($font-family-monospace);
background: $azure;
+ border-radius: 0;
height: $search-input-height-fixed;
outline: none;
- width: $search-panel-width-xs;
+ width: $search-panel-width-xs-md;
}
+
.sbox-dd-menu {
- width: $search-panel-width-xs;
+ width: $search-panel-width-xs-md;
}
+ }
+
+ @media screen and (max-width: $screen-xs-max) {
// $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
- @include searchbox-toggler-and-content-styles(inherit, block, false, true,'screen-xs-max');
+ @include searchbox-toggler-and-content-styles(inherit, block, false, true, 'mobile');
}
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+ @include searchbox-toggler-and-content-styles(inherit, none, true, true, 'mobile');
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+ @include searchbox-toggler-and-content-styles(none, block, false, false, 'desktop');
background: transparent;
border: 0;
height: em($navbar-header-height-affix-sm);
left: calc(#{$logo-max-width});
padding: 0;
- top: 0px;
.adv-srch-btn {
font-size: medium;
- left: 196px;
+ left: 170px;
position: absolute;
- top: 80px;
+ top: 75px;
+ }
+
+ &.affix {
+ .adv-srch-btn {
+ display: none; // FIXME: why should link disappear at all?
+ top: 67px;
+ }
}
.btn.btn-lg {
@@ -220,7 +270,7 @@
width: $search-button-clip-width-sm;
&:before {
font-family: 'icomoon', sans-serif;
- font-size: $font-size-menu-sm;
+ font-size: $font-size-menu-default;
font-weight: bold;
line-height: 1;
text-transform: none;
@@ -235,70 +285,67 @@
.nav.nav-tabs {
margin-right: 15px;
}
-
- .searchbox {
- height: 130px;
- max-width: $search-form-width-affix-lg;
- padding-left: 35px;
- padding-right: 35px;
- padding-top: 18px;
- }
-
- .searchForm {
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: -webkit-box;
- display: inline-flex;
- width: 100%;
- .list-unstyled > li.quickfilter {
- padding-top: calc(#{$search-filter-padding-top} + (#{$search-input-height-fixed} - #{$search-input-height-default}) / 2);
- }
- }
}
- @media screen and (min-width: $screen-sm-min) {
- max-width: $search-form-width-affix-lg;
- width: 58%;
+ @media screen and (min-width: $screen-lg-min) {
+ position: fixed;
+ right: 35%;
+ width: 40%;
.sbox-dd-menu {
width: 100%;
}
}
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md){
- .btn.btn-lg {
- display: none;
- }
+ @media screen and (min-width: $screen-xl-min) {
+ right: 35%;
}
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max){
- .searchbox {
+ .searchbox {
+ @media screen and (min-width: $screen-sm-min) {
+ width: $search-form-width-affix-sm;
+ }
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ width: $search-form-width-affix-md;
+ }
+ @media screen and (min-width: $screen-lg-min) {
background: transparent;
+ height: $navbar-header-height-affix-sm;
+ padding-left: 25px;
+ padding-right: 25px;
+ padding-top: 18px;
+ width: $search-form-width-affix-lg;
}
- }
-
- @media screen and (min-width: $screen-lg-min) {
- left: calc(#{$logo-max-width} + 50px);
- max-width: $search-form-width-affix-lg;
- min-width: $search-form-width-sm;
- width: 40%;
- .sbox-dd-menu {
- width: 100%;
+ @media screen and (min-width: $screen-xl-min) {
+ max-width: $search-form-width-max;
+ width: $search-form-width-xl;
}
}
- .btn-lg {
- height: 69px;
+ .searchForm {
+ width: 100%;
+ @media screen and (min-width: $screen-lg-min) {
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: -webkit-box;
+ display: inline-flex;
+ .list-unstyled > li.quickfilter {
+ padding-top: calc(#{$search-filter-padding-top} + (#{$search-input-height-fixed} - #{$search-input-height-default}) / 2);
+ }
+ }
}
.searchForm_lookfor {
+ max-width: $search-form-width-max;
@media screen and (min-width: $screen-sm-min) {
- height: $search-input-height-affix-lg;
- max-width: $search-input-width-fixed;
- width: $search-input-width-fixed;
+ height: $search-input-height-affix-sm;
+ width: $search-input-width-affix-sm;
+ }
+ @media screen and (min-width: $screen-md-min) {
+ height: $search-input-height-affix-md;
+ width: $search-input-width-affix-md;
}
@media screen and (min-width: $screen-lg-min) {
height: $search-input-height-affix-lg;
- max-width: $search-input-width-affix-lg;
width: $search-input-width-affix-lg;
}
}
@@ -355,14 +402,36 @@
border-radius: 2px;
height: $search-input-height-fixed;
margin-top: 1em;
+ outline: none;
width: 100%;
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max){
+ width: em(126px);
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
height: $search-input-height-lg;
min-width: 174px;
}
}
+@mixin basic-dropdown-menu {
+ background-color: $white;
+ border-radius: 0;
+
+ .active {
+ a {
+ background: transparent;
+ color: $black;
+ font-weight: bold;
+ }
+ }
+
+ a:hover, .dropdown-menu span.filter-option:hover {
+ background: $seafoam;
+ }
+}
+
// Template to disable text selection highlighting
@mixin noselect {
-webkit-touch-callout: none; /* iOS Safari */
@@ -387,31 +456,31 @@
font-family: $font-family-monospace;
font-size: $font-size-base;
font-weight: bolder;
- @if $screen-border == 'screen-xs-max' {
+ @if $screen-border == 'mobile' {
height: 40px;
} @else {
height: $search-input-height-fixed;
}
letter-spacing: 2px;
- @if $screen-border == 'screen-xs-max' {
+ @if $screen-border == 'mobile' {
line-height: 35px;
} @else {
line-height: 18px;
}
min-width: $search-filter-width-lg;
- @if $screen-border != 'screen-xs-max' {
+ @if $screen-border != 'mobile' {
padding-left: 5px;
padding-top: 20px;
}
position: relative;
text-decoration: none;
text-transform: uppercase;
- @if $screen-border == 'screen-xs-max' {
+ @if $screen-border == 'mobile' {
width: 118px;
} @else {
- width: 126px;
+ width: 120px;
}
- @if $screen-border == 'screen-xs-max' {
+ @if $screen-border == 'mobile' {
.icon {
font-size: $imo-font-size-base;
line-height: 35px;
@@ -424,17 +493,26 @@
}
}
- // Hide toggler for whole search box
+ // show / hide toggler for whole search box
.sbox-dd .dropdown-toggle {
display: $display-searchbox-toggle;
}
- // But show toggler for format filter
+ // show / hide toggler for format filter (all / texts ecetera)
.sbox-dd .nav-tabs .dropdown-toggle {
display: $display-prefilter-toggle;
}
- @if $screen-border != 'screen-xs-max' {
+ @if $display-prefilter-toggle == 'none' {
+ .find-button .btn-lg {
+ margin-top: 0;
+ @if $screen-border == 'mobile' {
+ height: calc(#{$search-input-height-fixed} + 1px);
+ }
+ }
+ }
+
+ @if $screen-border != 'mobile' {
// show large search box always on large screens...
.sbox-dd-menu {
display: block;
@@ -443,7 +521,8 @@
// or fixed screen
.sbox-dd-menu {
display: block;
- left: 15px;
+ padding-left: $content-l-r-padding;
+ padding-right: $content-l-r-padding;
}
}
@@ -451,20 +530,20 @@
.nav.nav-tabs .dropdown-menu {
// show select for hidden filters as "tabs"
all: unset;
+ span:hover {
+ background: transparent;
+ }
}
}
}
// Styles for Tabs above Search box
-// parameter $type: collapsed for default / full for start page
-// parameter $is-format-filter: for format filter (first filter button)
-@mixin search-filter-styles($type, $is-format-filter, $screen-border) {
- @if $is-format-filter {
- border-bottom: 0;
- margin-bottom: 30px;
- }
+// parameter $is_collapsed, $is_mobile
+// $is_collapsed: true for default otherwise expanded (for instance on start page)
+// $is_mobile: true for phablet otherwise desktop
+@mixin search-filter-styles($is_collapsed, $is_mobile) {
- @if $type == 'collapsed' {
+ @if $is_collapsed {
input[type="radio"]{
box-sizing: border-box;
line-height: normal;
@@ -477,17 +556,18 @@
vertical-align: middle;
}
.dropdown-menu {
- border-radius: 4px;
+ border-radius: 0;
display: grid;
- padding: 7.5px;
- @if $screen-border == 'screen-xs-max' {
- left: 20px;
- top: 168px;
+ padding: em(7.5px);
+ @if $is_mobile {
+ left: 34px;
+ max-width: 300px;
+ top: 183px;
} @else {
- left: 35px;
- top: 115px;
+ left: 30px;
+ top: 105px;
}
- width: $search-input-width-fixed;
+ width: $search-input-width-affix-sm;
z-index: z-index(filter-dropdown, 0);
}
.filter-option {
@@ -495,7 +575,7 @@
padding: 0 2.5px;
width: 100%;
}
- } @else if $type == 'full' {
+ } @else if $is_mobile == false {
display: table;
font-family: $font-family-monospace;
margin-bottom: 2.5em;
@@ -511,13 +591,9 @@
}
label {
- color: white;
+ color: $white;
cursor: pointer;
- :not(.additional-text-xs) {
- display: table-cell;
- }
text-align: center;
- transition: none;
vertical-align: middle;
@include search-filter-details(transparent, transparent, transparent, $font-family-monospace);
}
@@ -525,12 +601,9 @@
.filter-option {
margin-right: 30px;
}
- } @else {
- label {
- font: $font-family-sans-serif;
- min-width: 90%;
- padding: .25em .5em;
- vertical-align: middle;
+
+ .format-filter {
+ display: none;
}
}
}
diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index be699654d4a9dc4d835e2e39d44e8ea0975d9bf7..d4074e1bdaf30a95ff4abd11ec1ef3b85283ec21 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -144,8 +144,9 @@ $imo-v-align: 0% !default; //-14.28571429%
//// Base font size
$font-size-base: 18px !default;
//// Submenu font size for xs, sm and lg
-$font-size-menu-xs: 23px !default;
-$font-size-menu-sm: 25px !default;
+$font-size-menu-default: 23px;
+$font-size-menu-xs: $font-size-menu-default !default;
+$font-size-menu-sm: 40px !default;
$font-size-menu-lg: 43px !default;
//// We use these to define default font stacks
$font-family-sans-serif: 'Open Sans', Helvetica, Roboto, Arial, sans-serif !default;
@@ -183,14 +184,17 @@ $brand-danger: #e7006b !default; // rgb(231, 0, 107)
//$brand-info: #008cba !default; // FIXME: Which color will info boxes have?
$brand-success: #00c092 !default; // rgb(0, 192, 146)
$brand-warning: $amber !default; // rgb(247, 197, 37)
+$state-danger-bg: $brand-danger !default;
+$state-warning-bg:$brand-warning !default;
+$state-success-bg:$brand-success !default;
$header-bg-color: $midnight;
//// ALERTS (see states, above, and compiled.scss - Code needs to go there to overwrite defaults)
//// ANIMATIONS
-$transition-delay: 0.01s;
-$transition-duration: 0.01s;
+$transition-delay: .5s;
+$transition-duration: .5s;
//// ANIMATIONS - END
//// FORM ELEMENTS
@@ -212,7 +216,7 @@ $default-border: 3px;
//$btn-primary-bg: $brand-primary !default;
// $btn-primary-color: $btn-primary-color !default; // already defined this way in BS _variables, use this variable to change it
// $btn-primary-bg: $brand-primary !default; // already defined this way in BS _variables, use this variable to change it
-$search-button-clip-width-sm: 86px;
+$search-button-clip-width-sm: 75px;
//// BUTTONS - END
@@ -246,59 +250,77 @@ $search-button-clip-width-sm: 86px;
//$navbar-bg-color: $header-bg-color !default;
//$navbar-fixed-bg-color: $header-bg-color !default;
-$logo-max-width: 241px !default;
+$logo-max-width: 220px !default;
// override breakpoint of collapsing navbar for tablets and mobile
// $grid-float-breakpoint: 992px;
-// ++ Height of textbox with adlr claim in header (home page)
-$header-text-top-padding-xs: 55px;
-$header-text-top-padding-sm: 30px;
-$header-text-box-height-xs: 334px;
-$header-text-box-height-sm: 464px;
-$header-text-bottom-padding-xs: 500px;
-$header-text-bottom-padding-sm: 800px;
+$default-header-height-lg: 208px;
//// NAVBAR
// ++ Margin of navbar
-$navbar-margin-left: 15px;
-
-// ++ Height of navbar in header for XS and SM
-$navbar-header-height-xs-sm: 85px;
+$navbar-margin-left: 25px;
-// ++ Height of navbar in header for SM and LG
-$navbar-header-height-home-sm: 105px;
-$navbar-header-height-sm: 208px;
-$navbar-header-height-affix-sm: 105px;
+// ++ Height of navbar in header
+$navbar-header-height: 85px;
+$navbar-header-height-home-sm: 85px;
+$navbar-header-height-affix-sm: 105px; // $data_offset_top_affix + 1 in header
+$navbar-header-height-affix-lg: 105px; // $data_offset_top_affix + 1 in header
//// NAVBAR - END
-// ++ Height and width of the fixed search input field
-$search-input-height-fixed: 65px;
-$search-input-width-fixed: 296px;
-
-// ++ Height and width of the default search input field
-$search-input-height-default: 92px;
-$search-input-width-default: 716px;
+// ++ Search Form
+$search-form-height-xs: 330px; // + 3px border
+$search-form-height-sm: 250px; // + 3px border
+$search-form-height-lg: 310px; // + 3px border
// ++ Height and width of the search box - SMALL DESKTOP
-$search-form-width-sm: 520px;
+$search-form-width-sm: 100%;
+$search-form-width-affix-sm: 100%;
+
+// ++ Height and width of the search box - MEDIUM DESKTOP
+$search-form-width-affix-md: 100%;
// ++ Height and width of the search box - LARGE DESKTOP
-$search-form-height-lg: 300px; // + 3px border
-$search-form-width-lg: 1040px; // + 3px border
-$search-form-width-affix-lg: 717px;
+$search-form-width-affix-lg: 600px;
+$search-form-width-home-lg: 1000px;
-// ++ Height and width of the search input field - DESKTOP
-$search-input-height-lg: $search-input-height-default; // + 3px border
-$search-input-width-lg: 710px; // + 3px border
-$search-input-height-affix-lg: $search-input-height-fixed; // + 3px border
-$search-input-width-affix-lg: 388px; // + 3px border
+// ++ Height and width of the search box - EXTRA LARGE DESKTOP
+$search-form-width-max: 1000px;
+$search-form-width-xl: 99%;
+$search-form-width-home-xl: $search-form-width-home-lg;
+
+// ++ Height and width of the default search input field
+$search-input-height-default: 92px;
+$search-input-height-fixed: 65px;
+$search-input-width-affix-sm: 75%;
+$search-input-width-affix-md: 80%;
+$search-input-width-affix-lg: 90%;
+$search-input-width-sm: $search-input-width-affix-sm;
+$search-input-width-md: $search-input-width-affix-md;
+$search-input-width-lg: 710px;
+$search-input-height-affix-sm: $search-input-height-fixed;
+$search-input-height-affix-md: $search-input-height-fixed;
+$search-input-height-affix-lg: $search-input-height-fixed;
+$search-input-height-sm: $search-input-height-fixed;
+$search-input-height-lg: $search-input-height-default;
$search-filter-padding-top: 24px;
$search-filter-width-lg: 100px;
-$search-filter-width-hover-lg: calc(2 * #{$search-filter-width-lg});
-$search-panel-width-xs: 98%;
+$search-panel-width-xs-md: 100%;
$search-toggle-padding-bottom-top: 40px;
+$search-padding-sm-md: 40px;
+
+// ++ Height of textbox with adlr claim in header (home page)
+$home-text-top-padding-xs: 100px;
+$home-text-top-padding-sm: 0;
+$home-text-top-padding-lg: 0;
+$home-text-box-height-xs: 300px;
+$home-text-box-height-sm: 330px;
+$home-text-box-height-lg: 470px;
+$home-text-bottom-padding-xs: 500px;
+$home-text-bottom-padding-sm: 400px;
+$home-text-bottom-padding-lg: 700px;
+$home-text-left-margin-lg: 150px;
//// Breadcrumbs
@@ -420,7 +442,9 @@ $z-index: (
}
// FUNCTIONS - END
-$screen-xl: 1500px !default;
+$screen-xl: 1450px !default;
$screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default;
+
@import '../../bootstrap3/scss/vendor/bootstrap/variables';
+$mobile-navigation-menu-breakpoint: $screen-md-max !default; // use mobile navigation until this width
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index e52a7ece1bf1b71eb92a11d187a928a82a8123d5..eaa11eaf6126ac94abebec35a36c3316fb17bd72 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -65,7 +65,6 @@
// BODY
body {
- // color: $black;
background-color: $white;
// set default to OPEN SANS
font-family: $font-family-sans-serif;
@@ -178,6 +177,22 @@ form input:invalid, form textarea:invalid {
margin-right: 0;
}
+.hidden-lg-only {
+ @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
+ display: none !important;
+ }
+}
+.hidden-sm-lg {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-lg-max) {
+ display: none !important;
+ }
+}
+.hidden-xl {
+ @media (min-width: $screen-xl-min) {
+ display: none !important;
+ }
+}
+
// FORMS - END
// IMAGES
@@ -187,7 +202,11 @@ form input:invalid, form textarea:invalid {
// LINKS
a {
color: $black;
+ outline: none;
text-decoration: none;
+ &:focus {
+ outline: none;
+ }
&:hover {
text-decoration: none;
}
@@ -277,8 +296,9 @@ a {
// ++ BUTTONS
.btn-lg {
@include large-btn;
-
- @media screen and (max-width: $screen-xs-max) {
+ &:hover,
+ &:focus {
+ outline: none;
}
}
@@ -297,7 +317,7 @@ a {
.icon {
min-width: 30px;
vertical-align: bottom;
- @media screen and (max-width: $screen-xs-max) {
+ @media screen and (max-width: $screen-md-max) {
font-size: calc(#{$font-size-base} * 1.7);
font-weight: 500;
min-width: 35px;
@@ -314,6 +334,25 @@ a {
// ICONS - END
// ++ DROPDOWNS
+.dropdown-menu {
+ @include basic-dropdown-menu;
+}
+
+.dropdown-menu-parent {
+ // needed for nested dropdown - hack for js of bootstrap 3
+ @extend .dropdown-menu;
+ @media screen and (max-width: $screen-xs-max) {
+ width: 100%;
+ .searchForm {
+ max-width: $screen-md-max;
+ width: 100%;
+ .form-control {
+ max-width: $screen-md-max;
+ width: 100%;
+ }
+ }
+ }
+}
// ++ DROPDOWNS - END
// ++ MODALS
@@ -327,8 +366,12 @@ header {
background-repeat: no-repeat;
&.collapse:not(.in), &.collapsing {
- background: white;
- display: inline;
+ background: $white;
+ display: block;
+ min-height: $navbar-header-height;
+ .navbar {
+ background: $white;
+ }
.navbar-header-link {
color: $azure;
}
@@ -338,14 +381,8 @@ header {
margin-bottom: $content-bottom-padding;
}
- @media screen and (min-width: $screen-sm-min) {
- background-image: url('../images/header-bg-sm.png');
- min-height: em($navbar-header-height-home-sm);
- }
-
@media screen and (min-width: $screen-lg-min) {
background-image: url('../images/header-bg-lg.png');
- min-height: em($navbar-header-height-home-sm);
}
}
@@ -398,37 +435,53 @@ header,
flex-grow: 2;
flex-shrink: 1;
}
- .register .navbar-header-link {
- @media (max-width: $screen-xs-max) {
- @include shift-main-menu-entries-to-navigation-overlay;
- top: calc(#{$navbar-header-height-xs-sm} + 5 * #{$line-height-submenu} + 2 * #{$content-top-padding});
- }
- }
.language {
height: 35px;
.dropdown-menu {
- background-color: white;
+ @include basic-dropdown-menu;
left: 10px;
min-width: 100px;
- position: absolute;
- width: 100px;
- @media (max-width: $screen-xs-max) {
+ @media (max-width: $mobile-navigation-menu-breakpoint) {
@include shift-main-menu-entries-to-navigation-overlay;
- top: calc(#{$navbar-header-height-xs-sm} + 4 * #{$line-height-submenu} + 2 * #{$content-top-padding});
+ top: calc(#{$navbar-header-height} + 4 * #{$line-height-submenu} + 2 * #{$content-top-padding});
+ }
+ @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
+ top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + #{$content-top-padding});
+ .btn {
+ font-size: calc(#{$font-size-menu-sm} - 15px);
+ }
}
li > a {
padding: 3px 5px;
text-align: left;
+ @media (max-width: $mobile-navigation-menu-breakpoint) {
+ padding: 0;
+ }
}
}
}
.language.dropdown:not(.open) {
.dropdown-menu {
- @media (min-width: $screen-sm-min) {
+ @media (min-width: $screen-md-max + 1) {
display: none;
}
}
}
+ .register .navbar-header-link {
+ @media (max-width: $mobile-navigation-menu-breakpoint) {
+ @include shift-main-menu-entries-to-navigation-overlay;
+ top: calc(#{$navbar-header-height} + 5 * #{$line-height-submenu} + #{$content-top-padding});
+ :hover {
+ background: $seafoam;
+ }
+ }
+ @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ font-size: calc(#{$font-size-menu-sm} - 15px);
+ left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
+ top: calc(#{$navbar-header-height} + 9 * #{$line-height-submenu} + #{$content-top-padding});
+ }
+ }
}
// override finc display block
@@ -444,35 +497,14 @@ header,
}
}
-// ++++++ Navbar in affix mode
-.navbar.affix {
- border: 0;
-
- @media screen and (min-width: $screen-sm-min) {
- @include default-background-header;
- height: em($navbar-header-height-affix-sm);
- .adv-srch-btn {
- display: none;
- }
- }
-}
-// ++++++ Navbar in affix mode - END
-
.header-menu-collapse {
@extend .navbar-header;
- @media (min-width: $screen-sm-min) {
+ @media (min-width: $screen-lg-min) {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: -webkit-box;
display: inline-flex;
&.collapse.in {
- .additional-text-lg {
- display: inline;
- }
-
- .additional-text-xl {
- display: inline;
- }
.submenu-collapse {
top: $navbar-header-height-home-sm;
}
@@ -517,29 +549,6 @@ header.collapse.in .menubar .text-close, .dropdown.sbox-dd:not(.open) .text-clos
header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dropdown.sbox-dd.open .text-open, .language.open .icon.icon-caret-down {
display: none;
}
-//// Display different icons after open or close of submenues - END
-
-.additional-text-xs, .additional-text-xl, .additional-text-lg {
- display: none;
-}
-
-@media screen and (max-width: $screen-xs-max) {
- .additional-text-xs {
- display: inline;
- }
-}
-
-@media screen and (min-width: $screen-lg) {
- .additional-text-lg {
- display: inline;
- }
-}
-
-@media screen and (min-width: $screen-xl) {
- .additional-text-xl {
- display: inline;
- }
-}
.navbar-header {
flex-shrink: 0;
@@ -552,9 +561,9 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
top: 31px;
}
- @media screen and (max-width: $screen-sm-min) {
+ @media screen and (max-width: $screen-md-max) {
background-color: $white;
- height: $navbar-header-height-xs-sm;
+ height: $navbar-header-height;
padding: 30px 0 20px;
.navbar-toggle {
@@ -570,18 +579,13 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
display: inline-flex;
}
}
-
- @media screen and (min-width: $screen-sm-min) {
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: -webkit-box;
- display: inline-flex;
- }
}
.navbar-header-link {
@extend .navbar-toggle;
- @media screen and (min-width: $screen-sm-min) {
+ display: inherit;
+ margin-right: 0;
+ @media screen and (min-width: $screen-lg-min) {
@include default-navbar-link-font;
}
}
@@ -600,7 +604,7 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
padding-left: 0;
padding-right: 0;
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-lg-min) {
border-radius: 0;
padding-left: 20px;
padding-top: 20px;
@@ -614,7 +618,18 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
// Menu toggler position
.navbar-toggle {
- margin-right: 10px;
+ margin-right: em(5px);
+ padding-left: em(15px);
+ @media screen and (min-width: $screen-sm-min) {
+ padding-left: em(25px);
+ }
+ @media screen and (min-width: $screen-lg-min) {
+ padding-left: em(10px);
+ }
+ @media screen and (min-width: $screen-xl-min) {
+ margin-right: em(6px);
+ padding-left: em(3px);
+ }
}
}
}
@@ -628,7 +643,8 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
background-size: contain;
color: transparent;
- min-width: 180px;
+ min-height: em(56px); // FIX for Safari + Android Stock Browser
+ min-width: 180px; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
max-width: $logo-max-width;
// 768px and up
@@ -639,12 +655,10 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
background-size: contain;
display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
- min-height: 56px; // FIX for Safari + Android Stock Browser
- min-width: 168px !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
}
// 992px and up
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-lg-min) {
// Fallback image IE & Co
background: url('../images/logo.png') no-repeat;
// SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
@@ -668,127 +682,206 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
// ++++++ basic default (non start page)
body:not(.template-name-home) {
header {
+ @media screen and (max-width: $screen-md-max) {
+ margin-bottom: calc(#{$navbar-header-height} + #{$search-input-height-fixed} + 35px);
+ }
+
.headline, .home-links {
display: none;
}
- @media screen and (max-width: $screen-xs-max) {
- min-height: calc(4.5 * #{$search-toggle-padding-bottom-top});
+
+ @media screen and (min-width: $screen-lg-min) {
+ background-image: url('../images/header-bg-lg-mirror-stretched.png');
+ background-position: 100% 70%;
+ height: $default-header-height-lg; // needed for background image effect
}
- @media screen and (min-width: $screen-sm-min) {
- @include default-background-header;
- .header-text.container {
- height: calc(#{$navbar-header-height-sm} - #{$navbar-header-height-affix-sm});
+
+ // ++++++ Navbar in affix mode
+ .navbar.affix:not(.search) {
+ border: 0;
+
+ @media screen and (min-width: $screen-lg-min) {
+ @include default-background-lg;
+ height: em($navbar-header-height-affix-lg);
}
}
+ // ++++++ Navbar in affix mode - END
+
+ .navbar.affix-top {
+ position: fixed;
+ }
+
.search {
// always use fixed search on default sites
@include fixed-navbar-search;
+
+ &.affix-top {
+ .searchbox {
+ @media screen and (min-width: $screen-sm-min) {
+ background: $azure;
+ }
+ @media screen and (min-width: $screen-lg-min) {
+ height: 130px;
+ }
+ @media screen and (min-width: 1200px) and (max-width: 1250px) {
+ background: transparent;
+ }
+ }
+ }
}
+ // search (box) and elements in affix mode - END
}
}
// ++++++ basic default - END
// ++++ Start Page
.template-name-home {
- header {
- &.collapse:not(.in) {
- .header-text {
- display: none;
- }
- }
+ .main {
+ @include default-background;
@media screen and (max-width: $screen-xs-max) {
background-image: url('../images/header-bg-xs.png');
- background-position: -390px $navbar-header-height-xs-sm;
- background-size: cover;
- min-height: em($navbar-header-height-xs-sm);
+ background-position: 100% 0px;
+ background-size: auto;
+ }
+
+ @media screen and (min-width: $screen-sm-min) {
+ background-image: url('../images/header-bg-sm.png');
+ background-position: 100% #{$navbar-header-height-home-sm};
+ min-height: em($navbar-header-height-home-sm);
+ }
+
+ @media screen and (min-width: $screen-md-min) {
+ background-image: url('../images/header-bg-md.png');
}
- @media screen and (min-width: $screen-sm) {
- .affix-top {
- .additional-text-xl, .additional-text-lg {
- display: inline;
+ @media screen and (min-width: $screen-lg-min) {
+ background-image: url('../images/header-bg-lg.png'),
+ url('../images/background-shape-left.svg'),
+ url('../images/background-shape-right.svg');
+ background-position: 100% -#{$navbar-header-height-home-sm},
+ center left,
+ bottom right;
+ background-repeat: no-repeat;
+ }
+ }
+ header {
+ .affix-top {
+ position: relative; // ignore affix header on start page
+ .menubar {
+ @media screen and (max-width: $screen-md-max) {
+ position: fixed; // but not for mobile devices
}
}
}
- }
- // hide header text headline when affix is applied
- .banner.affix {
- .header-text {
- display: none;
+ .affix {
+ position: relative; // ignore affix header on start page
+ .menubar {
+ @media screen and (max-width: $screen-md-max) {
+ position: fixed; // but not for mobile devices
+ }
+ }
+ }
+ @media screen and (min-width: $screen-lg-min) {
+ .container.navbar {
+ padding-right: em(20px);
+ }
}
}
- .header-text {
+ .home-text {
+ border: 0;
color: $brand-secondary;
.home-links {
display: block;
- margin-left: 10px;
- position: absolute;
- top: 812px;
+ position: relative;
+ top: calc(#{$home-text-box-height-lg} - 25px);
}
&.container {
+ margin-left: 0;
+ padding-left: 0;
@media screen and (max-width: $screen-xs-max) {
- height: $header-text-box-height-xs;
- padding-bottom: $header-text-bottom-padding-xs;
- padding-top: $header-text-top-padding-xs;
+ height: $home-text-box-height-xs;
+ padding-bottom: $home-text-bottom-padding-xs;
+ padding-top: $home-text-top-padding-xs;
.home-links {
display: none;
}
}
- @media screen and (min-width: $screen-sm-min) {
- height: $header-text-box-height-sm;
- padding-bottom: $header-text-bottom-padding-sm;
- padding-top: $header-text-top-padding-sm;
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ height: $home-text-box-height-sm;
+ padding-bottom: $home-text-bottom-padding-sm;
+ padding-top: $home-text-top-padding-sm;
+ .home-links {
+ display: none;
+ }
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ height: $home-text-box-height-lg;
+ margin-left: $home-text-left-margin-lg;
+ padding-bottom: $home-text-bottom-padding-lg;
+ padding-top: $home-text-top-padding-lg;
}
}
@media screen and (max-width: $screen-xs-max) {
// Add correct data for font-size, letter-spacing, lineheight, texttransform
@include default-headings-font(26px, 1.7px, 36px, none);
- margin-right: 25%;
+ margin-right: 5%;
+ max-width: calc(#{$screen-xs-max} / 2);
}
@media screen and (min-width: $screen-sm-min) {
- @include default-headings-font(63px, 4.27px, 69px, none);
+ // $font-size, $letter-spacing, $lineheight, $texttransform
+ @include default-headings-font(40px, 3.27px, 50px, none);
margin-bottom: 70px;
- margin-right: 10%;
- margin-top: $navbar-header-height-xs-sm;
+ margin-right: 0;
+ margin-top: calc(#{$navbar-header-height} + 50px);
padding-left: 0;
padding-right: 0;
+ text-align: left;
+ width: 85%;
+ }
+
+ @media screen and (min-width: $screen-md-min) {
+ // $font-size, $letter-spacing, $lineheight, $texttransform
+ width: 80%;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ // $font-size, $letter-spacing, $lineheight, $texttransform
+ @include default-headings-font(63px, 4.27px, 69px, none);
+ margin-top: $navbar-header-height;
text-align: right;
- width: 900px;
}
}
.search.container.navbar {
position: absolute;
@media screen and (max-width: $screen-xs-max) {
- &:not(.affix) {
- // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
- @include searchbox-toggler-and-content-styles(none, block, false, false, 'screen-xs-max');
- top: $header-text-box-height-xs;
- }
+ // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+ @include searchbox-toggler-and-content-styles(none, block, false, false, 'mobile');
+ padding-right: 0;
+ top: $home-text-box-height-xs;
+ width: 100%;
}
- @media screen and (min-width: $screen-sm-min) {
- left: 0;
- top: $header-text-box-height-sm;
-
- &:not(.affix) {
- // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
- @include searchbox-toggler-and-content-styles(none, none, true, false, 'screen-sm-min');
- }
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+ @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
+ top: $home-text-box-height-sm;
+ width: 100%;
}
@media screen and (min-width: $screen-lg-min) {
+ // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+ @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
left: 15%;
- top: $header-text-box-height-sm;
+ top: $home-text-box-height-lg;
}
}
- .search.container.navbar.affix {
- @include fixed-navbar-search;
- }
}
// ++++ Start Page - END
@@ -796,9 +889,14 @@ body:not(.template-name-home) {
.search.container {
background-color: transparent;
border: 0;
- padding-top: 0px;
+ padding-top: 0;
z-index: z-index(search, 0);
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ padding-left: $search-padding-sm-md;
+ padding-right: $search-padding-sm-md;
+ }
+
&.collapse.in {
display: inherit;
}
@@ -808,71 +906,120 @@ body:not(.template-name-home) {
transition: unset;
}
+ .sbox-dd-menu {
+ background-color: transparent;
+ border: 0;
+ margin-top: 0;
+ z-index: z-index(sbox-dd-menu, 0);
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ width: $search-panel-width-xs-md;
+ }
+ }
+
.searchbox {
// Outer Box
background-color: $brand-primary;
+ height: em($search-form-height-xs);
padding: 30px 20px;
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ height: em($search-form-height-sm);
+ max-width: unset;
+ padding: 35px 20px 55px 50px;
+ width: $search-form-width-sm;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
height: em($search-form-height-lg);
padding: 55px 20px 55px 50px;
- width: $search-form-width-lg;
+ width: $search-form-width-home-lg;
}
- // Outer Box - END
- }
-
- .sbox-dd-menu {
- background-color: transparent;
- border: 0;
- margin-top: 0;
- z-index: z-index(sbox-dd-menu, 0);
- }
-
- @media screen and (min-width: $screen-sm-min) {
- // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
- @include searchbox-toggler-and-content-styles(none, block, false, false, 'screen-sm-min');
- width: 1250px;
- .btn-lg {
- margin-top: 0;
+ @media screen and (min-width: $screen-xl-min) {
+ padding: 55px 20px 55px 50px;
+ width: $search-form-width-home-xl;
}
+ // Outer Box - END
}
.searchForm {
display: inline-block;
- @media screen and (max-width: $screen-xs-max) {
- .nav-tabs {
- // parameter $type: collapsed for default / full for start page
- @include search-filter-styles(false, true, 'screen-xs-max');
+ ul.dropdown-menu-parent > li {
+ width: 100%;
+ }
- &.open {
- // parameter $type: collapsed for default / full for start page
- @include search-filter-styles('collapsed', true, 'screen-xs-max');
- }
+ @media screen and (max-width: $screen-xs-max) {
+ .navbar-left {
+ margin-bottom: 0;
}
+ label {
+ font: $font-family-sans-serif;
+ min-width: 90%;
+ padding: .25em .5em;
+ vertical-align: middle;
+ }
+ }
+
+ @media screen and (max-width: $screen-md-max) {
+ width: $search-panel-width-xs-md;
}
}
}
+// ++++ SEARCH TABS
.nav-tabs {
border-bottom: 0;
}
-.template-name-home .affix-top {
- @media screen and (min-width: $screen-sm-min) {
- .nav-tabs {
- @include search-filter-styles('full', true, 'screen-sm-min');
+.template-name-home {
+ .nav-tabs {
+ border-bottom: 0;
+ margin-bottom: 30px;
+ @media screen and (max-width: $screen-xs-max) {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(false, true);
+
+ &.open {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, true);
+ }
+ }
+ @media screen and (min-width: $screen-sm-min) {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(false, false);
}
}
}
-.template-name-home .affix, body:not(.template-name-home) {
- @media screen and (min-width: $screen-sm-min) {
- .nav-tabs.open {
- @include search-filter-styles('collapsed', true, 'screen-sm-min');
+body:not(.template-name-home) {
+
+ .nav-tabs {
+ border-bottom: 0;
+ margin-bottom: 30px;
+ }
+
+ @media screen and (max-width: $screen-xs-max) {
+ .nav-tabs.open { // note difference to sm - show tabs as select
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, true);
+ }
+ }
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ .nav-tabs { // note difference to xs - always show expanded options as tabs
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(false, false);
+ }
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ .nav-tabs.open { // note difference to sm - show tabs as select
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, false);
}
}
}
+// ++++ SEARCH TABS - END
// search (box) and elements in affix mode (on scrolling)
@@ -904,29 +1051,34 @@ input.searchForm_lookfor {
@include default-border-radius;
background-color: transparent;
height: $search-input-height-fixed;
- min-width: $search-input-width-fixed;
@media screen and (min-width: $screen-sm-min) {
+ height: $search-input-height-sm;
+ width: $search-input-width-sm;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
height: $search-input-height-lg;
width: $search-input-width-lg;
}
&.form-control {
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
+ max-width: unset;
+ width: $search-input-width-sm;
+ }
+
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max){
+ max-width: unset;
+ width: $search-input-width-md;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
max-width: $search-input-width-lg;
width: $search-input-width-lg;
}
}
}
-
-// Set font size for input field and advanced search link
-.searchForm_lookfor,
-.adv-srch-btn {
- @media screen and (max-width: $screen-sm-max) {
- font-size: 16px;
- }
-}
-
// ++++++ Search input field - END
// ++++++ Quick filter
@@ -936,6 +1088,12 @@ input.searchForm_lookfor {
.quickfilter.open & {
background: transparent;
}
+
+ &:active,
+ &:hover
+ {
+ color: $seafoam;
+ }
}
#quickfilter-dd,
@@ -961,26 +1119,32 @@ input.searchForm_lookfor {
}
}
- &.find-label {
- @include default-border-radius;
- @include large-btn;
- height: $search-input-height-lg;
+ .find-label {
+ display: inherit; // show find text as default, but not at fixed-navbar-search
}
// ++++++ Standard Search Button - END
- &.quickfilter {
+ &.quickfilter { // gear within search input
height: $search-input-height-fixed;
margin-left: -3em;
padding-top: 12px;
position: absolute;
@media screen and (max-width: $screen-xs-max) {
- left: $search-input-width-fixed;
- margin-left: -2em;
+ height: $search-input-height-fixed;
+ left: 90%;
}
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ left: calc(#{$search-input-width-affix-sm} - 2%);
+ }
+
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ left: calc(#{$search-input-width-affix-md} - 2%);
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
height: $search-input-height-default;
padding-top: $search-filter-padding-top;
}
@@ -993,19 +1157,29 @@ input.searchForm_lookfor {
.btn-transparent {
border: 1px solid transparent;
- &:hover,
- &:focus {
+ &:active,
+ &:focus,
+ &:hover
+ {
background: transparent;
- color: $brand-secondary;
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: $seafoam;
+ outline: none;
}
}
.dropdown-menu {
// parameter $type: collapsed for default / full for start page
- @include search-filter-styles('collapsed', false, false);
- left: -240px;
+ @include basic-dropdown-menu;
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, false); // gear within search text input
+ left: -180px;
padding: 5px;
- width: $search-input-width-fixed;
+ top: 84px;
+ @media screen and (max-width: $screen-md-max) {
+ top: 80px;
+ }
}
}
}
@@ -1022,10 +1196,19 @@ input.searchForm_lookfor {
.adv-srch-btn {
color: $white;
display: inline-block;
- margin-top: 1em;
text-decoration: underline;
+ @media screen and (min-width: $screen-sm-min) {
+ margin-top: 1em;
+ }
}
+// Set font size for input field and advanced search link
+.searchForm_lookfor,
+.adv-srch-btn {
+ @media screen and (max-width: $screen-md-max) {
+ font-size: 16px;
+ }
+}
// ++++++ Adv. Search Link - END
// ********************************************************
@@ -1075,7 +1258,7 @@ input.searchForm_lookfor {
.search-header {
margin-bottom: 5em;
margin-top: 2em;
- width: $search-panel-width-xs;
+ width: $search-panel-width-xs-md;
}
.search-stats {
@@ -1317,13 +1500,28 @@ input.searchForm_lookfor {
// ++ GENERAL CONTENT PAGE
.main {
- min-height: 1000px;
-
+ .container {
+ background: transparent;
+ border: 0;
+ }
&.collapsing {
height: 0;
min-height: 0;
transition: unset;
}
+ @media screen and (max-width: $screen-xs-max) {
+ .mainbody {
+ width: 100%;
+ }
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ background-image: url('../images/background-shape-left.svg'),
+ url('../images/background-shape-right.svg');
+ background-position: center left,
+ bottom right;
+ background-repeat: no-repeat;
+ }
// refs #15589 dbis and licenses
.dbis_content {
diff --git a/themes/fid_adlr/templates/header.phtml b/themes/fid_adlr/templates/header.phtml
index ee142645fceb853a5f327d2c79df7268cb8eab42..49547d9c944c3823c75b3f33d1cd79324285b9c1 100644
--- a/themes/fid_adlr/templates/header.phtml
+++ b/themes/fid_adlr/templates/header.phtml
@@ -3,8 +3,9 @@
<?php /* This nav element is the sticky element in the header
- use affix and not navbar-fixed-top!
- affix is applied to ALL .navbar elements via JS in layout.phtml - CK */ ?>
-
-<div role="navigation" class="banner container navbar affix-top" id="main-navigation" data-spy="affix" data-offset-top="0">
+<?php $data_offset_top_affix = 104 ?>
+<div role="navigation" class="banner container navbar affix-top" id="main-navigation" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>">
+<!--div role="navigation" class="banner container navbar affix" id="main-navigation" -->
<!-- fid_adlr: navigation -->
<nav class="menubar">
<!-- fid_adlr: logo -->
@@ -21,13 +22,13 @@
<a id="feedbackLink" data-lightbox href="<?=$this->url('feedback-home')?>"><i class="icon icon-mail" aria-hidden="true"></i> <?=$this->transEsc("Feedback")?></a>
</li>
<?php endif; ?>
- <span id="loginOptions" <?php if ($account->isLoggedIn()): ?>class="hidden"<?php endif ?>>
+ <span<?php if ($account->isLoggedIn()): ?> class="hidden"<?php endif ?>>
<?php if ($account->supportsCreation()): ?>
- <a class="navbar-header-link" href="<?=$this->url('myresearch-account') ?>?auth_method=<?=$account->getAuthMethod()?>" data-lightbox>
- <span class="additional-text-xs additional-text-xl">
+ <a class="navbar-header-link no-margin-l" href="<?=$this->url('myresearch-account') ?>?auth_method=<?=$account->getAuthMethod()?>" data-lightbox>
+ <span class="hidden-lg-only">
<?=$this->transEsc('Create New Account')?>
</span>
- <span class="additional-text-lg">
+ <span class="hidden-xs hidden-sm hidden-md">
<i class="icon icon-key" aria-hidden="true"></i>
</span>
</a>
@@ -67,28 +68,31 @@
<!-- fid_adlr: basic header menu for login -->
<div class="navbar-header">
<?php /* login / logout */ ?>
- <?php if (is_object($account) && $account->loginEnabled()): // hide login/logout if unavailable ?>
+ <?php if (is_object($account) && $account->loginEnabled()): // hide login/logout if unavailable ?>
<div>
<span class="logoutOptions<?php if (!$account->isLoggedIn()): ?> hidden<?php endif ?>">
- <a class="navbar-header-link" href="<?=$this->url('myresearch-logout')?>" class="logout">
- <span class="additional-text-xl"><?=$this->transEsc("Log Out")?></span> <i class="icon icon-log-out" aria-hidden="true"></i>
+ <a class="navbar-header-link logout" href="<?=$this->url('myresearch-logout')?>" >
+ <span class="hidden-xs hidden-sm-lg"><?=$this->transEsc("Log Out")?></span> <i class="icon icon-log-out" aria-hidden="true"></i>
</a>
</span>
<span id="loginOptions" class="<?php if ($account->isLoggedIn()): ?>hidden<?php endif ?>">
<?php if ($account->getSessionInitiator($this->serverUrl($this->url('myresearch-home')))): ?>
<a href="<?= $this->url('myresearch-userlogin') ?>">
- <i class="icon icon-log-in" aria-hidden="true"></i> <?= $this->transEsc("Institutional Login") ?>
- </a>
+ <span class="hidden-xs hidden-sm hidden-md">
+ <?= $this->transEsc("Institutional Login") ?>
+ </span>
+ <i class="icon icon-log-in" aria-hidden="true"></i>
+ </a>
<?php else: ?>
<a class="navbar-header-link" href="<?= $this->url('myresearch-userlogin') ?>" data-lightbox>
- <span class="additional-text-xl"><?= $this->transEsc("Login") ?></span>
+ <span class="hidden-xs hidden-sm-lg"><?= $this->transEsc("Login") ?></span>
<i class="icon icon-log-in" aria-hidden="true"></i>
</a>
<?php endif; ?>
</span>
<span class="logoutOptions<?php if ($account->dropdownEnabled()): ?> with-dropdown<?php endif ?><?php if (!$account->isLoggedIn()): ?> hidden<?php endif ?>">
<a class="navbar-header-link" href="<?=$this->url('myresearch-home', [], ['query' => ['redirect' => 0]])?>">
- <span class="additional-text-xl"><?=$this->transEsc("Your Account")?></span>
+ <span class="hidden-sm-lg hidden-xs"><?=$this->transEsc("Your Account")?></span>
<i id="account-icon" class="icon icon-user" aria-hidden="true"></i>
</a>
</span>
@@ -114,13 +118,11 @@
<form method="post" name="langForm" id="langForm">
<input type="hidden" name="mylang"/>
</form>
- <a class="navbar-header-link dropdown-toggle additional-text-lg" id="quickfilter-language"
+ <a class="navbar-header-link dropdown-toggle hidden-xs hidden-sm hidden-md" id="quickfilter-language" href="#"
data-toggle="dropdown"
aria-controls="langmenu" aria-expanded="false">
<span class="sr-only">Toggle language</span>
- <?= $this->layout()->userLang ?>
- <i class="icon icon-caret-down" aria-hidden="true"></i>
- <i class="icon icon-chevron-up" aria-hidden="true"></i>
+ <?= $this->layout()->userLang ?> <i class="icon icon-caret-down" aria-hidden="true"></i><i class="icon icon-chevron-up" aria-hidden="true"></i>
</a>
<ul id="langmenu" class="dropdown-menu" aria-labelledby="quickfilter-language">
<?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
@@ -148,11 +150,11 @@
data-target="header, #main, #searchbox, #submenu, #language-dropdown, #register-menu">
<span class="sr-only">Toggle navigation</span>
<span class="text-open">
- <span class="additional-text-lg"><?= $this->transEsc("Menu") ?></span>
+ <span class="hidden-xs hidden-sm hidden-md"><?= $this->transEsc("Menu") ?></span>
<i class="icon icon-burger" aria-hidden="true"></i>
</span>
<span class="text-close">
- <span class="additional-text-lg"><?= $this->transEsc("close") ?></span>
+ <span class="hidden-xs hidden-sm hidden-md"><?= $this->transEsc("close") ?></span>
<i class="icon icon-close" aria-hidden="true"></i>
</span>
</a>
@@ -180,22 +182,9 @@
</nav>
<!-- fid_adlr: navigation - END -->
-<?php /* adlr-specific header text on home page, rendering via SCSS */ ?>
- <div class="header-text container">
- <div class="headline">
- <?= $this->transEsc("header_text") ?>
- </div>
- <div class="home-links">
- <a class="navbar-header-link small" href="/MyResearch/Licenses"><span
- class="icon icon-arrow-right"></span> <?= $this->transEsc('Press Databases') ?></a>
- <a class="navbar-header-link small"
- href="/Search/Results?&filter%5B%5D=~de15fid_date%3A%5BNOW-30DAY%2FDAY+TO+NOW%5D&type=AllFields&filter%5B%5D=mega_collection%3A%22PDA+Print+VUB%22"><span
- class="icon icon-arrow-right"></span> <?= $this->transEsc('New Items') ?></a>
- </div>
- </div>
<?php /* adlr-specific header text on home page - END */ ?>
<?php if ($this->layout()->searchbox !== false): ?>
- <div class="search container navbar collapse in affix-top" data-spy="affix" data-offset-top="0" id="searchbox">
+ <div class="search container navbar collapse in affix-top" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>" id="searchbox">
<div class="dropdown sbox-dd">
<?php /* no data-toggle: .open dropdown-menu of sbox manually to prevent interdependence-bug with dropdown quickfilter(s) within sbox - RL */ ?>
<button class="btn btn-primary dropdown-toggle" type="button" id="search-main-dropdown">
@@ -203,7 +192,7 @@
<span class="text-close"><?= $this->transEsc("Close Search") ?><span
class="icon icon-chevron-up"></span></span>
</button>
- <ul class="dropdown-menu sbox-dd-menu" aria-labelledby="searchbox">
+ <ul class="dropdown-menu-parent sbox-dd-menu">
<li>
<nav class="nav searchbox hidden-print">
<?= $this->layout()->searchbox ?>
@@ -221,7 +210,8 @@
$( '#main-navigation' ).on( 'affix.bs.affix', function(){
if( !$( window ).scrollTop() ) return false;
} );
- $('#search-main-dropdown').on('click', function (e) {
+ <?php /* still needed in bootstrap 3 for dropdown within dropdown */ ?>
+ $('#search-main-dropdown').on('click', function () {
$('.dropdown.sbox-dd').toggleClass( "open" );
});
});
diff --git a/themes/fid_adlr/templates/search/home.phtml b/themes/fid_adlr/templates/search/home.phtml
index 855760b93317aef29bb677db7e1b6393d4313130..dc80575e7542f2d7bd0567cdf85686dd193305e7 100644
--- a/themes/fid_adlr/templates/search/home.phtml
+++ b/themes/fid_adlr/templates/search/home.phtml
@@ -14,6 +14,19 @@ if (!isset($this->searchClassId)) {
$this->layout()->breadcrumbs = false;
?>
+<div class="home-text container">
+ <div class="headline">
+ <?= $this->transEsc("header_text") ?>
+ </div>
+ <div class="home-links">
+ <a class="navbar-header-link small" href="<?= "#" /* FIXME After merge of #15589 $this->url('myresearch/databases') */ ?>"><span
+ class="icon icon-arrow-right"></span> <?= $this->transEsc('Press Databases') ?></a>
+ <a class="navbar-header-link small"
+ href="<?php $this->currentPath()?>/Search/Results?filter%5B%5D=~de15fid_date%3A%5BNOW-30DAY%2FDAY+TO+NOW%5D&type=AllFields&filter%5B%5D=mega_collection%3A%22PDA+Print+VUB%22"><span
+ class="icon icon-arrow-right"></span> <?= $this->transEsc('New Items') ?></a>
+ </div>
+</div>
+
<div class="searchHomeContent">
<?php /* finc-specific: #7187@89bb6e70; VF moved the original BS code to a separate template: helpers - ils-offline.phtml - CK */ ?>
<?php
diff --git a/themes/fid_adlr/templates/search/searchTabs.phtml b/themes/fid_adlr/templates/search/searchTabs.phtml
index ac56ae1cf67707fb6f27169f599bceaae88c4f3b..2bae5bf86e257fe51fe829355a671c9433872f98 100644
--- a/themes/fid_adlr/templates/search/searchTabs.phtml
+++ b/themes/fid_adlr/templates/search/searchTabs.phtml
@@ -8,49 +8,59 @@
Filter<i class="icon icon-caret-down" aria-hidden="true"></i>
<!--i class="icon icon-chevron-up" aria-hidden="true"></i-->
</a>
- <span id="quickfilter-format-menu" class="dropdown-menu" aria-labelledby="quickfilter-format">
- <label class="additional-text-xs"><?=$this->transEsc('Apply Format Filters')?></label>
+ <div id="quickfilter-format-menu" class="dropdown-menu" aria-labelledby="quickfilter-format">
+ <label class="format-filter"><?=$this->transEsc('Apply Format Filters')?></label>
<?php foreach ($searchTabs as $tab): ?>
<span class="filter-option">
<?php if ($this->permission()->allowDisplay($tab['permission'])): ?>
- <input type="radio" name="format-pre-filter" id="filter-<?= $tab['label']?>" <?=$tab['selected'] ? 'checked' : ''?>
+ <input type="radio" name="format-pre-filter" id="filter-<?= str_replace(' ', '', $tab['label']) ?>" <?=$tab['selected'] ? 'checked' : ''?>
<?php if (isset($tab['hiddenFilters'])): ?>
value="<?=implode($filterDelimiter, $tab['hiddenFilters'])?>"
<?php endif; ?>
/>
- <label type="radio" for="filter-<?= $tab['label'] ?>"><?= $this->transEsc($tab['label']) ?></label>
+ <label for="filter-<?= str_replace(' ', '', $tab['label']) ?>"><?= $this->transEsc($tab['label']) ?></label>
<?php elseif ($block = $this->permission()->getAlternateContent($tab['permission'])): ?>
- <input type="radio" id="filter-<?= $tab['label'] . '_permission_denied' ?>" disabled />
- <label type="radio" for="filter-<?= $tab['label'] . '_permission_denied' ?>"><?=$block?></label>
+ <input type="radio" id="filter-<?= str_replace(' ', '', $tab['label']) . '_permission_denied' ?>" disabled />
+ <label for="filter-<?= str_replace(' ', '', $tab['label']) . '_permission_denied' ?>"><?=$block?></label>
<?php endif; ?>
</span>
<?php endforeach; ?>
- </span>
+ </div>
</div>
<?php endif; ?>
<script type="text/javascript">
- $("#searchForm").submit( function() {
+ $(document).ready(function() {
+ $("#searchForm span").click(function() {
+ if($("#searchForm").find(".quickfilter.dropdown.open") != undefined) {
+ $("#searchForm").find(".quickfilter.dropdown.open").removeClass("open");
+ }
+ if($("#searchForm").find(".nav-tabs.open") != undefined) {
+ $("#searchForm").find(".nav-tabs.open").removeClass("open");
+ }
+ });
- var delimiter = "<?php echo $filterDelimiter ?>";
- var selectedFilter = $(this).find('input[name=format-pre-filter]:checked');
+ $("#searchForm").submit( function() {
+ var delimiter = "<?php echo $filterDelimiter ?>";
+ var selectedFilter = $(this).find('input[name=format-pre-filter]:checked');
- // dont send placeholder for filters
- $(this).find('input[name=format-pre-filter]').attr("disabled", "disabled");
+ // dont send placeholder for filters
+ $(this).find('input[name=format-pre-filter]').attr("disabled", "disabled");
- if(!selectedFilter || !selectedFilter.attr("value")) {
- return true;
- }
+ if(!selectedFilter || !selectedFilter.attr("value")) {
+ return true;
+ }
- // send selected hidden filters
- $.each( selectedFilter.attr("value").split(delimiter), function( key, value ) {
- $("<input />").attr("type", "hidden")
- .attr("name", "hiddenFilters[]")
- .attr("value", value)
- .appendTo("#searchForm");
- });
+ // send selected hidden filters
+ $.each( selectedFilter.attr("value").split(delimiter), function( key, value ) {
+ $("<input />").attr("type", "hidden")
+ .attr("name", "hiddenFilters[]")
+ .attr("value", value)
+ .appendTo("#searchForm");
+ });
- return true;
+ return true;
+ });
});
</script>
<!-- fid_adlr: search - searchTabs - END -->
diff --git a/themes/fid_adlr/templates/search/searchbox.phtml b/themes/fid_adlr/templates/search/searchbox.phtml
index dd5cc7f571b9edbafcdcd101125dd4ea16d93027..cd1675f3e90e111dd5e211123f22cc715e259a15 100644
--- a/themes/fid_adlr/templates/search/searchbox.phtml
+++ b/themes/fid_adlr/templates/search/searchbox.phtml
@@ -87,7 +87,7 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
<?php /* adlr. adv- search */ ?>
<?php if ($advSearch): ?>
- <a href="<?=$this->url($advSearch) . ((isset($this->searchId) && $this->searchId) ? '?edit=' . $this->escapeHtmlAttr($this->searchId) : $hiddenFilterParams)?>" class="adv-srch-btn" role="button" rel="nofollow"><span><?=$this->transEsc("Advanced Search")?></span></a>
+ <br /><a href="<?=$this->url($advSearch) . ((isset($this->searchId) && $this->searchId) ? '?edit=' . $this->escapeHtmlAttr($this->searchId) : $hiddenFilterParams)?>" class="adv-srch-btn" role="button" rel="nofollow"><span><?=$this->transEsc("Advanced Search")?></span></a>
<?php endif; ?>
<?php /* adlr. adv- search - END */ ?>