Skip to content

Commit ccfcdfc

Browse files
matt-bernhardtmatt-bernhardt
authored
Merge pull request #52 from MITLibraries/post-178
Refactor item metadata display
2 parents 2c500ae + 1644d26 commit ccfcdfc

6 files changed

Lines changed: 157 additions & 5 deletions

File tree

‎asset/css/base.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎asset/scss/content/block-layout/_item-with-metadata.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,21 @@
1010
padding: 1rem;
1111
text-align: left;
1212

13-
dl {
13+
dl,
14+
table {
1415
.property {
1516
display: grid;
1617
grid-template-columns: 1fr 2fr;
1718
gap: 1rem;
1819
margin-bottom: 1rem;
1920

20-
dt {
21+
dt,
22+
th {
2123
grid-column: 1;
2224
}
2325

24-
dd {
26+
dd,
27+
td {
2528
grid-column: 2;
2629

2730
img {

‎asset/scss/content/resource-page/_all.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
@import "linked-resources";
33
@import "map";
44
@import "media-embed";
5+
@import "metadata";

‎asset/scss/content/resource-page/_dl.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
.values-container dl,
21
dl.resource-class,
32
dl.item-sets,
43
dl.site-pages {

‎asset/scss/content/resource-page/_metadata.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.values-container table {
2+
width: 100%;
3+
4+
caption {
5+
caption-side: top;
6+
text-align: left;
7+
padding-bottom: 1rem;
8+
}
9+
10+
tr {
11+
td {
12+
line-height: 1.2;
13+
padding-bottom: 0.75rem; // This achieves separation between values within a field group.
14+
padding-left: 1rem;
15+
vertical-align: top;
16+
word-break: break-word;
17+
}
18+
19+
th {
20+
text-align: left;
21+
vertical-align: top;
22+
width: 20%;
23+
}
24+
25+
// This achieves separation between field groups.
26+
&.property {
27+
td,
28+
th {
29+
padding-top: 1.5rem;
30+
}
31+
}
32+
}
33+
}
34+
35+
@media only screen and (max-width: $bp-screen-md) {
36+
.values-container table {
37+
tr {
38+
display: block;
39+
margin-bottom: 1em;
40+
41+
td {
42+
display: block;
43+
padding: unset;
44+
}
45+
46+
th {
47+
display: block;
48+
width: unset;
49+
}
50+
51+
&.property {
52+
td,
53+
th {
54+
padding-top: unset;
55+
}
56+
}
57+
}
58+
}
59+
}

‎view/common/resource-values.phtml‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<?php
2+
$translate = $this->plugin('translate');
3+
$escape = $this->plugin('escapeHtml');
4+
5+
if ($this->status()->isSiteRequest()) {
6+
$labelInfo = $this->siteSetting('property_label_information');
7+
$showLocale = (bool) $this->siteSetting('show_locale_label', true);
8+
$filterLocale = $this->siteSetting('filter_locale_values');
9+
$lang = $this->lang();
10+
$showValueAnnotations = (bool) $this->siteSetting('show_value_annotations', false);
11+
} else {
12+
$labelInfo = $this->setting('property_label_information');
13+
$showLocale = true;
14+
$filterLocale = false;
15+
$lang = null;
16+
$showValueAnnotations = true;
17+
}
18+
$filterLocaleCallback = function ($value) use ($lang) {
19+
$valueLang = $value->lang();
20+
return $valueLang == '' || strcasecmp($valueLang, $lang) === 0;
21+
};
22+
?>
23+
24+
<table class="metadata">
25+
<caption class="sr">Item metadata</caption>
26+
<?php
27+
foreach ($values as $term => $propertyData) :
28+
$propertyValues = $propertyData['values'];
29+
if ($filterLocale) {
30+
$propertyValues = array_filter($propertyValues, $filterLocaleCallback);
31+
}
32+
if (!$propertyValues) {
33+
continue;
34+
}
35+
$property = $propertyData['property'];
36+
$propertyLabel = $propertyData['alternate_label'] ?: $translate($property->label());
37+
if ('term' === $labelInfo) {
38+
$propertyTerm = $property->term();
39+
} elseif ('vocab' === $labelInfo) {
40+
$propertyTerm = $property->vocabulary()->label();
41+
} else {
42+
$propertyTerm = null;
43+
}
44+
$propertyRows = count($propertyValues);
45+
?>
46+
<tr class="property">
47+
<th scope="row" rowspan="<?php echo $propertyRows; ?>">
48+
<?php echo $escape($propertyLabel); ?>
49+
<?php if ($propertyTerm !== null) : ?>
50+
<span class="field-term">(<?php echo $escape($propertyTerm); ?>)</span>
51+
<?php endif; ?>
52+
</th>
53+
<?php foreach ($propertyValues as $key => $value) : ?>
54+
<?php if (0!=$key) {?>
55+
</tr><tr>
56+
<?php } ?>
57+
<?php
58+
$valueType = $value->type();
59+
$valueLang = $value->lang();
60+
$valueAnnotation = $value->valueAnnotation();
61+
$class = ['value'];
62+
if ('resource' == $valueType || strpos($valueType, 'resource') !== false) {
63+
$class[] = 'resource';
64+
$class[] = $escape($value->valueResource()->resourceName());
65+
} elseif ('uri' == $valueType) {
66+
$class[] = 'uri';
67+
}
68+
?>
69+
<td class="<?php echo implode(' ', $class); ?>" <?php echo ($valueLang) ? "lang='{$escape($valueLang)}'" : ''; ?>>
70+
<?php if ($showLocale && $valueLang) : ?>
71+
<span class="language"><?php echo $valueLang; ?></span>
72+
<?php endif; ?>
73+
<span class="value-content"><?php echo $filterLocale ? $value->asHtml($lang) : $value->asHtml(); ?></span>
74+
<?php if (!$value->isPublic()) : ?>
75+
<span class="o-icon-private" aria-role="tooltip" title="<?php echo $this->escapeHtml($translate('Private')); ?>" aria-label="<?php echo $this->escapeHtml($translate('Private')); ?>"></span>
76+
<?php endif; ?>
77+
<?php if ($valueAnnotation && $showValueAnnotations) : ?>
78+
<a href="#" class="expand" aria-label="<?php echo $this->escapeHtml($translate('Expand')); ?>">
79+
<span class="has-annotation o-icon-annotation" aria-role="tooltip" title="<?php echo $this->escapeHtml($translate('Has annotation')); ?>" aria-label="<?php echo $this->escapeHtml($translate('Has annotation')); ?>"></span>
80+
</a>
81+
<div class="collapsible annotation">
82+
<?php echo $valueAnnotation->displayValues(); ?>
83+
</div>
84+
<?php endif; ?>
85+
<?php $this->trigger('view.show.value', ['value' => $value]); ?>
86+
</td>
87+
<?php endforeach; ?>
88+
</tr>
89+
<?php endforeach; ?>
90+
</table>

0 commit comments

Comments
 (0)