From 278e5fdae08ceb530edb382570719ad85849cf63 Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Wed, 17 Mar 2021 08:58:35 +0100
Subject: [PATCH] refs #19300 [fid_adlr] restore search form design
* use float left for inputs, which was removed in finc 17720
* unset body padding top for xs
* fix modal on sm: re-add margin to show closing button (cross) for sm screens
* center refresh buttons vertically
* prevent overlapping shard checkboxes on alpha
* basic syntax refactoring
---
themes/fid_adlr/scss/_lightbox.scss | 8 +-
themes/fid_adlr/scss/compiled.scss | 78 ++++++++++++++-----
.../fid_adlr/templates/search/searchbox.phtml | 8 +-
3 files changed, 70 insertions(+), 24 deletions(-)
diff --git a/themes/fid_adlr/scss/_lightbox.scss b/themes/fid_adlr/scss/_lightbox.scss
index e2b8d218a6f..84e95e3b44e 100644
--- a/themes/fid_adlr/scss/_lightbox.scss
+++ b/themes/fid_adlr/scss/_lightbox.scss
@@ -21,8 +21,12 @@
}
}
-@media screen and (max-width: $screen-sm-max) {
- .modal-dialog {
+.modal-dialog {
+ @media screen and (max-width: $screen-sm-max) {
max-width: 100%;
}
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ margin: $grid-gutter-width;
+ }
}
\ No newline at end of file
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index 286fb5ec9cb..4e9e5c59103 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -86,6 +86,11 @@ body {
:hover {
outline: none;
}
+
+ // override finc 17720
+ @media (max-width: $screen-xs-max) {
+ padding-top: unset;
+ }
}
// HEADINGS
@@ -357,6 +362,7 @@ a.exclude {
.large-text {
font-size: em(24px);
line-height: em(45px);
+
&.light {
color: $asphalt;
}
@@ -400,19 +406,24 @@ a.exclude {
background: $amber;
border: $amber;
color: $black;
+
&:hover {
color: $black;
}
}
-.alert-info, .savedLists.alert.alert-info, .alert-success {
+.alert-info,
+.savedLists.alert.alert-info,
+.alert-success {
border: 3px solid $asphalt-dark;
border-radius: 0;
color: $state-info-text;
+
&:hover,
&:focus {
color: $state-info-text;
}
+
a {
color: $state-info-text;
}
@@ -521,6 +532,7 @@ a.exclude {
@media screen and (max-width: $screen-xs-max) {
width: 100%;
+
// FIXME; Pruefen, ob form-control einfach aus dem phtml-Template entfernt werden könnte
.searchForm,
.searchForm .form-control {
@@ -595,6 +607,11 @@ header,
#searchForm input[type='text'] {
@include default-border($white);
}
+
+ // overwrite finc changes of #17720
+ #searchForm input{
+ float: left;
+ }
}
// #17913 adjust BARF to adlr design
@@ -609,7 +626,10 @@ input[type='password']:hover {
outline-offset: 0;
}
-.close:hover, .adv-term-remove:hover, .close:focus, .adv-term-remove:focus {
+.adv-term-remove:focus,
+.adv-term-remove:hover,
+.close:focus,
+.close:hover {
outline: none;
}
@@ -756,7 +776,7 @@ input[type='checkbox']:hover,
}
}
-.menubar #register-menu .navbar-header-link {
+#register-menu .navbar-header-link {
@media (max-width: $mobile-navigation-menu-breakpoint) {
@include shift-main-menu-entries-to-navigation-overlay;
}
@@ -1668,6 +1688,7 @@ input.searchForm_lookfor {
form {
min-width: 100%;
}
+
select {
font-size: calc(#{$font-size-base} * .9);
font-weight: 600;
@@ -1704,31 +1725,38 @@ input.searchForm_lookfor {
.sort {
select {
max-width: unset;
+
@media screen and (max-width: $screen-lg-min) {
max-width: 180px;
}
}
}
- .limit, .sort {
+ .limit,
+ .sort {
label {
padding-top: 6px;
}
}
+
+ .limit-inner .btn,
+ .sort-inner .btn {
+ vertical-align: middle;
+ }
}
.mailsave {
span {
- margin-left: 0.8em;
+ margin-left: .8em;
@media screen and (min-width: $screen-sm-min) {
- margin-left: 0.3em;
+ margin-left: .3em;
position: relative;
top: 15px;
}
@media screen and (min-width: $screen-lg-min) {
- margin-left: 0.5em;
+ margin-left: .5em;
}
}
}
@@ -1775,9 +1803,11 @@ input.searchForm_lookfor {
.result-body {
color: $asphalt;
+
@media screen and (min-width: $screen-xl-min) {
width: 80%;
}
+
.result-formats {
padding-top: 1rem;
}
@@ -1818,7 +1848,7 @@ input.searchForm_lookfor {
text-align: right;
@media screen and (min-width: $screen-xl-min) {
- width: 20%;
+ width: 20%;
}
}
@@ -2000,9 +2030,9 @@ input.searchForm_lookfor {
.offcanvas-right .sidebar {
background: $white;
height: 100%;
+ padding: 1rem;
position: fixed;
overflow-y: auto;
- padding: 1rem;
right: -80vw;
top: 0;
transition: left .5s, right .5s;
@@ -2072,8 +2102,8 @@ input.searchForm_lookfor {
.container,
.footer {
background: transparent;
- max-width: 1284px;
border: 0;
+ max-width: 1284px;
}
&.collapsing {
@@ -2117,6 +2147,7 @@ input.searchForm_lookfor {
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
+
&:active,
&:focus,
&:hover {
@@ -2150,8 +2181,8 @@ input.searchForm_lookfor {
}
@media screen and (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
- position: absolute;
padding-top: em(20px);
+ position: absolute;
}
@media screen and (min-width: $screen-lg-min) {
@@ -2180,6 +2211,7 @@ input.searchForm_lookfor {
.record div[id^="side-panel-"] {
margin-left: 15px;
margin-right: 15px;
+
@media screen and (min-width: $screen-lg-min) {
width: 68%;
}
@@ -2207,7 +2239,7 @@ input.searchForm_lookfor {
ul > li {
list-style: none;
span {
- padding-right: 0.5em;
+ padding-right: .5em;
}
}
@@ -2241,6 +2273,7 @@ input.searchForm_lookfor {
text-align: inherit;
text-transform: uppercase;
width: 100%;
+
&::after {
float: right;
}
@@ -2252,6 +2285,7 @@ input.searchForm_lookfor {
@media screen and (min-width: $screen-lg-min) {
min-width: $main-content-container-min-width-lg;
+
.mainbody {
padding-right: 80px;
}
@@ -2275,6 +2309,7 @@ input.searchForm_lookfor {
// FIXME: Table definitions bitte in den ganz allgemeinen Teil, wo auf Forms usw. definiert werden, Schachtelung weitgehend unnötig
.table {
border: 0;
+
& tr {
border-bottom: 3px solid $midnight-medium;
@media screen and (min-width: $screen-lg-min) {
@@ -2298,6 +2333,7 @@ input.searchForm_lookfor {
}
}
}
+
.tab-content {
border: 0;
@@ -2324,7 +2360,9 @@ input.searchForm_lookfor {
}
}
color: $black;
- & > th, & > td {
+
+ & > th,
+ & > td {
padding: 4px;
}
}
@@ -2753,6 +2791,7 @@ div[class$="-tab"] {
.offcanvas .close-offcanvas {
width: auto;
margin: 0;
+
@media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
display: block;
}
@@ -2763,9 +2802,9 @@ div[class$="-tab"] {
footer {
// general footer styles
all: inherit;
+ background-image: url('../images/footer-dummy-background.png');
background-repeat: no-repeat;
background-size: cover;
- background-image: url('../images/footer-dummy-background.png');
color: $white;
a:hover,
@@ -2953,6 +2992,7 @@ footer {
label[data-required="true"][for]::after {
content: ' *';
}
+
textarea {
min-height: em(200px);
}
@@ -2961,20 +3001,20 @@ footer {
@import 'customForms';
#hierarchyTree .jstree-clicked {
- background-color: lighten($brand-primary,30%);
- padding-left: .5em;
+ background-color: lighten($brand-primary, 30%);
margin-left: -.5em;
+ padding-left: .5em;
}
.switchtab-info {
@media (max-width: $screen-xs-max) {
- display:none;
+ display: none;
}
padding-left: 1em;
padding-right: 1em;
.switchtab-text, .switchtab-heading, .switchtab-links {
- padding-top: .75em;
padding-bottom: .75em;
+ padding-top: .75em;
}
.switchtab-text {
hyphens: none;
@@ -2998,8 +3038,8 @@ footer {
}
.export-favorites a {
- text-decoration: none;
color: $white;
+ text-decoration: none;
}
// #17031 user tracking opt-out (iframe) - RL
diff --git a/themes/fid_adlr/templates/search/searchbox.phtml b/themes/fid_adlr/templates/search/searchbox.phtml
index 1206c608f9b..006badb02c3 100644
--- a/themes/fid_adlr/templates/search/searchbox.phtml
+++ b/themes/fid_adlr/templates/search/searchbox.phtml
@@ -98,9 +98,11 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
?>
<?php foreach ($shards as $shard => $val): ?>
<?php $isSelected = empty($selectedShards) || in_array($shard, $selectedShards); ?>
- <label for="checkbox_<?=$this->escapeHtmlAttr($shard)?>"><?=$this->transEsc($shard)?>
- <input type="checkbox" <?=$isSelected ? 'checked="checked" ' : ''?>name="shard[]" value='<?=$this->escapeHtmlAttr($shard)?>' id='checkbox_<?=$this->escapeHtmlAttr($shard)?>'/>
- </label>
+ <div>
+ <label for="checkbox_<?=$this->escapeHtmlAttr($shard)?>"><?=$this->transEsc($shard)?>
+ <input type="checkbox" <?=$isSelected ? 'checked="checked" ' : ''?>name="shard[]" value='<?=$this->escapeHtmlAttr($shard)?>' id='checkbox_<?=$this->escapeHtmlAttr($shard)?>'/>
+ </label>
+ </div>
<?php endforeach; ?>
<?php endif; ?>
</div>
--
GitLab