BXC-4807/4757/4799 - Thumbnail size, linking, and pagination. Admin s…

…pacing (#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
UNC-Libraries · Jan 7, 2025 · 89b8243 · 89b8243
1 parent 50e9f23
commit 89b8243
Show file tree

Hide file tree

Showing 22 changed files with 317 additions and 288 deletions.
diff --git a/static/css/admin/admin_forms.css b/static/css/admin/admin_forms.css
@@ -121,7 +121,7 @@
 }
 
 .edit_form p {
-	padding-top: 7px;
+	margin: 10px 0;
 	text-align: left;
 }
 
@@ -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;

diff --git a/static/css/admin/cdradmin.css b/static/css/admin/cdradmin.css
@@ -11,6 +11,10 @@ body {
 	width: inherit;
 }
 
+.contentarea {
+	margin: 20px;
+}
+
 .contentarea.nobottom {
 	margin-bottom: 0;
 }
@@ -26,6 +30,10 @@ h1 {
 	padding: 0 0 1em 0;
 }
 
+p {
+	line-height: 1.3rem;
+}
+
 .fullwidth {
 	width: 100%;
 }

diff --git a/static/css/cdrui_styles.css b/static/css/cdrui_styles.css
@@ -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;
 }
 
@@ -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 {

diff --git a/static/css/sass/cdr_ui_styles.scss b/static/css/sass/cdr_ui_styles.scss
@@ -271,7 +271,7 @@ p.spacing {
 }
 
 img.data-thumb {
-  max-width: 60px;
+  max-width: 100px;
 }
 
 .child-records {
@@ -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 */
@@ -492,7 +497,7 @@ table.dataTable {
 .relateditem {
   .thumbnail {
     .thumbnail-badge {
-      right: 40px;
+      right: 10px;
     }
 
     .thumbnail-viewer {

diff --git a/static/js/admin/vue-cdr-admin/src/components/chompb/preIngest.vue b/static/js/admin/vue-cdr-admin/src/components/chompb/preIngest.vue
@@ -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>
diff --git a/static/js/vue-cdr-access/src/components/full_record/adminUnit.vue b/static/js/vue-cdr-access/src/components/full_record/adminUnit.vue
@@ -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">

diff --git a/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue b/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue
@@ -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>

diff --git a/static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue b/static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue
@@ -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">

diff --git a/static/js/vue-cdr-access/src/components/full_record/fileList.vue b/static/js/vue-cdr-access/src/components/full_record/fileList.vue
@@ -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');

diff --git a/static/js/vue-cdr-access/src/components/full_record/fileRecord.vue b/static/js/vue-cdr-access/src/components/full_record/fileRecord.vue
@@ -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">

diff --git a/static/js/vue-cdr-access/src/components/full_record/folderRecord.vue b/static/js/vue-cdr-access/src/components/full_record/folderRecord.vue
@@ -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">

diff --git a/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue b/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue
@@ -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"
@@ -12,7 +12,7 @@
                 <i class="fas fa-stack-1x foreground" :class="badgeIcon"></i>
             </div>
         </div>
-    </router-link>
+    </component>
 </template>
 
 <script>
@@ -37,7 +37,11 @@ export default {
         },
         size: {
             type: String,
-            default: 'large'
+            default: 'medium'
+        },
+        asLink: {
+            type: Boolean,
+            default: true
         }
     },
 
@@ -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) {
@@ -107,6 +124,9 @@ export default {
         },
 
         linkToPath() {
+            if (!this.asLink) {
+                return undefined;
+            }
             if (this.linkToUrl !== '') {
                 return this.linkToUrl;
             }
@@ -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;
             }
 
@@ -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;
         }
     }

diff --git a/static/js/vue-cdr-access/src/components/galleryDisplay.vue b/static/js/vue-cdr-access/src/components/galleryDisplay.vue
@@ -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>

diff --git a/static/js/vue-cdr-access/src/components/listDisplay.vue b/static/js/vue-cdr-access/src/components/listDisplay.vue
@@ -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">