Fix spacing issues with jump button

UNC-Libraries · Oct 31, 2024 · 7bdf979 · 7bdf979
1 parent cc2ac93
commit 7bdf979
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/static/css/sass/cdr_ui_styles.scss b/static/css/sass/cdr_ui_styles.scss
@@ -609,7 +609,6 @@ img.data-thumb {
 
 .full_record_top {
   border-bottom: 1px solid $light-gray;
-  padding-bottom: 25px;
 
   .collinfo {
     width: 100%;

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,8 +9,8 @@
                             <div class="columns is-tablet">
                                 <div class="column is-narrow" :class="isDeleted">
                                     <thumbnail :thumbnail-data="recordData"></thumbnail>
-                                    <div class="actionlink">
-                                        <a class="download-jump button action" :href="filesLink">
+                                    <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>
@@ -107,3 +107,14 @@ export default {
     }
 }
 </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
@@ -582,7 +582,7 @@ describe('aggregateRecord.vue', () => {
     });
 
     it("has a jump to download button", () => {
-        expect(wrapper.find('.download-jump').exists()).toBe(true);
+        expect(wrapper.find('.download-jump a').exists()).toBe(true);
     });
 
     it("does not display a finding aid link, if absent", () => {