Skip to content
Snippets Groups Projects
Commit b34c28f7 authored by Claas Kazzer's avatar Claas Kazzer Committed by Robert Lange
Browse files

refs #19737 [fid_bbi] record sidebar with ul/li 

* introduces initial 2 column styling
* revises column SCSS to use existing BBI styles
* adds correct headings
* turns result list sidebar tools into ul too

* Sidefacets as uls
** fine-tunes two-column layout
** introduces two-column layout to result list sidebar
** introduces heading to result list sidebar
** corrects heading hierarchy in result list sidebar

* sidebar toolbars as ULs
** fixes look across all media queries
** fine-tunes look on any device below 400px

* switch confounded translations for toolbar headlines

co-authored by: Gregor Gawol <gawol@ub.uni-leipzig.de>
co-authored by: Robert Lange <robert.lange@uni-leipzig.de>
parent d7757187
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 280 additions and 136 deletions
fid_bbi/languages/de.ini
+ 4
− 0
View file @ b34c28f7
...@@ -514,5 +514,9 @@ level_homepage = Link zur Homepage ...@@ -514,5 +514,9 @@ level_homepage = Link zur Homepage
sources_explanatory_line = "Das Rechercheportal des FID BBI vereint Titeldaten aus verschiedensten Datenquellen, die - vollständig oder gefiltert nach dem Fächerprofil des FID BBI - in das Portal übernommen werden. Die wichtigsten Informationen darüber, was in den einzelnen Quellen recherchiert werden kann, haben wir an dieser Stelle zusammengefasst. Um unsere Erläuterungen zu den einzelnen Datenquellen einzusehen, klicken Sie einfach auf den entsprechenden Listeneintrag." sources_explanatory_line = "Das Rechercheportal des FID BBI vereint Titeldaten aus verschiedensten Datenquellen, die - vollständig oder gefiltert nach dem Fächerprofil des FID BBI - in das Portal übernommen werden. Die wichtigsten Informationen darüber, was in den einzelnen Quellen recherchiert werden kann, haben wir an dieser Stelle zusammengefasst. Um unsere Erläuterungen zu den einzelnen Datenquellen einzusehen, klicken Sie einfach auf den entsprechenden Listeneintrag."
#19737
toolbar_add-to = "Merkfunktionen"
toolbar_process = "Funktionen zur Weiterverarbeitung"
#20590 #20590
Informatik = "Informatik, Wissen & Systeme" Informatik = "Informatik, Wissen & Systeme"
fid_bbi/languages/en.ini
+ 4
− 0
View file @ b34c28f7
...@@ -506,5 +506,9 @@ ezb_comment = "Notes" ...@@ -506,5 +506,9 @@ ezb_comment = "Notes"
#17038 #17038
level_homepage = Link to the homepage level_homepage = Link to the homepage
#19737
toolbar_add-to = "Save to ..."
toolbar_process = "Process entry"
#20590 #20590
Informatik = "Computer science, information, general works" Informatik = "Computer science, information, general works"
themes/fid_bbi/scss/blocks/record.scss
+ 2
− 1
View file @ b34c28f7
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
} }
} }
// record view sidebar buttons
.record-actions { .record-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -226,7 +227,7 @@ ...@@ -226,7 +227,7 @@
align-items: flex-start; align-items: flex-start;
display: block; display: block;
flex: 0 0 g(12.5); flex: 0 0 g(12.5);
margin: g(-.25 + 1) g(-.25) g(-.25); margin: g(-.25 + 1) g(-1.55) g(-.25);
@media #{$bp2} { @media #{$bp2} {
display: flex; display: flex;
......
themes/fid_bbi/scss/blocks/two-cols-list.scss 0 → 100644
+ 103
− 0
View file @ b34c28f7
// Two columns in List elements: Note: There is a separate .-columns class for p which defines paragraphs as two-columns
.two-cols {
column-count: 2;
column-gap: 1px;
margin-top: 0;
@media #{$bp2} {
margin-left: 0;
width: calc(100% - 35px);
}
@media #{$bp4} {
width: 100%;
}
// For other unstyled-list styles see unstyled-list.scss
&.unstyled-list {
// Li acts as wrapper for two column-list
li {
display: flex;
flex-wrap: wrap;
margin-bottom: g(-.5);
}
}
// Links/buttons inside two column (desktop) toolbars in results list and record list sidebars
.results-actions &,
.record-actions.-secondary & {
a,
.record-action {
@media #{$bp5} {
width: calc(100% - #{g(.5)});
}
}
}
}
// One column/general tool elements in sidebar: Behaviour @ breakpoints (see settings.scss)
// For other '.results-actions a' styles or '.record-actions' styles see results.scss and record.scss
// Result list toolbar element widths
.results-actions a {
width: 100%;
@media #{$bp4} {
width: calc(100% - 14px);
}
}
// Record view toolbar(s) and toolbar element widths.
// The toolbar is built like so:
// .record-actions.-primary (single column desktop view)
// h3
// ul
// li
// a .record-action-group (bookbag)
// a .record-action
// .record-actions.-secondary (two column desktop view)
// h3
// ul
// li
// a .record-action
.record-actions {
margin-left: 35px;
width: calc(100% - 75px);
@media #{$bp1} {
margin-left: 0;
width: 100%;
}
@media #{$bp2} {
margin-left: 0;
}
@media #{$bp2} {
width: 100%;
}
// Links/buttons inside the two-column (desktop view) elements (one column on XS, SM)
&.-secondary .record-action {
width: 100%;
}
// Width of entire UL element determines available space for buttons!
ul {
@media #{$bp1} {
margin-right: 35px;
width: calc(100% - 75px);
}
@media #{$bp2} {
margin-right: 0;
width: calc(100% - 35px);
}
@media #{$bp5} {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
}
themes/fid_bbi/scss/compiled.scss
+ 1
− 0
View file @ b34c28f7
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
@import 'blocks/tooltip'; @import 'blocks/tooltip';
@import 'blocks/to-top'; @import 'blocks/to-top';
@import 'blocks/unstyled-list'; @import 'blocks/unstyled-list';
@import 'blocks/two-cols-list';
@import 'blocks/worldcat'; @import 'blocks/worldcat';
@import 'plugins/slim-select'; @import 'plugins/slim-select';
......
themes/fid_bbi/templates/Recommend/SideFacets.phtml
+ 1
− 0
View file @ b34c28f7
...@@ -91,3 +91,4 @@ $filterList = array_merge($results->getParams()->getFilterList(true), $extraFilt ...@@ -91,3 +91,4 @@ $filterList = array_merge($results->getParams()->getFilterList(true), $extraFilt
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
<!-- fid_bbi: Recommend - SideFacets - END --> <!-- fid_bbi: Recommend - SideFacets - END -->
themes/fid_bbi/templates/RecordDriver/DefaultRecord/toolbar.phtml
+ 104
− 89
View file @ b34c28f7
...@@ -13,98 +13,113 @@ $cartId = $this->driver->getSourceIdentifier() . '|' . $this->driver->getUniqueI ...@@ -13,98 +13,113 @@ $cartId = $this->driver->getSourceIdentifier() . '|' . $this->driver->getUniqueI
<div class="record-sidebar"> <div class="record-sidebar">
<h2 class="sr-only"><?=$this->transEsc('Toolbar')?></h2> <h2 class="sr-only"><?=$this->transEsc('Toolbar')?></h2>
<div class="record-actions -primary"> <div class="record-actions -primary">
<?php <h3 class="sr-only"><?=$this->transEsc('toolbar_add-to')?></h3>
$cart = $this->cart(); <ul class="unstyled-list">
$id = $this->driver->getUniqueId(); <?php
$source = $this->driver->getSourceIdentifier(); $cart = $this->cart();
?> $id = $this->driver->getUniqueId();
<?php if ($cart->isActive()): ?> $source = $this->driver->getSourceIdentifier();
<?php $cartId = $source . '|' . $id; ?> ?>
<div <?php if ($cart->isActive()): ?>
class="record-action-group btn-bookbag-toggle" <li>
data-cart-id="<?=$this->escapeHtmlAttr($id)?>" <?php $cartId = $source . '|' . $id; ?>
data-cart-source="<?=$this->escapeHtmlAttr($source)?>" <div
> class="record-action-group btn-bookbag-toggle"
<a class="record-action cart-add hidden" href="javascript:;"> data-cart-id="<?=$this->escapeHtmlAttr($id)?>"
<?=$this->icon('pin')?> data-cart-source="<?=$this->escapeHtmlAttr($source)?>"
<?=$this->transEsc('Add to Book Bag')?> >
</a> <a class="record-action cart-add hidden" href="javascript:;">
<a class="record-action cart-remove hidden" href="javascript:;"> <?=$this->icon('pin')?>
<?=$this->icon('pin', 'icon -beat')?> <?=$this->transEsc('Add to Book Bag')?>
<?=$this->transEsc('Remove from Book Bag')?> </a>
</a> <a class="record-action cart-remove hidden" href="javascript:;">
</div> <?=$this->icon('pin', 'icon -beat')?>
<?php endif; ?> <?=$this->transEsc('Remove from Book Bag')?>
</a>
<?php if ($this->permission()->allowDisplay('feature.Favorites')): ?> </div>
<a </li>
class="record-action" <?php endif; ?>
data-lightbox <?php if ($this->permission()->allowDisplay('feature.Favorites')): ?>
href="<?=$this->recordLink()->getActionUrl($this->driver, 'Save')?>" <li>
title="<?=$this->transEsc('Add to favorites')?>" <a
rel="nofollow" class="record-action"
> data-lightbox
<?=$this->icon('star')?> href="<?=$this->recordLink()->getActionUrl($this->driver, 'Save')?>"
<?=$this->transEsc('Add to favorites')?> title="<?=$this->transEsc('Add to favorites')?>"
</a> rel="nofollow"
<?php elseif ($block = $this->permission()->getAlternateContent('feature.Favorites')): ?> >
<?=$block?> <?=$this->icon('star')?>
<?php endif; ?> <?=$this->transEsc('Add to favorites')?>
</a>
</li>
<?php elseif ($block = $this->permission()->getAlternateContent('feature.Favorites')): ?>
<li><?=$block?></li>
<?php endif; ?>
</ul>
</div> </div>
<div class="record-actions -secondary"> <div class="record-actions -secondary">
<a <h3 class="sr-only"><?=$this->transEsc('toolbar_process')?></h3>
class="record-action" <ul class="unstyled-list two-cols">
data-lightbox <li>
href="<?=$this->recordLink()->getActionUrl($this->driver, 'Cite')?>" <a
rel="nofollow" class="record-action"
> data-lightbox
<?=$this->icon('quote')?> href="<?=$this->recordLink()->getActionUrl($this->driver, 'Cite')?>"
<?=$this->transEsc('Cite this')?> rel="nofollow"
</a> >
<?=$this->icon('quote')?>
<?php /* <?=$this->transEsc('Cite this')?>
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="<?=$this->url('librarycards-deletecard') ?>?cardID=<?=urlencode($record['id'])?>"> </a>
<i class="fa fa-trash-o" aria-hidden="true"></i> <?=$this->transEsc('Delete')?> </li>
</a> <?php /*
<ul class="dropdown-menu"> <li>
<li><a href="<?=$this->url('librarycards-deletecard') ?>?cardID=<?=urlencode($record['id'])?>&amp;confirm=1"><?=$this->transEsc('confirm_dialog_yes') ?></a></li> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="<?=$this->url('librarycards-deletecard') ?>?cardID=<?=urlencode($record['id'])?>">
<li><a href="#"><?=$this->transEsc('confirm_dialog_no')?></a></li> <i class="fa fa-trash-o" aria-hidden="true"></i> <?=$this->transEsc('Delete')?>
</a>
<ul class="dropdown-menu">
<li><a href="<?=$this->url('librarycards-deletecard') ?>?cardID=<?=urlencode($record['id'])?>&amp;confirm=1"><?=$this->transEsc('confirm_dialog_yes') ?></a></li>
<li><a href="#"><?=$this->transEsc('confirm_dialog_no')?></a></li>
</ul>
</li>
*/?>
<?php $exportFormats = $this->export()->getFormatsForRecord($this->driver); ?>
<?php if (count($exportFormats) > 0): ?>
<li>
<?php // TODO: ARIA ?>
<a class="record-action dropdown-toggle" href="javascript:;" role="button" data-toggle="dropdown">
<?=$this->icon('download')?>
<?=$this->transEsc('Export')?>
</a>
<ul class="dropdown-menu -right" role="menu">
<?php foreach ($exportFormats as $exportFormat): ?>
<li>
<a <?php if ($this->export()->needsRedirect($exportFormat)): ?>target="<?=$this->escapeHtmlAttr($exportFormat)?>Main"
<?php endif; ?>href="<?=$this->recordLink()->getActionUrl($this->driver, 'Export')?>?style=<?=$this->escapeHtmlAttr($exportFormat)?>"
rel="nofollow"><?=$this->transEsc('Export to')?><?=$this->transEsc($this->export()->getLabelForFormat($exportFormat))?></a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
<li>
<a
class="record-action"
data-lightbox
href="<?=$this->recordLink()->getActionUrl($this->driver, 'Email')?>"
rel="nofollow"
>
<?=$this->icon('mail')?>
<?=$this->transEsc('Email this')?>
</a>
</li>
<li>
<a class="record-action" href="javascript:window.print()">
<?=$this->icon('printer')?>
<?=$this->transEsc('Print')?>
</a>
</li>
</ul> </ul>
*/ ?>
<?php $exportFormats = $this->export()->getFormatsForRecord($this->driver); ?>
<?php if (count($exportFormats) > 0): ?>
<?php // TODO: ARIA ?>
<a class="record-action dropdown-toggle" href="javascript:;" role="button" data-toggle="dropdown">
<?=$this->icon('download')?>
<?=$this->transEsc('Export')?>
</a>
<ul class="dropdown-menu -right" role="menu">
<?php foreach ($exportFormats as $exportFormat): ?>
<li>
<a <?php if ($this->export()->needsRedirect($exportFormat)): ?>target="<?=$this->escapeHtmlAttr($exportFormat)?>Main"
<?php endif; ?>href="<?=$this->recordLink()->getActionUrl($this->driver, 'Export')?>?style=<?=$this->escapeHtmlAttr($exportFormat)?>"
rel="nofollow"><?=$this->transEsc('Export to')?><?=$this->transEsc($this->export()->getLabelForFormat($exportFormat))?></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<a
class="record-action"
data-lightbox
href="<?=$this->recordLink()->getActionUrl($this->driver, 'Email')?>"
rel="nofollow"
>
<?=$this->icon('mail')?>
<?=$this->transEsc('Email this')?>
</a>
<a class="record-action" href="javascript:window.print()">
<?=$this->icon('printer')?>
<?=$this->transEsc('Print')?>
</a>
</div> </div>
</div> </div>
<!-- fid_bbi: recordDriver - DefaultRecord - toolbar - END --> <!-- fid_bbi: recordDriver - DefaultRecord - toolbar - END -->
themes/fid_bbi/templates/search/results.phtml
+ 61
− 46
View file @ b34c28f7
...@@ -149,64 +149,78 @@ $this->headScript()->appendFile("check_save_statuses.js"); ...@@ -149,64 +149,78 @@ $this->headScript()->appendFile("check_save_statuses.js");
<div id="sidebar-inner" class="sidebar-inner"> <div id="sidebar-inner" class="sidebar-inner">
<?php if ($recordTotal > 0): ?> <?php if ($recordTotal > 0): ?>
<div class="results-actions"> <div class="results-actions">
<h2 class="sr-only"><?=$this->transEsc('Toolbar')?></h2>
<?php // TODO: Content linked could still be broken, including lightboxes ?> <?php // TODO: Content linked could still be broken, including lightboxes ?>
<?php /* Turn items into list (BARF) - CK */ ?>
<ul class="unstyled-list two-cols">
<?php $cart = $this->cart(); ?> <?php $cart = $this->cart(); ?>
<?php if ($cart->isActive()): ?> <?php if ($cart->isActive()): ?>
<a <li>
id="cartItems" <a
href="<?=$this->url('cart-home')?>" id="cartItems"
data-lightbox href="<?=$this->url('cart-home')?>"
> data-lightbox
<?=$this->icon('pin')?> >
<?=$this->transEsc('Book Bag')?> <?=$this->icon('pin')?>
<?php // NOTE: Pin count updated via JS, must be <strong> ?> <?=$this->transEsc('Book Bag')?>
(<strong><?=count($cart->getItems())?></strong>) <?php // NOTE: Pin count updated via JS, must be <strong> ?>
</a> (<strong><?=count($cart->getItems())?></strong>)
</a>
</li>
<?php endif; ?> <?php endif; ?>
<a href="<?=$this->url('myresearch-favorites')?>"> <li>
<?=$this->icon('star')?> <a href="<?=$this->url('myresearch-favorites')?>">
<?=$this->transEsc('Favorites')?> <?=$this->icon('star')?>
</a> <?=$this->transEsc('Favorites')?>
</a>
<a href="<?=$this->results->getUrlQuery()->setViewParam('rss')?>"> </li>
<?=$this->icon('rss')?> <li>
<?=$this->transEsc('RSS Feed')?> <a href="<?=$this->results->getUrlQuery()->setViewParam('rss')?>">
</a> <?=$this->icon('rss')?>
<?=$this->transEsc('RSS Feed')?>
<a </a>
id="mailSearch<?=$this->escapeHtmlAttr($this->results->getSearchId())?>" </li>
href="<?=$this->url('search-email')?>" <li>
data-lightbox <a
> id="mailSearch<?=$this->escapeHtmlAttr($this->results->getSearchId())?>"
<?=$this->icon('mail')?> href="<?=$this->url('search-email')?>"
<?=$this->transEsc('Email')?> data-lightbox
</a> >
<?=$this->icon('mail')?>
<a <?=$this->transEsc('Email')?>
href="<?=$this->url('search-history')?>" </a>
data-lightbox </li>
> <li>
<?=$this->icon('clock')?> <a
<?=$this->transEsc('History')?> href="<?=$this->url('search-history')?>"
</a> data-lightbox
>
<?=$this->icon('clock')?>
<?=$this->transEsc('History')?>
</a>
</li>
<?php if ($this->accountCapabilities()->getSavedSearchSetting() === 'enabled'): ?> <?php if ($this->accountCapabilities()->getSavedSearchSetting() === 'enabled'): ?>
<?php if (is_numeric($this->results->getSearchId())): ?> <?php if (is_numeric($this->results->getSearchId())): ?>
<?php if ($this->results->isSavedSearch()): ?> <?php if ($this->results->isSavedSearch()): ?>
<a href="<?=$this->url('myresearch-savesearch')?>?delete=<?=urlencode($this->results->getSearchId())?>"> <li>
<?php // TODO: Change icon? ?> <a href="<?=$this->url('myresearch-savesearch')?>?delete=<?=urlencode($this->results->getSearchId())?>">
<?=$this->icon('save')?> <?php // TODO: Change icon? ?>
<?=$this->transEsc('Remove')?> <?=$this->icon('save')?>
</a> <?=$this->transEsc('Remove')?>
</a>
</li>
<?php else: ?> <?php else: ?>
<a href="<?=$this->url('myresearch-savesearch')?>?save=<?=urlencode($this->results->getSearchId())?>"> <li>
<?=$this->icon('save')?> <a href="<?=$this->url('myresearch-savesearch')?>?save=<?=urlencode($this->results->getSearchId())?>">
<?=$this->transEsc('Save')?> <?=$this->icon('save')?>
</a> <?=$this->transEsc('Save')?>
</a>
</li>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
</ul>
</div> </div>
<?php endif; ?> <?php endif; ?>
...@@ -217,3 +231,4 @@ $this->headScript()->appendFile("check_save_statuses.js"); ...@@ -217,3 +231,4 @@ $this->headScript()->appendFile("check_save_statuses.js");
</div> </div>
</div> </div>
<!-- fid_bbi: search - results - END --> <!-- fid_bbi: search - results - END -->
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