Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BXC-4807/4757/4799 - Thumbnail size, linking, and pagination. Admin spacing #1856

Merged
merged 6 commits into from
Jan 7, 2025
Merged

BXC-4807/4757/4799 - Thumbnail size, linking, and pagination. Admin spacing #1856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e75ad89
Add asLink attribute for thumbnails to allow thumbnails to not be lin…
bbpennel Dec 23, 2024
2fe8b94
Change thumbnail sizes from 64px and 128px to 160px and 250px. Thumbn…
bbpennel Dec 23, 2024
da6d095
Convert pagination to bulma. Always shows 7 pages now, if there are a…
bbpennel Dec 24, 2024
0e837fd
Admin ui spacing fixes. Also cleaned up some dead code
bbpennel Dec 24, 2024
c932ab7
Update pagination colors to meet accessability requirements
bbpennel Jan 6, 2025
cd2c911
Review updates
bbpennel Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions static/css/admin/admin_forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
}

.edit_form p {
padding-top: 7px;
margin: 10px 0;
text-align: left;
}

Expand Down Expand Up @@ -382,12 +382,6 @@
color: #555;
}

#run_enhancements_form #run_enhancements_force {
margin-left: 0;
margin-right: 0.5em;
}



.file_browse_dialog {
text-align: left;
Expand Down
8 changes: 8 additions & 0 deletions static/css/admin/cdradmin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ body {
width: inherit;
}

.contentarea {
margin: 20px;
}

.contentarea.nobottom {
margin-bottom: 0;
}
Expand All @@ -26,6 +30,10 @@ h1 {
padding: 0 0 1em 0;
}

p {
line-height: 1.3rem;
}

.fullwidth {
width: 100%;
}
Expand Down
23 changes: 14 additions & 9 deletions static/css/cdrui_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,24 @@
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
width: 64px;
height: 64px;
width: 100px;
height: 100px;
margin: 0 auto;
}

.thumbnail.thumbnail-size-medium .thumbnail-viewer {
width: 112px;
height: 112px;
width: 160px;
height: 160px;

@media screen and (max-width: 768px) {
width: 125px;
height: 125px;
}
}

.thumbnail.thumbnail-size-large .thumbnail-viewer {
width: 128px;
height: 128px;
width: 250px;
height: 250px;
margin-top: .25rem;
}

Expand Down Expand Up @@ -75,15 +80,15 @@
}

.thumbnail .placeholder {
font-size: 64px;
font-size: 100px;
}

.thumbnail.thumbnail-size-medium .placeholder {
font-size: 112px;
font-size: 160px;
}

.thumbnail.thumbnail-size-large .placeholder {
font-size: 128px;
font-size: 250px;
}

.thumbnail-badge .background {
Expand Down
9 changes: 7 additions & 2 deletions static/css/sass/cdr_ui_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ p.spacing {
}

img.data-thumb {
max-width: 60px;
max-width: 100px;
}

.child-records {
Expand Down Expand Up @@ -455,6 +455,11 @@ table.dataTable {
top: 0;
}
}

img + .thumbnail-badge {
margin-left: 85px !important;
margin-top: -20px !important;
}
}

/* MODs display for work and file pages, plus modalMetadata.vue component */
Expand Down Expand Up @@ -492,7 +497,7 @@ table.dataTable {
.relateditem {
.thumbnail {
.thumbnail-badge {
right: 40px;
right: 10px;
}

.thumbnail-viewer {
Expand Down
22 changes: 11 additions & 11 deletions static/js/admin/vue-cdr-admin/src/components/chompb/preIngest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,18 +140,18 @@ export default {
#chompb-preingest-ui {
width: 96%;
margin: 25px auto;
}

p {
text-align: center;
margin-top: 50px;
}
p {
text-align: center;
margin-top: 50px;
}

#copy-msg {
padding: 15px;
position: absolute;
right: 25px;
top: 0;
width: auto;
#copy-msg {
padding: 15px;
position: absolute;
right: 25px;
top: 0;
width: auto;
}
}
</style>
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/adminUnit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="full_record pb-4">
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
<div class="column is-narrow">
<thumbnail :thumbnail-data="recordData"></thumbnail>
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
</div>
<div class="column content is-medium">
<h2 :class="isDeleted" class="title is-2 is-text-unc-blue">
Expand Down
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="full_record">
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
<div class="column is-narrow-desktop is-5-mobile" :class="isDeleted">
<thumbnail :thumbnail-data="recordData"></thumbnail>
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
<div class="download-jump mt-5 has-text-centered">
<a class="button action is-primary is-responsive" :href="filesLink">
<span class="icon"><i class="fa fa-download" aria-hidden="true"></i></span><span>Skip to Download</span>
Expand Down
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="full_record">
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
<div class="column is-narrow-desktop is-5-mobile" :class="{restrictedContent: 'is-8'}">
<thumbnail :thumbnail-data="recordData"></thumbnail>
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
</div>
<div class="column content is-7-mobile pb-4">
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">
Expand Down
3 changes: 2 additions & 1 deletion static/js/vue-cdr-access/src/components/full_record/fileList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,8 @@ export default {

if ('thumbnail_url' in row && this.hasPermission(row,'viewAccessCopies')) {
const thumbnail_title = this.$t('full_record.thumbnail_title', { title: row.title })
img = `<img class="data-thumb" loading="lazy" src="${row.thumbnail_url}"` +
const thumbnail_url = row.thumbnail_url.replace('/large', '/small');;
img = `<img class="data-thumb" loading="lazy" src="${thumbnail_url}"` +
` alt="${thumbnail_title}">`;
} else {
const thumbnail_default = this.$t('full_record.thumbnail_default');
Expand Down
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/fileRecord.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="full_record">
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
<div class="column is-narrow" :class="isDeleted">
<thumbnail :thumbnail-data="recordData"></thumbnail>
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
</div>
<div class="column content">
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">
Expand Down
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/folderRecord.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="full_record">
<div class="columns is-6-desktop browse-top container is-mobile is-1-mobile">
<div class="column is-narrow" :class="{restrictedContent: 'is-8'}">
<thumbnail :thumbnail-data="recordData"></thumbnail>
<thumbnail :thumbnail-data="recordData" :as-link="false"></thumbnail>
</div>
<div class="column content pb-4">
<h2 :class="isDeleted" class="title is-3 is-text-unc-blue">
Expand Down
37 changes: 32 additions & 5 deletions static/js/vue-cdr-access/src/components/full_record/thumbnail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<router-link :to="linkToPath" :title="tooltip" :aria-label="linkAltText" class="thumbnail" :class="imgClasses">
<div v-if="src !== ''" :style="{ 'background-image': 'url(' + objectData.thumbnail_url + ')'}"
<component :is="wrapperTag" :to="linkToPath" v-bind="linkAttributes" class="thumbnail" :class="imgClasses">
<div v-if="src !== ''" :style="{ 'background-image': 'url(' + src + ')'}"
:aria-label="imageAltText"
role="img"
class="thumbnail-viewer"
Expand All @@ -12,7 +12,7 @@
<i class="fas fa-stack-1x foreground" :class="badgeIcon"></i>
</div>
</div>
</router-link>
</component>
</template>

<script>
Expand All @@ -37,7 +37,11 @@ export default {
},
size: {
type: String,
default: 'large'
default: 'medium'
},
asLink: {
type: Boolean,
default: true
}
},

Expand All @@ -48,6 +52,19 @@ export default {
},

computed: {
wrapperTag() {
return this.asLink ? 'router-link' : 'div';
},

linkAttributes() {
// Return attributes only if the wrapper is a router-link
return this.asLink ? {
title: this.tooltip,
'aria-label': this.linkAltText,
}
: {};
},

altText() {
let text = this.objectData.altText;
if (!text) {
Expand Down Expand Up @@ -107,6 +124,9 @@ export default {
},

linkToPath() {
if (!this.asLink) {
return undefined;
}
if (this.linkToUrl !== '') {
return this.linkToUrl;
}
Expand All @@ -115,6 +135,9 @@ export default {

src() {
if (this.objectData.thumbnail_url !== undefined && this.canView()) {
if (this.size === 'medium' || this.size === 'small') {
return this.objectData.thumbnail_url.replace('/large', '/small');
}
return this.objectData.thumbnail_url;
}

Expand All @@ -140,8 +163,12 @@ export default {
</script>

<style scoped lang="scss">
.thumbnail {
color: #1A698C;
}

@media screen and (max-width: 600px) {
a {
.thumbnail {
margin-right: 15px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions static/js/vue-cdr-access/src/components/galleryDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ Renders search results in a gallery view display in full record pages.
-->
<template>
<div class="browse-records-display">
<div class="grid is-col-min-9 is-column-gap-3 is-row-gap-6">
<div class="grid is-col-min-10 is-column-gap-3 is-row-gap-6">
<div v-for="record in recordList" class="cell">
<thumbnail :thumbnail-data="record" :link-to-url="recordUrl(record, 'gallery-display')"></thumbnail>
<thumbnail :thumbnail-data="record" :link-to-url="recordUrl(record, 'gallery-display')" size="large"></thumbnail>
<div class="record-title mt-4" :class="{deleted: markedForDeletion(record)}">
<router-link :to="recordUrl(record, 'gallery-display')">{{ record.title }}</router-link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/listDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Renders search results in a list view display format
<div class="columns">
<div class="column">
<div v-for="(record, index) in recordList" class="columns is-mobile browseitem py-5" :class="{'has-background-white-ter': index % 2 === 0}">
<div class="column is-narrow pt-4">
<div class="column is-narrow pt-3">
<thumbnail :thumbnail-data="record" size="medium" :link-to-url="recordUrl(record, linkBrowseType)"></thumbnail>
</div>
<div class="column metadata-fields">
Expand Down
Loading
Loading