Skip to content

Commit 89b8243

Browse files
bbpennelbbpennel
authored
BXC-4807/4757/4799 - Thumbnail size, linking, and pagination. Admin spacing (#1856)
* Add asLink attribute for thumbnails to allow thumbnails to not be links, set this attribute for full record thumbnails * Change thumbnail sizes from 64px and 128px to 160px and 250px. Thumbnail component now defaults to medium size, where both medium and small use the 'small' thumbnail image size. Only the gallery view uses large at the moment, whereas before everything used large * Convert pagination to bulma. Always shows 7 pages now, if there are at least 7 pages * Admin ui spacing fixes. Also cleaned up some dead code * Update pagination colors to meet accessability requirements * Review updates
1 parent 50e9f23 commit 89b8243

File tree

22 files changed

+317
-288
lines changed

22 files changed

+317
-288
lines changed

Diff for: ‎static/css/admin/admin_forms.css

+1-7
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
}
122122

123123
.edit_form p {
124-
padding-top: 7px;
124+
margin: 10px 0;
125125
text-align: left;
126126
}
127127

@@ -382,12 +382,6 @@
382382
color: #555;
383383
}
384384

385-
#run_enhancements_form #run_enhancements_force {
386-
margin-left: 0;
387-
margin-right: 0.5em;
388-
}
389-
390-
391385

392386
.file_browse_dialog {
393387
text-align: left;

Diff for: ‎static/css/admin/cdradmin.css

+8
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ body {
1111
width: inherit;
1212
}
1313

14+
.contentarea {
15+
margin: 20px;
16+
}
17+
1418
.contentarea.nobottom {
1519
margin-bottom: 0;
1620
}
@@ -26,6 +30,10 @@ h1 {
2630
padding: 0 0 1em 0;
2731
}
2832

33+
p {
34+
line-height: 1.3rem;
35+
}
36+
2937
.fullwidth {
3038
width: 100%;
3139
}

Diff for: ‎static/css/cdrui_styles.css

+14-9
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,24 @@
2929
background-position: top center;
3030
background-repeat: no-repeat;
3131
background-size: contain;
32-
width: 64px;
33-
height: 64px;
32+
width: 100px;
33+
height: 100px;
3434
margin: 0 auto;
3535
}
3636

3737
.thumbnail.thumbnail-size-medium .thumbnail-viewer {
38-
width: 112px;
39-
height: 112px;
38+
width: 160px;
39+
height: 160px;
40+
41+
@media screen and (max-width: 768px) {
42+
width: 125px;
43+
height: 125px;
44+
}
4045
}
4146

4247
.thumbnail.thumbnail-size-large .thumbnail-viewer {
43-
width: 128px;
44-
height: 128px;
48+
width: 250px;
49+
height: 250px;
4550
margin-top: .25rem;
4651
}
4752

@@ -75,15 +80,15 @@
7580
}
7681

7782
.thumbnail .placeholder {
78-
font-size: 64px;
83+
font-size: 100px;
7984
}
8085

8186
.thumbnail.thumbnail-size-medium .placeholder {
82-
font-size: 112px;
87+
font-size: 160px;
8388
}
8489

8590
.thumbnail.thumbnail-size-large .placeholder {
86-
font-size: 128px;
91+
font-size: 250px;
8792
}
8893

8994
.thumbnail-badge .background {

Diff for: ‎static/css/sass/cdr_ui_styles.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ p.spacing {
271271
}
272272

273273
img.data-thumb {
274-
max-width: 60px;
274+
max-width: 100px;
275275
}
276276

277277
.child-records {
@@ -455,6 +455,11 @@ table.dataTable {
455455
top: 0;
456456
}
457457
}
458+
459+
img + .thumbnail-badge {
460+
margin-left: 85px !important;
461+
margin-top: -20px !important;
462+
}
458463
}
459464

460465
/* MODs display for work and file pages, plus modalMetadata.vue component */
@@ -492,7 +497,7 @@ table.dataTable {
492497
.relateditem {
493498
.thumbnail {
494499
.thumbnail-badge {
495-
right: 40px;
500+
right: 10px;
496501
}
497502

498503
.thumbnail-viewer {

Diff for: ‎static/js/admin/vue-cdr-admin/src/components/chompb/preIngest.vue

+11-11
Original file line numberDiff line numberDiff line change
@@ -140,18 +140,18 @@ export default {
140140
#chompb-preingest-ui {
141141
width: 96%;
142142
margin: 25px auto;
143-
}
144143

145-
p {
146-
text-align: center;
147-
margin-top: 50px;
148-
}
144+
p {
145+
text-align: center;
146+
margin-top: 50px;
147+
}
149148

150-
#copy-msg {
151-
padding: 15px;
152-
position: absolute;
153-
right: 25px;
154-
top: 0;
155-
width: auto;
149+
#copy-msg {
150+
padding: 15px;
151+
position: absolute;
152+
right: 25px;
153+
top: 0;
154+
width: auto;
155+
}
156156
}
157157
</style>

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/adminUnit.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="full_record pb-4">
33
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
44
<div class="column is-narrow">
5-
<thumbnail :thumbnail-data="recordData"></thumbnail>
5+
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
66
</div>
77
<div class="column content is-medium">
88
<h2 :class="isDeleted" class="title is-2 is-text-unc-blue">

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="full_record">
33
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
44
<div class="column is-narrow-desktop is-5-mobile" :class="isDeleted">
5-
<thumbnail :thumbnail-data="recordData"></thumbnail>
5+
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
66
<div class="download-jump mt-5 has-text-centered">
77
<a class="button action is-primary is-responsive" :href="filesLink">
88
<span class="icon"><i class="fa fa-download" aria-hidden="true"></i></span><span>Skip to Download</span>

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="full_record">
33
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
44
<div class="column is-narrow-desktop is-5-mobile" :class="{restrictedContent: 'is-8'}">
5-
<thumbnail :thumbnail-data="recordData"></thumbnail>
5+
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
66
</div>
77
<div class="column content is-7-mobile pb-4">
88
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/fileList.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,8 @@ export default {
149149

150150
if ('thumbnail_url' in row && this.hasPermission(row,'viewAccessCopies')) {
151151
const thumbnail_title = this.$t('full_record.thumbnail_title', { title: row.title })
152-
img = `<img class="data-thumb" loading="lazy" src="${row.thumbnail_url}"` +
152+
const thumbnail_url = row.thumbnail_url.replace('/large', '/small');;
153+
img = `<img class="data-thumb" loading="lazy" src="${thumbnail_url}"` +
153154
` alt="${thumbnail_title}">`;
154155
} else {
155156
const thumbnail_default = this.$t('full_record.thumbnail_default');

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/fileRecord.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="full_record">
33
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
44
<div class="column is-narrow" :class="isDeleted">
5-
<thumbnail :thumbnail-data="recordData"></thumbnail>
5+
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
66
</div>
77
<div class="column content">
88
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/folderRecord.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="full_record">
33
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
44
<div class="column is-narrow" :class="{restrictedContent: 'is-8'}">
5-
<thumbnail :thumbnail-data="recordData"></thumbnail>
5+
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
66
</div>
77
<div class="column content pb-4">
88
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">

Diff for: ‎static/js/vue-cdr-access/src/components/full_record/thumbnail.vue

+32-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<router-link :to="linkToPath" :title="tooltip" :aria-label="linkAltText" class="thumbnail" :class="imgClasses">
3-
<div v-if="src !== ''" :style="{ 'background-image': 'url(' + objectData.thumbnail_url + ')'}"
2+
<component :is="wrapperTag" :to="linkToPath" v-bind="linkAttributes" class="thumbnail" :class="imgClasses">
3+
<div v-if="src !== ''" :style="{ 'background-image': 'url(' + src + ')'}"
44
:aria-label="imageAltText"
55
role="img"
66
class="thumbnail-viewer"
@@ -12,7 +12,7 @@
1212
<i class="fas fa-stack-1x foreground" :class="badgeIcon"></i>
1313
</div>
1414
</div>
15-
</router-link>
15+
</component>
1616
</template>
1717

1818
<script>
@@ -37,7 +37,11 @@ export default {
3737
},
3838
size: {
3939
type: String,
40-
default: 'large'
40+
default: 'medium'
41+
},
42+
asLink: {
43+
type: Boolean,
44+
default: true
4145
}
4246
},
4347
@@ -48,6 +52,19 @@ export default {
4852
},
4953
5054
computed: {
55+
wrapperTag() {
56+
return this.asLink ? 'router-link' : 'div';
57+
},
58+
59+
linkAttributes() {
60+
// Return attributes only if the wrapper is a router-link
61+
return this.asLink ? {
62+
title: this.tooltip,
63+
'aria-label': this.linkAltText,
64+
}
65+
: {};
66+
},
67+
5168
altText() {
5269
let text = this.objectData.altText;
5370
if (!text) {
@@ -107,6 +124,9 @@ export default {
107124
},
108125
109126
linkToPath() {
127+
if (!this.asLink) {
128+
return undefined;
129+
}
110130
if (this.linkToUrl !== '') {
111131
return this.linkToUrl;
112132
}
@@ -115,6 +135,9 @@ export default {
115135
116136
src() {
117137
if (this.objectData.thumbnail_url !== undefined && this.canView()) {
138+
if (this.size === 'medium' || this.size === 'small') {
139+
return this.objectData.thumbnail_url.replace('/large', '/small');
140+
}
118141
return this.objectData.thumbnail_url;
119142
}
120143
@@ -140,8 +163,12 @@ export default {
140163
</script>
141164

142165
<style scoped lang="scss">
166+
.thumbnail {
167+
color: #1A698C;
168+
}
169+
143170
@media screen and (max-width: 600px) {
144-
a {
171+
.thumbnail {
145172
margin-right: 15px;
146173
}
147174
}

Diff for: ‎static/js/vue-cdr-access/src/components/galleryDisplay.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ Renders search results in a gallery view display in full record pages.
33
-->
44
<template>
55
<div class="browse-records-display">
6-
<div class="grid is-col-min-9 is-column-gap-3 is-row-gap-6">
6+
<div class="grid is-col-min-10 is-column-gap-3 is-row-gap-6">
77
<div v-for="record in recordList" class="cell">
8-
<thumbnail :thumbnail-data="record" :link-to-url="recordUrl(record, 'gallery-display')"></thumbnail>
8+
<thumbnail :thumbnail-data="record" :link-to-url="recordUrl(record, 'gallery-display')" size="large"></thumbnail>
99
<div class="record-title mt-4" :class="{deleted: markedForDeletion(record)}">
1010
<router-link :to="recordUrl(record, 'gallery-display')">{{ record.title }}</router-link>
1111
</div>

Diff for: ‎static/js/vue-cdr-access/src/components/listDisplay.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Renders search results in a list view display format
66
<div class="columns">
77
<div class="column">
88
<div v-for="(record, index) in recordList" class="columns is-mobile browseitem py-5" :class="{'has-background-white-ter': index % 2 === 0}">
9-
<div class="column is-narrow pt-4">
9+
<div class="column is-narrow pt-3">
1010
<thumbnail :thumbnail-data="record" size="medium" :link-to-url="recordUrl(record, linkBrowseType)"></thumbnail>
1111
</div>
1212
<div class="column metadata-fields">

0 commit comments

Comments
 (0)