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

Author: bbpennel

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;

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%;
 }

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 {

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 {

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>

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">

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>

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">

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');

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">