From 28cb7765716a33926cbfbee4beff78e5006646e8 Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Wed, 27 Nov 2019 16:14:10 +0100
Subject: [PATCH] refs #16519 [fid_adlr] fix overlapping search string and
settings icon * add padding right for search input and different screens *
refactor start page for small screens / remove obsolete margin
---
themes/fid_adlr/scss/_customVariables.scss | 3 ++-
themes/fid_adlr/scss/compiled.scss | 14 +++++++++-----
2 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index 0429069caf2..f750346d503 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -300,6 +300,7 @@ $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-xs: 75%;
$search-input-width-affix-sm: 75%;
$search-input-width-affix-md: 80%;
$search-input-width-affix-lg: 90%;
@@ -320,7 +321,7 @@ $search-padding-sm-md: 40px;
$seachbox-width-lg: 710px;
// ++ Height of textbox with adlr claim in header (home page)
-$home-text-top-padding-xs: 100px;
+$home-text-top-padding-xs: 90px;
$home-text-top-padding-sm: 0;
$home-text-top-padding-lg: 0;
$home-text-box-height-xs: 300px;
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index 1afc759ec64..ce093404a63 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -1035,7 +1035,6 @@ body:not(.template-name-home) {
// Add correct data for font-size, letter-spacing, lineheight, texttransform
@include default-headings-font(26px, 1.7px, 36px, none);
height: $home-text-box-height-xs;
- margin-right: 5%;
margin-left: 0;
max-width: calc(#{$screen-xs-max} / 2);
padding-bottom: $home-text-bottom-padding-xs;
@@ -1051,7 +1050,7 @@ body:not(.template-name-home) {
height: $home-text-box-height-sm;
margin-bottom: 70px;
margin-left: $home-text-left-margin-sm;
- margin-top: calc(#{$navbar-header-height} + 50px);
+ margin-top: calc(#{$navbar-header-height} + 30px);
padding-bottom: $home-text-bottom-padding-sm;
padding-left: 0;
padding-right: 0;
@@ -1298,8 +1297,13 @@ input.searchForm_lookfor {
background-color: transparent;
height: $search-input-height-fixed;
+ @media screen and (max-width: $screen-xs-max) {
+ padding-right: em(60px);
+ }
+
@media screen and (min-width: $screen-sm-min) {
height: $search-input-height-sm;
+ padding-right: em(45px);
width: $search-input-width-sm;
}
@@ -1380,15 +1384,15 @@ input.searchForm_lookfor {
@media screen and (max-width: $screen-xs-max) {
height: $search-input-height-fixed;
- left: 90%;
+ right: calc(100% - #{$search-input-width-affix-xs} - 18%);
}
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- left: calc(#{$search-input-width-affix-sm} - 2%);
+ right: calc(100% - #{$search-input-width-affix-sm});
}
@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- left: calc(#{$search-input-width-affix-md} - 2%);
+ right: calc(100% - #{$search-input-width-affix-md});
}
@media screen and (min-width: $screen-lg-min) {
--
GitLab