Skip to content
Snippets Groups Projects
Commit b506fd9e authored by Robert Lange's avatar Robert Lange Committed by Dorian Merz
Browse files

refs #16100 [fid_adlr] revision of viewport and containers 

* fix home page
* fix default pages
parent 83a3e819
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
themes/fid_adlr/scss/_customMixins.scss
+ 64
− 37
View file @ b506fd9e
// Custom Mixins for fid_adlr -- inherits from finc, which inherits from BS, which inherits from root // Custom Mixins for fid_adlr -- inherits from finc, which inherits from BS, which inherits from root
// FIXME: DIE MIXINS ERSCHEINEN MIR UNNÖTIG KOMPLEX; Zum Teil werden Sie an anderer Stelle nochmal definiert -- bitte verschlanken und prüfen; Im Idealfall deckt ein Mixin einen Grund-Zustand/ein Grund-Element ab -- damit bleibt alles übersichtlicher
@mixin accordeon ($type) { @mixin accordeon ($type) {
@include result-list-border($midnight-medium); @include result-list-border($midnight-medium);
...@@ -6,6 +7,7 @@ ...@@ -6,6 +7,7 @@
background-color: transparent; background-color: transparent;
color: $violet; color: $violet;
} }
[data-toggle="collapse"]::before { [data-toggle="collapse"]::before {
content: '\e927'; content: '\e927';
float: left; float: left;
...@@ -17,43 +19,50 @@ ...@@ -17,43 +19,50 @@
padding-right: 10px; padding-right: 10px;
} }
} }
[data-toggle="collapse"]::after { [data-toggle="collapse"]::after {
content: unset; content: unset;
} }
.collapsed::before { .collapsed::before {
content: '\e92F'; content: '\e92F';
float: left; float: left;
font-family: icomoon, sans-serif; font-family: icomoon, sans-serif;
@if $type == 'get-it' { @if $type == 'get-it' {
padding-left: 11px;
margin-left: -$get-it-button-offset-left; margin-left: -$get-it-button-offset-left;
padding-left: 11px;
} @else { } @else {
padding-right: 10px; padding-right: 10px;
} }
} }
.collapsed::after { .collapsed::after {
content: unset; content: unset;
} }
.collapse, .collapse,
.collapsing, .collapsing,
.facet { .facet {
border: 0; border: 0;
} }
.checkbox, .facet {
.checkbox,
.facet {
border: 0; border: 0;
//padding: 10px 15px; //padding: 10px 15px;
padding: .75em 1em; padding: .75em 1em;
width: 100%; width: 100%;
} }
.title { .title {
border: none; border: 0;
color: $azure; color: $azure;
font-family: $font-family-monospace; font-family: $font-family-monospace;
text-transform: uppercase; text-transform: uppercase;
} }
} }
@mixin default-background{ @mixin default-background {
background-image: url('../images/background-shape-small.png'); /* fallback */ background-image: url('../images/background-shape-small.png'); /* fallback */
background-image: url('../images/background-shape-small-mirrored.svg'), linear-gradient($midnight, $midnight); /* W3C */ background-image: url('../images/background-shape-small-mirrored.svg'), linear-gradient($midnight, $midnight); /* W3C */
background-position: 100% 20%; background-position: 100% 20%;
...@@ -102,6 +111,7 @@ ...@@ -102,6 +111,7 @@
display: inline-block; display: inline-block;
margin-right: 2rem; margin-right: 2rem;
padding-top: 0; padding-top: 0;
&:active, &:active,
&:hover, &:hover,
&:focus { &:focus {
...@@ -110,6 +120,7 @@ ...@@ -110,6 +120,7 @@
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
&.small { &.small {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -146,11 +157,12 @@ ...@@ -146,11 +157,12 @@
@media screen and (max-width: $screen-md-max) { @media screen and (max-width: $screen-md-max) {
height: 100%; height: 100%;
padding-top: $navbar-default-padding;
width: 9999px; width: 9999px;
} }
@media screen and (min-width: $screen-sm-min) { @media screen and (min-width: $screen-sm-min) {
padding-top: $navbar-default-padding; padding-top: $navbar-extended-padding;
} }
@media screen and (min-width: $screen-lg-min) { @media screen and (min-width: $screen-lg-min) {
...@@ -174,12 +186,14 @@ ...@@ -174,12 +186,14 @@
position: relative; position: relative;
text-decoration: none; text-decoration: none;
transition: none !important; transition: none !important;
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) { @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
font-size: $font-size-menu-sm; font-size: $font-size-menu-sm;
left: calc(#{$logo-max-width} / 2); left: calc(#{$logo-max-width} / 2);
letter-spacing: 2.87px; letter-spacing: 2.87px;
line-height: em($font-size-menu-sm); line-height: em($font-size-menu-sm);
} }
@media screen and (min-width: $mobile-navigation-menu-breakpoint + 1px) { @media screen and (min-width: $mobile-navigation-menu-breakpoint + 1px) {
color: $black; color: $black;
font-size: $font-size-menu-lg; font-size: $font-size-menu-lg;
...@@ -190,6 +204,7 @@ ...@@ -190,6 +204,7 @@
transition: none !important; transition: none !important;
} }
} }
li { li {
line-height: $line-height-submenu; line-height: $line-height-submenu;
list-style: none; list-style: none;
...@@ -214,13 +229,16 @@ ...@@ -214,13 +229,16 @@
li { li {
background: transparent; background: transparent;
display: inline-block; display: inline-block;
> a, a:active, a:focus { > a,
a:active,
a:focus {
background: transparent; background: transparent;
border: 0; border: 0;
color: $black; color: $black;
outline: none; outline: none;
text-transform: uppercase; text-transform: uppercase;
} }
&.active > a{ &.active > a{
font-weight: bolder; font-weight: bolder;
} }
...@@ -228,8 +246,7 @@ ...@@ -228,8 +246,7 @@
} }
@mixin fixed-navbar-search { @mixin fixed-navbar-search {
position: fixed;
top: 0;
z-index: z-index(search affix, 0); z-index: z-index(search affix, 0);
@media screen and (max-width: $screen-xs-max) { @media screen and (max-width: $screen-xs-max) {
...@@ -249,7 +266,7 @@ ...@@ -249,7 +266,7 @@
top: $navbar-header-height; top: $navbar-header-height;
width: 100%; width: 100%;
// Make DD-Button and inputs full wide // Make DD-Button and inputs full width
.sbox-dd .dropdown-toggle:not(.button-quickfilter-format) { .sbox-dd .dropdown-toggle:not(.button-quickfilter-format) {
@include default-btn-font($font-family-monospace); @include default-btn-font($font-family-monospace);
background: $azure; background: $azure;
...@@ -280,12 +297,13 @@ ...@@ -280,12 +297,13 @@
background: transparent; background: transparent;
border: 0; border: 0;
height: em($navbar-header-height-affix-sm); height: em($navbar-header-height-affix-sm);
left: calc(#{$logo-max-width}); left: calc(#{$logo-max-width} + #{$navbar-extended-padding});
padding: 0; padding: 0;
position: relative;
.adv-srch-btn { .adv-srch-btn {
font-size: medium; font-size: medium;
left: 162px; left: 189px;
position: absolute; position: absolute;
top: 71px; top: 71px;
} }
...@@ -322,34 +340,27 @@ ...@@ -322,34 +340,27 @@
} }
} }
@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-xl-min) { @media screen and (min-width: $screen-xl-min) {
right: 35%; left: calc(#{$logo-max-width} + 2 * #{$navbar-extended-padding});
} }
.searchbox { .searchbox {
@media screen and (min-width: $screen-sm-min) { @media screen and (min-width: $screen-sm-min) {
width: $search-form-width-affix-sm; width: $search-form-width-affix-sm;
} }
@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) { @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
width: $search-form-width-affix-md; width: $search-form-width-affix-md;
} }
@media screen and (min-width: $screen-lg-min) { @media screen and (min-width: $screen-lg-min) {
background: transparent; background: transparent;
height: $navbar-header-height-affix-sm; height: $navbar-header-height-affix-sm;
padding-left: 25px;
padding-right: 25px; padding-right: 25px;
padding-top: 18px; padding-top: 18px;
width: $search-form-width-affix-lg; width: $search-form-width-affix-lg;
} }
@media screen and (min-width: $screen-xl-min) { @media screen and (min-width: $screen-xl-min) {
max-width: $search-form-width-max; max-width: $search-form-width-max;
width: $search-form-width-xl; width: $search-form-width-xl;
...@@ -358,11 +369,13 @@ ...@@ -358,11 +369,13 @@
.searchForm { .searchForm {
width: 100%; width: 100%;
@media screen and (min-width: $screen-lg-min) { @media screen and (min-width: $screen-lg-min) {
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
display: -webkit-box; display: -webkit-box;
display: inline-flex; display: inline-flex;
.list-unstyled > li.quickfilter { .list-unstyled > li.quickfilter {
padding-top: calc(#{$search-filter-padding-top} + (#{$search-input-height-fixed} - #{$search-input-height-default}) / 2); padding-top: calc(#{$search-filter-padding-top} + (#{$search-input-height-fixed} - #{$search-input-height-default}) / 2);
} }
...@@ -371,14 +384,17 @@ ...@@ -371,14 +384,17 @@
.searchForm_lookfor { .searchForm_lookfor {
max-width: $search-form-width-max; max-width: $search-form-width-max;
@media screen and (min-width: $screen-sm-min) { @media screen and (min-width: $screen-sm-min) {
height: $search-input-height-affix-sm; height: $search-input-height-affix-sm;
width: $search-input-width-affix-sm; width: $search-input-width-affix-sm;
} }
@media screen and (min-width: $screen-md-min) { @media screen and (min-width: $screen-md-min) {
height: $search-input-height-affix-md; height: $search-input-height-affix-md;
width: $search-input-width-affix-md; width: $search-input-width-affix-md;
} }
@media screen and (min-width: $screen-lg-min) { @media screen and (min-width: $screen-lg-min) {
height: $search-input-height-affix-lg; height: $search-input-height-affix-lg;
width: $search-input-width-affix-lg; width: $search-input-width-affix-lg;
...@@ -441,7 +457,7 @@ ...@@ -441,7 +457,7 @@
outline: none; outline: none;
width: 100%; width: 100%;
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max){ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
width: em(126px); width: em(126px);
} }
...@@ -462,20 +478,16 @@ ...@@ -462,20 +478,16 @@
font-weight: bold; font-weight: bold;
} }
} }
a:hover, .dropdown-menu span.filter-option:hover {
}
} }
// Template to disable text selection highlighting // Template to disable text selection highlighting
@mixin noselect { @mixin noselect {
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */ -khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */ -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
} }
// SEARCH BOX MIXINS // SEARCH BOX MIXINS
...@@ -492,30 +504,38 @@ ...@@ -492,30 +504,38 @@
font-family: $font-family-monospace; font-family: $font-family-monospace;
font-size: $font-size-base; font-size: $font-size-base;
font-weight: bolder; font-weight: bolder;
@if $screen-border == 'mobile' { @if $screen-border == 'mobile' {
height: 40px; height: 40px;
} @else { } @else {
height: $search-input-height-fixed; height: $search-input-height-fixed;
} }
letter-spacing: 2px; letter-spacing: 2px;
@if $screen-border == 'mobile' { @if $screen-border == 'mobile' {
line-height: 35px; line-height: 35px;
} @else { } @else {
line-height: 18px; line-height: 18px;
} }
min-width: $search-filter-width-lg; min-width: $search-filter-width-lg;
@if $screen-border != 'mobile' { @if $screen-border != 'mobile' {
padding-left: 5px; padding-left: 5px;
padding-top: $navbar-default-padding; padding-top: $navbar-default-padding;
} }
position: relative; position: relative;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
@if $screen-border == 'mobile' { @if $screen-border == 'mobile' {
width: 118px; width: 118px;
} @else { } @else {
width: 120px; width: 120px;
} }
@if $screen-border == 'mobile' { @if $screen-border == 'mobile' {
.icon { .icon {
font-size: $imo-font-size-base; font-size: $imo-font-size-base;
...@@ -524,7 +544,9 @@ ...@@ -524,7 +544,9 @@
position: absolute; position: absolute;
} }
} }
&:hover, &:focus {
&:hover,
&:focus {
border-color: $white; border-color: $white;
} }
} }
...@@ -566,6 +588,7 @@ ...@@ -566,6 +588,7 @@
.nav.nav-tabs .dropdown-menu { .nav.nav-tabs .dropdown-menu {
// show select for hidden filters as "tabs" // show select for hidden filters as "tabs"
all: unset; all: unset;
span:hover { span:hover {
background: transparent; background: transparent;
} }
...@@ -580,17 +603,19 @@ ...@@ -580,17 +603,19 @@
@mixin search-filter-styles($is_collapsed, $is_mobile) { @mixin search-filter-styles($is_collapsed, $is_mobile) {
@if $is_collapsed { @if $is_collapsed {
input[type="radio"]{ input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
line-height: normal; line-height: normal;
margin: 10px 0 0; margin: 10px 0 0;
} }
label { label {
font: $font-family-sans-serif; font: $font-family-sans-serif;
min-width: 90%; min-width: 90%;
padding: .25em .5em; padding: .25em .5em;
vertical-align: middle; vertical-align: middle;
} }
.dropdown-menu { .dropdown-menu {
border-radius: 0; border-radius: 0;
display: grid; display: grid;
...@@ -606,11 +631,13 @@ ...@@ -606,11 +631,13 @@
width: $search-input-width-affix-sm; width: $search-input-width-affix-sm;
z-index: z-index(filter-dropdown, 0); z-index: z-index(filter-dropdown, 0);
} }
.filter-option { .filter-option {
display: block; display: block;
padding: 0 2.5px; padding: 0 2.5px;
width: 100%; width: 100%;
} }
} @else if $is_mobile == false { } @else if $is_mobile == false {
display: table; display: table;
font-family: $font-family-monospace; font-family: $font-family-monospace;
...@@ -627,11 +654,11 @@ ...@@ -627,11 +654,11 @@
} }
label { label {
@include search-filter-details(transparent, transparent, transparent, $font-family-monospace);
color: $white; color: $white;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@include search-filter-details(transparent, transparent, transparent, $font-family-monospace);
} }
.filter-option { .filter-option {
...@@ -654,7 +681,7 @@ ...@@ -654,7 +681,7 @@
border-right-color: $border-right-color; border-right-color: $border-right-color;
border-top-color: $border-top-color; border-top-color: $border-top-color;
color: $white; color: $white;
padding: 5px 5px 5px 5px; padding: 5px;
&:hover, &:hover,
&:focus { &:focus {
......
themes/fid_adlr/scss/_customVariables.scss
+ 12
− 3
View file @ b506fd9e
// Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root // Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root
// see Bootstrap's _variables.scss for default values // see Bootstrap's _variables.scss for default values
// Fixme bitte bereinigen, was nicht gebraucht wird, raus!
// FONTS // FONTS
// ubuntu-mono-regular - latin // ubuntu-mono-regular - latin
@font-face { @font-face {
...@@ -287,12 +289,12 @@ $search-form-width-affix-sm: 100%; ...@@ -287,12 +289,12 @@ $search-form-width-affix-sm: 100%;
$search-form-width-affix-md: 100%; $search-form-width-affix-md: 100%;
// ++ Height and width of the search box - LARGE DESKTOP // ++ Height and width of the search box - LARGE DESKTOP
$search-form-width-affix-lg: 600px; $search-form-width-affix-lg: 590px;
$search-form-width-home-lg: 1000px; $search-form-width-home-lg: 1000px;
// ++ Height and width of the search box - EXTRA LARGE DESKTOP // ++ Height and width of the search box - EXTRA LARGE DESKTOP
$search-form-width-max: 1000px; $search-form-width-max: 1000px;
$search-form-width-xl: 99%; $search-form-width-xl: 690px;
$search-form-width-home-xl: $search-form-width-home-lg; $search-form-width-home-xl: $search-form-width-home-lg;
// ++ Height and width of the default search input field // ++ Height and width of the default search input field
...@@ -315,6 +317,7 @@ $search-filter-width-lg: 100px; ...@@ -315,6 +317,7 @@ $search-filter-width-lg: 100px;
$search-panel-width-xs-md: 100%; $search-panel-width-xs-md: 100%;
$search-toggle-padding-bottom-top: 40px; $search-toggle-padding-bottom-top: 40px;
$search-padding-sm-md: 40px; $search-padding-sm-md: 40px;
$seachbox-width-lg: 710px;
// ++ Height of textbox with adlr claim in header (home page) // ++ Height of textbox with adlr claim in header (home page)
$home-text-top-padding-xs: 100px; $home-text-top-padding-xs: 100px;
...@@ -326,10 +329,16 @@ $home-text-box-height-lg: 470px; ...@@ -326,10 +329,16 @@ $home-text-box-height-lg: 470px;
$home-text-bottom-padding-xs: 500px; $home-text-bottom-padding-xs: 500px;
$home-text-bottom-padding-sm: 400px; $home-text-bottom-padding-sm: 400px;
$home-text-bottom-padding-lg: 700px; $home-text-bottom-padding-lg: 700px;
$home-text-left-margin-sm: 25px;
$home-text-left-margin-lg: 0; $home-text-left-margin-lg: 0;
$home-text-left-margin-xl: 50px;
$home-services-sub-headline-offset: 50px; $home-services-sub-headline-offset: 50px;
//// FIXME TEST width
$screen-lg-test: 1170px;
//// Maximum designed body width
$max-designed-body-width: 1926px;
//// Breadcrumbs //// Breadcrumbs
//$breadcrumb-bg: $brand-primary !default; //$breadcrumb-bg: $brand-primary !default;
...@@ -454,7 +463,7 @@ $z-index: ( ...@@ -454,7 +463,7 @@ $z-index: (
} }
// FUNCTIONS - END // FUNCTIONS - END
$screen-xl: 1450px !default; $screen-xl: 1600px !default; // FIXME EXPERIMENTAL
$screen-xl-min: $screen-xl !default; $screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default; $screen-lg-max: $screen-xl - 1 !default;
......
themes/fid_adlr/scss/compiled.scss
+ 394
− 225
View file @ b506fd9e
This diff is collapsed.
themes/fid_adlr/templates/header.phtml
+ 21
− 18
View file @ b506fd9e
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<?php /* This nav element is the sticky element in the header <?php /* This nav element is the sticky element in the header
- use affix and not navbar-fixed-top! - use affix and not navbar-fixed-top!
- affix is applied to ALL .navbar elements via JS in layout.phtml - CK */ ?> - affix is applied to ALL .navbar elements via JS in layout.phtml - CK */ ?>
<?php $data_offset_top_affix = 104 ?> <?php $data_offset_top_affix = 85 ?>
<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-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" --> <!--div role="navigation" class="banner container navbar affix" id="main-navigation" -->
<!-- fid_adlr: navigation --> <!-- fid_adlr: navigation -->
...@@ -192,25 +192,28 @@ ...@@ -192,25 +192,28 @@
<!-- fid_adlr: navigation - END --> <!-- fid_adlr: navigation - END -->
<?php /* adlr-specific header text on home page - END */ ?> <?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="<?= $data_offset_top_affix ?>" id="searchbox"> <?php if ($this->layout()->searchbox !== false): ?>
<div class="dropdown sbox-dd"> <div class="search-wrapper container">
<?php /* no data-toggle: .open dropdown-menu of sbox manually to prevent interdependence-bug with dropdown quickfilter(s) within sbox - RL */ ?> <div id="searchbox" class="search container navbar collapse in affix-top" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>">
<button class="btn btn-primary dropdown-toggle" type="button" id="search-main-dropdown"> <div class="dropdown sbox-dd">
<span class="text-open"><?= $this->transEsc("Open Search") ?><span class="icon icon-chevron-down"></span></span> <?php /* no data-toggle: .open dropdown-menu of sbox manually to prevent interdependence-bug with dropdown quickfilter(s) within sbox - RL */ ?>
<span class="text-close"><?= $this->transEsc("Close Search") ?><span <button class="btn btn-primary dropdown-toggle" type="button" id="search-main-dropdown">
class="icon icon-chevron-up"></span></span> <span class="text-open"><?= $this->transEsc("Open Search") ?><span class="icon icon-chevron-down"></span></span>
</button> <span class="text-close"><?= $this->transEsc("Close Search") ?><span
<ul class="dropdown-menu-parent sbox-dd-menu"> class="icon icon-chevron-up"></span></span>
<li> </button>
<nav class="nav searchbox hidden-print"> <ul class="dropdown-menu-parent sbox-dd-menu">
<?= $this->layout()->searchbox ?> <li>
</nav> <nav class="nav searchbox hidden-print">
</li> <?= $this->layout()->searchbox ?>
</ul> </nav>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment