Add a jump to download button (#1827)

* Add a jump to download button * Fix spacing issues with jump button * Fix spacing of reset button and search box for file list
UNC-Libraries · Nov 1, 2024 · 597f5b0 · 597f5b0
1 parent addae76
commit 597f5b0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/static/css/cdrui_styles.css b/static/css/cdrui_styles.css
@@ -52,7 +52,6 @@
 .thumbnail {
 	display: block;
 	position:relative;
-	float: left;
 	margin: 0 0 20px 0;
 	text-align: center;
 	object-fit: contain;

diff --git a/static/css/sass/cdr_ui_styles.scss b/static/css/sass/cdr_ui_styles.scss
@@ -420,6 +420,7 @@ p.no-search-results {
 
 #child-files_filter {
   margin-bottom: 25px;
+  margin-top: -50px;
 }
 
 .input::placeholder, .input {
@@ -609,7 +610,6 @@ img.data-thumb {
 
 .full_record_top {
   border-bottom: 1px solid $light-gray;
-  padding-bottom: 25px;
 
   .collinfo {
     width: 100%;
@@ -1052,6 +1052,10 @@ a.navbar-item:hover {
     }
   }
 
+  #child-files_filter {
+    margin-top: -25px;
+  }
+
   .dataTables_wrapper {
     .dataTables_filter {
       float: left !important;

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
@@ -9,6 +9,11 @@
                             <div class="columns is-tablet">
                                 <div class="column is-narrow" :class="isDeleted">
                                     <thumbnail :thumbnail-data="recordData"></thumbnail>
+                                    <div class="actionlink download-jump">
+                                        <a class="button action" :href="filesLink">
+                                            <i class="fa fa-download" aria-hidden="true"></i> Skip to Download
+                                        </a>
+                                    </div>
                                 </div>
                                 <div class="column">
                                     <ul class="record-metadata">
@@ -59,7 +64,7 @@
         </div>
         <div class="full_record_bottom">
             <player :record-data="recordData"></player>
-            <file-list v-if="childCount > 0"
+            <file-list v-if="childCount > 0" id="file-display"
                        :child-count="childCount"
                        :work-id="recordData.briefObject.id"
                        :total-download-size="recordData.totalDownloadSize"
@@ -93,5 +98,23 @@ export default {
     components: {abstract, fileList, neighborList, metadataDisplay, player, restrictedContent},
 
     mixins: [fileUtils, fullRecordUtils],
+
+    computed: {
+        filesLink() {
+            const current_page = location.href;
+            return /file-display$/.test(current_page) ? current_page : `${current_page}#file-display`;
+        }
+    }
 }
 </script>
+
+<style scoped lang="scss">
+    .actionlink.download-jump {
+        margin: 0 5px 0 0;
+    }
+
+    .actionlink a.action {
+        font-size: 1rem;
+        padding: 10px;
+    }
+</style>
diff --git a/static/js/vue-cdr-access/tests/unit/aggregateRecord.spec.js b/static/js/vue-cdr-access/tests/unit/aggregateRecord.spec.js
@@ -178,7 +178,6 @@ const record = {
                     title: "fc77a9be-b49d-4f4e-b656-1644c9e964fc"
                 }
             ],
-            _version_: 1760531096505680000,
             permissions: [
                 "markForDeletionUnit",
                 "move",
@@ -283,7 +282,6 @@ const record = {
                     title: "fc77a9be-b49d-4f4e-b656-1644c9e964fc"
                 }
             ],
-            _version_: 1760531096497291300,
             permissions: [
                 "markForDeletionUnit",
                 "move",
@@ -583,6 +581,10 @@ describe('aggregateRecord.vue', () => {
         expect(wrapper.find('h2').text()).toEqual('Listen for real');
     });
 
+    it("has a jump to download button", () => {
+        expect(wrapper.find('.download-jump a').exists()).toBe(true);
+    });
+
     it("does not display a finding aid link, if absent", () => {
         expect(wrapper.find('.finding-aid').exists()).toBe(false);
     });