From e1f97c228e18eac2e9b8a882dae8b03761441e97 Mon Sep 17 00:00:00 2001
From: Aspectis <tobias@aspectis.net>
Date: Wed, 10 Mar 2021 12:55:54 +0100
Subject: [PATCH] refs #19244 [fid_bbi] improve RVK styling
* Style RVK code as badge
* Increase margins
* Fix dropdown background
* On small screens, break code and label into separate lines
* Remove border
* Move SCSS code to separate file
* Simplify template
---
themes/fid_bbi/scss/blocks/icon.scss | 5 +-
themes/fid_bbi/scss/blocks/rvk.scss | 38 ++++++++++++++
themes/fid_bbi/scss/compiled.scss | 1 +
themes/fid_bbi/scss/util/hacks.scss | 5 --
.../DefaultRecord/data-rvkNotation.phtml | 49 +++++++++----------
5 files changed, 66 insertions(+), 32 deletions(-)
create mode 100644 themes/fid_bbi/scss/blocks/rvk.scss
diff --git a/themes/fid_bbi/scss/blocks/icon.scss b/themes/fid_bbi/scss/blocks/icon.scss
index 4e4eb2943c9..5b72e9356a8 100644
--- a/themes/fid_bbi/scss/blocks/icon.scss
+++ b/themes/fid_bbi/scss/blocks/icon.scss
@@ -32,14 +32,17 @@
.link-with-icon {
margin-left: g(1.25);
+ position: relative;
- // Make icon clickable
+ // Make icon and gap clickable
&::before {
content: '';
display: block;
height: g();
+ left: 0;
margin-left: g(-1.25);
position: absolute;
+ top: 0;
width: g(1.25);
}
diff --git a/themes/fid_bbi/scss/blocks/rvk.scss b/themes/fid_bbi/scss/blocks/rvk.scss
new file mode 100644
index 00000000000..6726d031a22
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/rvk.scss
@@ -0,0 +1,38 @@
+.rvk_code {
+ background: $link-color;
+ color: $white;
+ display: inline-block;
+ font-size: $font-size-small;
+ font-weight: bold;
+ line-height: g(.75);
+ margin-right: g(.5);
+ margin-top: g(.25 / 2);
+ min-width: g(3); // Fit "AB 12345"
+ padding: 0 g(.25);
+
+ @include hover {
+ background: $link-hover-color;
+ color: #fff;
+ }
+}
+
+.rvk_label {
+ margin: 0 0 g(.5);
+
+ @media #{$bp1} {
+ align-items: flex-start;
+ display: flex;
+ margin: 0;
+ }
+}
+
+.rvk_notation {
+ background: $shade-weak;
+ height: auto !important; // override height set by JS
+ margin: 0 0 g(.75);
+ padding: g(.25);
+
+ @media #{$bp1} {
+ margin-top: g(.25);
+ }
+}
diff --git a/themes/fid_bbi/scss/compiled.scss b/themes/fid_bbi/scss/compiled.scss
index d10da652ae1..bcb864fe8fe 100644
--- a/themes/fid_bbi/scss/compiled.scss
+++ b/themes/fid_bbi/scss/compiled.scss
@@ -46,6 +46,7 @@
@import 'blocks/record';
@import 'blocks/result';
@import 'blocks/results';
+@import 'blocks/rvk';
@import 'blocks/search';
@import 'blocks/sidebar';
@import 'blocks/sources-list';
diff --git a/themes/fid_bbi/scss/util/hacks.scss b/themes/fid_bbi/scss/util/hacks.scss
index 401440ebf73..e7f54e9d792 100644
--- a/themes/fid_bbi/scss/util/hacks.scss
+++ b/themes/fid_bbi/scss/util/hacks.scss
@@ -107,11 +107,6 @@ a.active {
}
}
-.collapse.notation {
- background: $shade-weak;
- padding: g(.25);
-}
-
// Togglable item list inside form
#itemhide {
width: 100%;
diff --git a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-rvkNotation.phtml b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-rvkNotation.phtml
index c18e73db45f..f8683ccad93 100644
--- a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-rvkNotation.phtml
+++ b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-rvkNotation.phtml
@@ -13,37 +13,34 @@
?>
<?php // partial copied from themes/finc/templates/RecordTab/topics.phtml ?>
-<?php $i = 0; ?>
-<?php foreach ($data as $item): ?>
- <?php // no linebreak after last item ?>
- <?=$i > 0 ? '<br>' : ''?>
-
- <span>
- <a href="<?=$this->record($this->driver)->getLink('rvk', $item['rvk'])?>">
- <?=$item['rvk']?>
- </a>
- </span>
+<?php foreach ($data as $index => $item): ?>
+ <div class="rvk_label">
+ <div>
+ <a class="rvk_code" href="<?=$this->record($this->driver)->getLink('rvk', $item['rvk'])?>">
+ <?=$item['rvk']?>
+ </a>
+ </div>
- <?php if (isset($item['name'])): ?>
- |
- <a
- class="toggle link-with-icon"
- role="button"
- data-toggle="collapse"
- href="#collapse_rvk_<?=$i?>"
- aria-expanded="false"
- >
- <?=$this->icon('small/chevron-down')?>
- <?=$item['name']?>
- </a>
- <?php endif; ?>
+ <?php if (isset($item['name'])): ?>
+ <div>
+ <a
+ class="toggle link-with-icon"
+ role="button"
+ data-toggle="collapse"
+ href="#collapse_rvk_<?=$index?>"
+ aria-expanded="false"
+ >
+ <?=$this->icon('small/chevron-down')?>
+ <?=$item['name']?>
+ </a>
+ </div>
+ <?php endif; ?>
+ </div>
<?php if (isset($item['level']) && is_array($item['level'])): ?>
- <div id="collapse_rvk_<?=$i?>" class="collapse notation">
+ <div id="collapse_rvk_<?=$index?>" class="collapse notation rvk_notation">
<?=$this->render('Helpers/nestedList.phtml', ['array' => $item['level']])?>
</div>
<?php endif; ?>
-
- <?php $i++; ?>
<?php endforeach; ?>
<!-- fid_bbi: RecordDriver - DefaultRecord - data-rvkNotation - END -->
--
GitLab