From 5e84f8de4ce245dca078929dd68413df28f1c43b Mon Sep 17 00:00:00 2001
From: Alexander Purr <purr@ub.uni-leipzig.de>
Date: Tue, 10 Jan 2023 13:39:40 +0100
Subject: [PATCH] refs #16307 [fid_adlr] better responsive tables

* reuse and adjust .table-resp-data & .table-resp-data-md from finc where fid_adlr default table styles dont work properly
** profile view
** search history
* remove old style .table-responsive (enabled only horizontal scrolling)
* profile menu; td::before color
---
 themes/fid_adlr/scss/_customVariables.scss    |  2 +-
 themes/fid_adlr/scss/components/_tables.scss  | 26 ++++++++++++++++---
 .../templates/myresearch/profile.phtml        |  7 ++---
 .../templates/search/history-table.phtml      |  4 +--
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index c043fd11f88..708e59eea06 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -193,7 +193,7 @@ $default-border-hover: 3px;
 $default-outline-hover-offset: 5px;
 $default-outline-hover-width: 3px;
 // Default border styles
-//$border-default-styles: 1px solid $border-color !default;
+$border-default-styles: 0px;
 
 
 // *****************************************************************
diff --git a/themes/fid_adlr/scss/components/_tables.scss b/themes/fid_adlr/scss/components/_tables.scss
index 2f4869d4958..09b037261db 100644
--- a/themes/fid_adlr/scss/components/_tables.scss
+++ b/themes/fid_adlr/scss/components/_tables.scss
@@ -78,8 +78,28 @@ table {
 // ************ Responsive data tables *****************************
 // *****************************************************************
 
-.table-responsive {
-  @media (max-width: $screen-xs-max) {
-    border: 0;
+// reuse and improve .table-resp-data & .table-resp-data-md from finc - #16306
+// exceptionally add mixin at component - only used here
+@mixin table-resp-data-additionals {
+  tbody > tr > td {
+    padding-left: calc(50% + 10px);
+  }
+  tbody > tr > td::before {
+    color: $oil;
+    font-weight: normal;
+    left: 20px;
+    top: 20px;
+  }
+}
+
+@media screen and (max-width: $screen-xs-max) {
+  .table-resp-data {
+    @include table-resp-data-additionals;
   }
 }
+
+@media screen and (max-width: $screen-md-max) {
+  .table-resp-data-md {
+    @include table-resp-data-additionals;
+  }
+}
\ No newline at end of file
diff --git a/themes/fid_adlr/templates/myresearch/profile.phtml b/themes/fid_adlr/templates/myresearch/profile.phtml
index b53915534da..fbf3c2d60d6 100644
--- a/themes/fid_adlr/templates/myresearch/profile.phtml
+++ b/themes/fid_adlr/templates/myresearch/profile.phtml
@@ -7,7 +7,7 @@
   $this->layout()->breadcrumbs = '<li><a href="' . $this->url('myresearch-home') . '">' . $this->transEsc('Your Account') . '</a></li> <li class="active">' . $this->transEsc('Profile') . '</li>';
 
   // Template for use by the renderArray helper:
-  $arrTemplate = '<tr><th>%%LABEL%%:</th><td> %%VALUE%%</td></tr>';
+  $arrTemplate = '<tr><th>%%LABEL%%:</th><td data-title="%%LABEL%%:">%%VALUE%%</td></tr>';
 
   // styling for user forms #15445
   $profile = $this->profile;
@@ -32,9 +32,7 @@
   <?=$this->flashmessages();?>
 
   <?php if (is_array($this->profile)): ?>
-    <?php /* fid_adlr: responsive tables via horizontal scrolling: add div with "table-responsive" #16767 */ ?>
-    <div class="table-responsive">
-    <table class="table table-striped">
+    <table class="table table-striped table-resp-data">
       <?=$this->renderArray(
         $arrTemplate,
         $profile,
@@ -55,7 +53,6 @@
         )
       )?>
   </table>
-  </div>
   <?php /* fid: changes user data #15405 */ ?>
   <a href="<?=$this->url('fid/user/update')?>" class="btn btn-primary"><?=$this->transEsc('fid::Edit Account')?></a>
   <?php elseif ('ils-none' !== $this->ils()->getOfflineMode() && $this->patronLoginView && !empty($this->patronLoginView->getTemplate())): ?>
diff --git a/themes/fid_adlr/templates/search/history-table.phtml b/themes/fid_adlr/templates/search/history-table.phtml
index d3502e8a5fc..3b86ead125d 100644
--- a/themes/fid_adlr/templates/search/history-table.phtml
+++ b/themes/fid_adlr/templates/search/history-table.phtml
@@ -5,8 +5,7 @@
 ?>
 <?php /* finc adds code for responsive data table here - CK */ ?>
 <?php /* fid_adlr: responsive tables via horizontal scrolling #16767 */ ?>
-<div class="table-responsive">
-<table class="search-history-table table-striped" id="<?=$this->showSaved ? 'saved-searches' : 'recent-searches'?>">
+<table class="search-history-table table-striped table-resp-data" id="<?=$this->showSaved ? 'saved-searches' : 'recent-searches'?>">
   <tr>
     <th width="20%"><?=$this->transEsc("history_time")?></th>
     <th><?=$this->transEsc("history_search")?></th>
@@ -70,5 +69,4 @@
     </tr>
   <?php endforeach; ?>
 </table>
-</div>
 <!-- fid_adlr: search - history-table - END -->
\ No newline at end of file
-- 
GitLab