From 072feb2f6cc3d725a272ba616bd512bfa76e5619 Mon Sep 17 00:00:00 2001
From: lbiedinger <lutz.biedinger@gmail.com>
Date: Fri, 20 Sep 2024 13:52:38 +0200
Subject: [PATCH 01/19] thumbnails for item media in new IIIF layout

---
 .../components/item/ItemMediaPresentation.vue |  46 +++--
 .../components/item/ItemMediaThumbnail.vue    | 170 ++++++++++++++++++
 .../components/item/ItemMediaThumbnails.vue   |  78 +++++++-
 .../item/ItemMediaThumbnail.spec.js           |  37 ++++
 .../item/ItemMediaThumbnails.spec.js          |  37 ++++
 5 files changed, 341 insertions(+), 27 deletions(-)
 create mode 100644 packages/portal/src/components/item/ItemMediaThumbnail.vue
 create mode 100644 packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
 create mode 100644 packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 6e193cd04c..8c430cf56c 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <div
-      class="iiif-viewer-wrapper d-flex flex-column"
+      class="iiif-viewer-wrapper d-flex flex-column flex-lg-row"
     >
       <div
-        class="iiif-viewer-inner-wrapper h-100 d-flex flex-column overflow-hidden"
+        class="iiif-viewer-inner-wrapper h-100 w-100 d-flex flex-column overflow-hidden"
       >
         <div
           class="h-100 d-flex flex-row-reverse overflow-auto"
@@ -86,14 +86,22 @@
             :total-results="resourceCount"
             class="pagination mx-auto"
           />
+          <b-button
+            class="d-inline-flex"
+            variant="secondary"
+            @click="showThumbnails = !showThumbnails"
+          >
+            {{ showThumbnails ? 'Hide thumbnails' : 'Show thumbnails' }}
+          </b-button>
         </div>
       </div>
+      <ItemMediaThumbnails
+        v-if="showThumbnails"
+        :resources="thumbnailResources"
+        :selected-index="page -1"
+        :edm-type="edmType"
+      />
     </div>
-    <ItemMediaThumbnails
-      v-if="thumbnails.length > 0"
-      :thumbnails="thumbnails"
-      @clickThumbnail="handleClickThumbnail"
-    />
   </div>
 </template>
 
@@ -151,7 +159,8 @@
         annotationPage: null,
         presentation: null,
         page: 1,
-        showSidebar: null
+        showSidebar: null,
+        showThumbnails: true
       };
     },
 
@@ -178,12 +187,8 @@
         return this.presentation?.resources?.length || 0;
       },
 
-      thumbnail() {
-        return this.thumbnails[this.page - 1];
-      },
-
-      thumbnails() {
-        return this.presentation?.resources.map((resource) => resource.thumbnails?.(this.$nuxt.context)?.small) || [];
+      thumbnailResources() {
+        return this.presentation?.resources || [];
       }
     },
 
@@ -192,11 +197,6 @@
     },
 
     methods: {
-      handleClickThumbnail(index) {
-        const page = index + 1;
-        this.$router.push({ ...this.$route, query: { ...this.$route.query, page } });
-      },
-
       onClickAnno(anno) {
         console.log('onClickAnno', anno);
         // const layer = this.map.getLayers()[0];
@@ -249,4 +249,12 @@
 <style lang="scss">
   @import '@europeana/style/scss/variables';
   @import '@europeana/style/scss/iiif';
+
+  .hero-container {
+    max-height: 37.75rem;
+  }
+
+  .iiif-viewer-wrapper {
+    width: 100%
+  }
 </style>
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
new file mode 100644
index 0000000000..3fc4629233
--- /dev/null
+++ b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -0,0 +1,170 @@
+<template>
+  <div
+    class="item-media-thumbnail text-lowercase"
+    data-qa="item media thumbnail"
+  >
+    <MediaCardImage
+      :media="resource"
+      :lazy="lazy"
+      :offset="offset"
+      :edm-type="edmType"
+      thumbnail-size="small"
+      :linkable="false"
+    />
+    <span class="thumbnail-page">{{ `p. ${offset + 1}` }}</span>
+    <span
+      class="icon-media-type"
+      :class="mediaTypeIconClass"
+    />
+</div>
+</template>
+
+<script>
+  export default {
+    name: 'ItemMediaThumbnail',
+
+    components: {
+      MediaCardImage: () => import('@/components/media/MediaCardImage')
+    },
+    props: {
+      resource: {
+        type: Object,
+        required: true
+      },
+      offset: {
+        type: Number,
+        default: 0
+      },
+      lazy: {
+        type: Boolean,
+        default: true
+      },
+      edmType: {
+        type: String,
+        default: null
+      }
+    },
+
+    computed: {
+      mediaTypeIconClass() {
+        const mediaType = this.resource.edmType || this.edmType;
+        return mediaType ? `icon-${mediaType.toLowerCase()}-bold` : '';
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .icon-media-type {
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
+    z-index: 1;
+    color: $white;
+    font-size: $font-size-small;
+    line-height: 1;
+
+    @media (min-width: $bp-medium) {
+      font-size: $font-size-large;
+      right: 0.75rem;
+      bottom: 0.75rem;
+    }
+  }
+
+  .item-media-thumbnail {
+    background-color: $grey;
+    padding: 0;
+    flex-shrink: 0;
+    width: 5.125rem;
+    height: 3.625rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    margin-right: 1rem;
+    position: relative;
+    border-radius: 0;
+    color: $black;
+
+    @media (min-width: $bp-medium) {
+      width: 11rem;
+      height: 7.75rem;
+    }
+
+    @media (min-width: $bp-large) {
+      margin-bottom: 1rem;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.btn-secondary {
+      &:hover,
+      &:not(:disabled):not(.disabled):active:hover,
+      &:not(:disabled):not(.disabled).active:hover {
+        color: $black;
+        background-color: $grey;
+        box-shadow: none;
+      }
+    }
+
+    &.selected {
+      border: 2px solid $blue;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
+    }
+
+    ::v-deep .image-container {
+      width: 100%;
+      height: 100%;
+
+      div {
+        width: 100%;
+        height: 100%;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    ::v-deep .card-img {
+      border-radius: 0;
+    }
+  }
+
+  .thumbnail-page {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.5rem;
+    color: $white;
+    z-index: 1;
+    line-height: 1;
+
+    @media (min-width: $bp-medium) {
+      font-size: $font-size-small;
+      bottom: 1rem;
+      left: 1rem;
+    }
+  }
+</style>
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 2d08b5f919..76237d94dd 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -1,32 +1,94 @@
 <template>
   <div
-    class="p-2"
+    class="d-flex flex-column position-relative"
   >
-    <h2>Thumbnails</h2>
     <div
-      class="d-flex overflow-auto"
+      ref="mediaThumbnails"
+      class="media-thumbnails d-flex flex-row flex-lg-column"
     >
-      <b-img-lazy
-        v-for="(image, index) in thumbnails"
+      <ItemMediaThumbnail
+        v-for="(resource, index) in resources"
         :key="index"
+        :offset="index"
         class="d-flex-inline mr-2"
-        :src="image"
+        :class="index === selectedIndex ? 'selected' : ''"
+        :resource="resource"
+        :edm-type="edmType"
         alt=""
-        @click.native="$emit('clickThumbnail', index)"
+        @click.native="clickThumbnail(index)"
       />
     </div>
   </div>
 </template>
 
 <script>
+  import ItemMediaThumbnail from './ItemMediaThumbnail.vue';
+
   export default {
     name: 'ItemMediaThumbnails',
 
+    components: {
+      ItemMediaThumbnail
+    },
     props: {
-      thumbnails: {
+      resources: {
         type: Array,
         required: true
+      },
+      edmType: {
+        type: String,
+        default: null
+      },
+      selectedIndex: {
+        type: Number,
+        required: true
+      }
+    },
+
+    watch: {
+      selectedIndex: 'updateThubmnailScroll'
+      // TODO: consider watching resize/orientation changes to re-center thumbnails
+    },
+
+    methods: {
+      clickThumbnail(index) {
+        this.$router.push({ ...this.$route, query: { ...this.$route.query, page: index + 1 } });
+      },
+      updateThubmnailScroll() {
+        const mediaThumbnailsElement = this.$refs.mediaThumbnails;
+        const elementWidth = mediaThumbnailsElement.offsetWidth;
+        const elementHeight = mediaThumbnailsElement.offsetHeight;
+
+        if  (window?.innerWidth <= 991) {
+          let cardWidth = 192;
+          const gutter = 16;
+          if (window?.innerWidth <= 767) {
+            cardWidth = 96;
+          }
+          mediaThumbnailsElement?.scroll(gutter + (this.selectedIndex * cardWidth) - ((elementWidth / 2) + (cardWidth / 2)), 0);
+        } else {
+          const cardHeight = 138;
+          mediaThumbnailsElement?.scroll(0, (this.selectedIndex * cardHeight) - ((elementHeight / 2) + (cardHeight / 2)));
+        }
       }
     }
   };
 </script>
+
+<style lang="scss">
+  @import '@europeana/style/scss/variables';
+
+  .media-thumbnails {
+    padding: 1rem;
+    flex: 1 1 auto;
+    background-color: $white;
+    overflow-x: scroll;
+    scrollbar-width: thin;
+
+    @media (min-width: $bp-large) {
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 13rem;
+    }
+  }
+</style>
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
new file mode 100644
index 0000000000..f5d963be15
--- /dev/null
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
@@ -0,0 +1,37 @@
+import { createLocalVue } from '@vue/test-utils';
+import { shallowMountNuxt } from '../../utils';
+import ItemMediaThumbnail from '@/components/item/ItemMediaThumbnail';
+// import sinon from 'sinon';
+
+const localVue = createLocalVue();
+
+const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMountNuxt(ItemMediaThumbnail, {
+  localVue,
+  attachTo: document.body,
+  propsData,
+  mocks: {
+    $route: { query: {} },
+    $t: (key) => key,
+    ...mocks
+  }
+});
+
+const props = {
+  edmType: 'image',
+  offset: 0,
+  resource: {
+    edmType: ''
+  }
+};
+
+describe('components/item/ItemMediaThumbnail', () => {
+  describe('template', () => {
+    it('renders a item media thumbnail', () => {
+      const wrapper = factory({ propsData: props });
+
+      const thumbnail = wrapper.find('.item-media-thumbnail');
+
+      expect(thumbnail.isVisible()).toBe(true);
+    });
+  });
+});
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
new file mode 100644
index 0000000000..cb7b26264c
--- /dev/null
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
@@ -0,0 +1,37 @@
+import { createLocalVue } from '@vue/test-utils';
+import { shallowMountNuxt } from '../../utils';
+import ItemMediaThumbnails from '@/components/item/ItemMediaThumbnails';
+// import sinon from 'sinon';
+
+const localVue = createLocalVue();
+
+const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMountNuxt(ItemMediaThumbnails, {
+  localVue,
+  attachTo: document.body,
+  propsData,
+  mocks: {
+    $route: { query: {} },
+    $t: (key) => key,
+    ...mocks
+  }
+});
+
+const props = {
+  edmType: 'image',
+  selectedIndex: 0,
+  resources: [{
+    edmType: ''
+  }]
+};
+
+describe('components/item/ItemMediaThumbnail', () => {
+  describe('template', () => {
+    it('renders a item media thumbnail', () => {
+      const wrapper = factory({ propsData: props });
+
+      const thumbnail = wrapper.find('.media-thumbnails');
+
+      expect(thumbnail.isVisible()).toBe(true);
+    });
+  });
+});

From fa1448dd14612725708cbbcaf6b6b2cf9c128dc4 Mon Sep 17 00:00:00 2001
From: lbiedinger <lutz.biedinger@gmail.com>
Date: Fri, 20 Sep 2024 14:59:19 +0200
Subject: [PATCH 02/19] style show/hide thumbnails button

---
 .../components/item/ItemMediaPresentation.vue | 19 +++++++++++++------
 .../components/item/ItemMediaThumbnail.vue    |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 8c430cf56c..d4f784e529 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -86,13 +86,12 @@
             :total-results="resourceCount"
             class="pagination mx-auto"
           />
-          <b-button
-            class="d-inline-flex"
-            variant="secondary"
+          <span
+            class="icon-pages mr-1 show-thumbnails-toggle"
+            :class="showThumbnails ? 'active' : ''"
+            data-qa="show thumbnails button icon"
             @click="showThumbnails = !showThumbnails"
-          >
-            {{ showThumbnails ? 'Hide thumbnails' : 'Show thumbnails' }}
-          </b-button>
+          />
         </div>
       </div>
       <ItemMediaThumbnails
@@ -239,6 +238,14 @@
     }
   }
 
+  .show-thumbnails-toggle {
+    font-size: 1.5rem;
+    &.active {
+      color: $blue;
+    }
+
+  }
+
   ::v-deep .pagination {
     ul {
       margin-bottom: 0;
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
index 3fc4629233..769f3503c1 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnail.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -16,7 +16,7 @@
       class="icon-media-type"
       :class="mediaTypeIconClass"
     />
-</div>
+  </div>
 </template>
 
 <script>

From 498caa82419373abfa4c8b7ad97c4aad48cb3322 Mon Sep 17 00:00:00 2001
From: lbiedinger <lutz.biedinger@gmail.com>
Date: Fri, 20 Sep 2024 15:04:50 +0200
Subject: [PATCH 03/19] remove superfluous hero styling

---
 .../portal/src/components/item/ItemMediaPresentation.vue  | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index d4f784e529..a792489874 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -256,12 +256,4 @@
 <style lang="scss">
   @import '@europeana/style/scss/variables';
   @import '@europeana/style/scss/iiif';
-
-  .hero-container {
-    max-height: 37.75rem;
-  }
-
-  .iiif-viewer-wrapper {
-    width: 100%
-  }
 </style>

From eb339ef89c79fde47538fbc00ff9d2dfa25ee5ef Mon Sep 17 00:00:00 2001
From: lbiedinger <lutz.biedinger@gmail.com>
Date: Wed, 25 Sep 2024 16:35:19 +0200
Subject: [PATCH 04/19] refactor

---
 .../components/item/ItemMediaPresentation.vue | 43 ++++++----
 .../src/components/item/ItemMediaSwiper.vue   |  4 +-
 .../components/item/ItemMediaThumbnail.vue    | 23 +++++-
 .../components/item/ItemMediaThumbnails.vue   | 80 +++++++++++++------
 packages/portal/src/i18n/lang/en.js           |  5 ++
 .../components/item/ItemMediaSwiper.spec.js   |  4 +-
 .../item/ItemMediaThumbnail.spec.js           | 38 +++++++--
 .../item/ItemMediaThumbnails.spec.js          |  7 +-
 8 files changed, 146 insertions(+), 58 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 7d7c01cadb..a135aecf0a 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -64,19 +64,27 @@
             :total-results="resourceCount"
             class="pagination mx-auto"
           />
-          <span
-            class="icon-pages mr-1 show-thumbnails-toggle"
-            :class="showThumbnails ? 'active' : ''"
-            data-qa="show thumbnails button icon"
-            @click="showThumbnails = !showThumbnails"
-          />
+          <b-button
+            v-if="resourceCount >= 2"
+            v-b-tooltip.bottom
+            :title="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
+            :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
+            variant="light-flat"
+            class="pages-toggle button-icon-only"
+            :class="showPages ? 'active' : ''"
+            data-qa="show thumbnails button"
+            @click="togglePages"
+          >
+            <span class="icon icon-pages" />
+          </b-button>
         </div>
       </div>
       <ItemMediaThumbnails
-        v-if="showThumbnails"
+        v-if="resourceCount >= 2"
         :resources="thumbnailResources"
         :selected-index="page -1"
         :edm-type="edmType"
+        :show="showPages"
       />
     </div>
   </div>
@@ -135,7 +143,7 @@
         presentation: null,
         page: 1,
         showSidebar: null,
-        showThumbnails: true,
+        showPages: true,
         sidebarHasContent: !!this.annotationPage || !!this.uri
       };
     },
@@ -183,6 +191,11 @@
         this.$nextTick(() => {
           this.$emit('select', this.resource?.about);
         });
+      },
+
+      togglePages() {
+        this.showPages = !this.showPages;
+        this.$root.$emit('bv::hide::tooltip');
       }
     }
   };
@@ -222,12 +235,14 @@
         background-color: transparent;
         font-size: $font-size-large;
       }
-    }
-  }
-  .show-thumbnails-toggle {
-    font-size: 1.5rem;
-    &.active {
-      color: $blue;
+
+      .pages-toggle {
+        background-color: transparent;
+        font-size: $font-size-large;
+        &.active {
+          color: $blue;
+        }
+      }
     }
   }
 
diff --git a/packages/portal/src/components/item/ItemMediaSwiper.vue b/packages/portal/src/components/item/ItemMediaSwiper.vue
index d815bc42d5..77f808034d 100644
--- a/packages/portal/src/components/item/ItemMediaSwiper.vue
+++ b/packages/portal/src/components/item/ItemMediaSwiper.vue
@@ -137,13 +137,13 @@
 
     methods: {
       onSlideChange() {
-        this.updateThubmnailScroll();
+        this.updateThumbnailScroll();
         this.$emit('select', this.displayableMedia[this.swiper.activeIndex].about);
       },
       updateSwiper() {
         this.swiper.update();
       },
-      updateThubmnailScroll() {
+      updateThumbnailScroll() {
         // TODO: fix these values to use CSS values, not be hardcoded
         if (window.innerWidth <= 767) {
           this.$refs.swiperThubmnails?.scroll(16 + (this.swiper.activeIndex * 96), 0);
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
index 769f3503c1..7254eb07b4 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnail.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -1,5 +1,6 @@
 <template>
-  <div
+  <SmartLink
+    :destination="link"
     class="item-media-thumbnail text-lowercase"
     data-qa="item media thumbnail"
   >
@@ -11,19 +12,22 @@
       thumbnail-size="small"
       :linkable="false"
     />
-    <span class="thumbnail-page">{{ `p. ${offset + 1}` }}</span>
+    <span class="thumbnail-page">{{ label }}</span>
     <span
       class="icon-media-type"
       :class="mediaTypeIconClass"
     />
-  </div>
+  </SmartLink>
 </template>
 
 <script>
+  import SmartLink from '../generic/SmartLink';
+
   export default {
     name: 'ItemMediaThumbnail',
 
     components: {
+      SmartLink,
       MediaCardImage: () => import('@/components/media/MediaCardImage')
     },
     props: {
@@ -46,9 +50,22 @@
     },
 
     computed: {
+      link() {
+        return {
+          path: this.$route.path,
+          query: { ...this.$route.query, page: this.page },
+          hash: this.$route.hash
+        };
+      },
+      page() {
+        return this.offset + 1;
+      },
       mediaTypeIconClass() {
         const mediaType = this.resource.edmType || this.edmType;
         return mediaType ? `icon-${mediaType.toLowerCase()}-bold` : '';
+      },
+      label() {
+        return this.$t('media.pages.indexLabel', { pageNumber: this.page });
       }
     }
   };
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 76237d94dd..46138a5fc3 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -2,22 +2,25 @@
   <div
     class="d-flex flex-column position-relative"
   >
-    <div
+    <ol
       ref="mediaThumbnails"
       class="media-thumbnails d-flex flex-row flex-lg-column"
+      :class="{ 'show': show }"
     >
-      <ItemMediaThumbnail
+      <li
         v-for="(resource, index) in resources"
         :key="index"
-        :offset="index"
-        class="d-flex-inline mr-2"
-        :class="index === selectedIndex ? 'selected' : ''"
-        :resource="resource"
-        :edm-type="edmType"
-        alt=""
-        @click.native="clickThumbnail(index)"
-      />
-    </div>
+      >
+        <ItemMediaThumbnail
+          :offset="index"
+          class="d-flex-inline mr-2"
+          :class="index === selectedIndex ? 'selected' : ''"
+          :resource="resource"
+          :edm-type="edmType"
+          alt=""
+        />
+      </li>
+    </ol>
   </div>
 </template>
 
@@ -42,33 +45,40 @@
       selectedIndex: {
         type: Number,
         required: true
+      },
+      show: {
+        type: Boolean,
+        default: false
       }
     },
 
     watch: {
-      selectedIndex: 'updateThubmnailScroll'
-      // TODO: consider watching resize/orientation changes to re-center thumbnails
+      selectedIndex: 'updateThumbnailScroll'
+    },
+
+    created() {
+      window.addEventListener('resize', this.updateThumbnailScroll);
+    },
+    destroyed() {
+      window.removeEventListener('resize', this.updateThumbnailScroll);
     },
 
     methods: {
-      clickThumbnail(index) {
-        this.$router.push({ ...this.$route, query: { ...this.$route.query, page: index + 1 } });
-      },
-      updateThubmnailScroll() {
+      updateThumbnailScroll() {
         const mediaThumbnailsElement = this.$refs.mediaThumbnails;
         const elementWidth = mediaThumbnailsElement.offsetWidth;
         const elementHeight = mediaThumbnailsElement.offsetHeight;
 
-        if  (window?.innerWidth <= 991) {
-          let cardWidth = 192;
-          const gutter = 16;
+        if (window?.innerWidth <= 991) {
+          let cardWidth = 184;
+          const padding = 16;
           if (window?.innerWidth <= 767) {
-            cardWidth = 96;
+            cardWidth = 90;
           }
-          mediaThumbnailsElement?.scroll(gutter + (this.selectedIndex * cardWidth) - ((elementWidth / 2) + (cardWidth / 2)), 0);
+          mediaThumbnailsElement?.scroll(padding + (this.selectedIndex * cardWidth) - ((elementWidth / 2) - (cardWidth / 2)), 0);
         } else {
-          const cardHeight = 138;
-          mediaThumbnailsElement?.scroll(0, (this.selectedIndex * cardHeight) - ((elementHeight / 2) + (cardHeight / 2)));
+          const cardHeight = 140; // includes bottom padding
+          mediaThumbnailsElement?.scroll(0, (this.selectedIndex * cardHeight) - ((elementHeight / 2) - (cardHeight / 2)));
         }
       }
     }
@@ -79,16 +89,34 @@
   @import '@europeana/style/scss/variables';
 
   .media-thumbnails {
-    padding: 1rem;
+    padding: 0 1rem;
     flex: 1 1 auto;
     background-color: $white;
     overflow-x: scroll;
     scrollbar-width: thin;
+    height: 0;
+    transition: $standard-transition;
+
+    li {
+      list-style-type: none;
+    }
+
+    &.show {
+      transition: $standard-transition;
+      padding: 1rem;
+      height: auto;
+    }
 
     @media (min-width: $bp-large) {
       overflow-x: hidden;
       overflow-y: auto;
-      width: 13rem;
+      width: 0;
+      height: auto;
+      padding: 1rem 0;
+
+      &.show {
+        width: auto;
+      }
     }
   }
 </style>
diff --git a/packages/portal/src/i18n/lang/en.js b/packages/portal/src/i18n/lang/en.js
index 392668b69d..3e512068e7 100644
--- a/packages/portal/src/i18n/lang/en.js
+++ b/packages/portal/src/i18n/lang/en.js
@@ -944,6 +944,11 @@ export default {
       "IIIFManifest": "IIIF Manifest",
       "links": "Links",
       "show": "Show sidebar"
+    },
+    "pages": {
+      "hide": "Hide pages",
+      "show": "Show pages",
+      "indexLabel": "p. {pageNumber}"
     }
   },
   "messages": {
diff --git a/packages/portal/tests/unit/components/item/ItemMediaSwiper.spec.js b/packages/portal/tests/unit/components/item/ItemMediaSwiper.spec.js
index 9538278b36..3bcfe55efc 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaSwiper.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaSwiper.spec.js
@@ -84,14 +84,14 @@ describe('components/item/ItemMediaSwiper', () => {
       expect(wrapper.vm.swiper.update.mock.calls.length).toBe(1);
     });
   });
-  describe('updateThubmnailScroll()', () => {
+  describe('updateThumbnailScroll()', () => {
     it('calls `scroll` event on the thumbnail wrapper', () => {
       const wrapper = factory({ europeanaIdentifier, displayableMedia });
 
       wrapper.vm.$refs.swiperThubmnails.scroll = sinon.spy();
 
       wrapper.vm.swiper.activeIndex = 1;
-      wrapper.vm.updateThubmnailScroll();
+      wrapper.vm.updateThumbnailScroll();
 
       expect(wrapper.vm.$refs.swiperThubmnails.scroll.called).toEqual(true);
     });
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
index f5d963be15..eed49a2157 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
@@ -1,17 +1,16 @@
-import { createLocalVue } from '@vue/test-utils';
-import { shallowMountNuxt } from '../../utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ItemMediaThumbnail from '@/components/item/ItemMediaThumbnail';
 // import sinon from 'sinon';
 
 const localVue = createLocalVue();
 
-const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMountNuxt(ItemMediaThumbnail, {
+const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMount(ItemMediaThumbnail, {
   localVue,
-  attachTo: document.body,
   propsData,
   mocks: {
-    $route: { query: {} },
-    $t: (key) => key,
+    $route: { path: '/mock/path/', query: {} },
+    $t: (key, opts) => key + JSON.stringify(opts),
+    $nuxt: {},
     ...mocks
   }
 });
@@ -20,6 +19,9 @@ const props = {
   edmType: 'image',
   offset: 0,
   resource: {
+    thumbnails: () => {
+      return { small: '', large: '' };
+    },
     edmType: ''
   }
 };
@@ -34,4 +36,28 @@ describe('components/item/ItemMediaThumbnail', () => {
       expect(thumbnail.isVisible()).toBe(true);
     });
   });
+
+  describe('link', () => {
+    it('uses current URL, plus adds the page as a query param', () => {
+      const wrapper = factory({ propsData: { ...props, offset: 5 } });
+
+      const pageLink = wrapper.vm.link;
+
+      expect(pageLink).toStrictEqual({
+        hash: undefined,
+        path: '/mock/path/',
+        query: { page: 6 }
+      });
+    });
+  });
+
+  describe('label', () => {
+    it('uses the current page in the formated label', () => {
+      const wrapper = factory({ propsData: { ...props, offset: 5 } });
+
+      const pageLabel = wrapper.vm.label;
+
+      expect(pageLabel).toBe('media.pages.indexLabel{\"pageNumber\":6}');
+    });
+  });
 });
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
index cb7b26264c..0b721c75c3 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
@@ -1,16 +1,13 @@
-import { createLocalVue } from '@vue/test-utils';
-import { shallowMountNuxt } from '../../utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ItemMediaThumbnails from '@/components/item/ItemMediaThumbnails';
 // import sinon from 'sinon';
 
 const localVue = createLocalVue();
 
-const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMountNuxt(ItemMediaThumbnails, {
+const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMount(ItemMediaThumbnails, {
   localVue,
-  attachTo: document.body,
   propsData,
   mocks: {
-    $route: { query: {} },
     $t: (key) => key,
     ...mocks
   }

From 10114aed12963e5193af707e0fd9d5b9010779dc Mon Sep 17 00:00:00 2001
From: lbiedinger <lutz.biedinger@gmail.com>
Date: Wed, 25 Sep 2024 16:43:15 +0200
Subject: [PATCH 05/19] linting; fix console warnings

---
 .../tests/unit/components/item/ItemMediaPresentation.spec.js    | 1 +
 .../tests/unit/components/item/ItemMediaThumbnail.spec.js       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js b/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
index 2d63e1d7c8..f25e38bba6 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
@@ -18,6 +18,7 @@ const $apis = {
 const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMountNuxt(ItemMediaPresentation, {
   localVue,
   attachTo: document.body,
+  directives: { 'b-tooltip': () => {} },
   propsData,
   mocks: {
     $apis,
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
index eed49a2157..aff88ec7e1 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
@@ -57,7 +57,7 @@ describe('components/item/ItemMediaThumbnail', () => {
 
       const pageLabel = wrapper.vm.label;
 
-      expect(pageLabel).toBe('media.pages.indexLabel{\"pageNumber\":6}');
+      expect(pageLabel).toBe('media.pages.indexLabel{"pageNumber":6}');
     });
   });
 });

From 87b41f320e26b46cf2ff9068b07ec2c2438c4b5d Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 14:13:26 +0200
Subject: [PATCH 06/19] Align styles sidebar and thumbnail pages

---
 .../components/item/ItemMediaPresentation.vue | 23 +++----
 .../components/item/ItemMediaThumbnail.vue    |  6 +-
 .../components/item/ItemMediaThumbnails.vue   | 67 ++++++++-----------
 3 files changed, 38 insertions(+), 58 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index c29918d5cd..6056c2737a 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -54,6 +54,7 @@
             :aria-label="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
             variant="light-flat"
             class="sidebar-toggle button-icon-only"
+            :class="{ 'active': showSidebar }"
             data-qa="iiif viewer toolbar sidebar toggle"
             @click="showSidebar = !showSidebar"
             @mouseleave="hideTooltips"
@@ -71,14 +72,14 @@
           />
           <b-button
             v-if="resourceCount >= 2"
-            v-b-tooltip.bottom
-            :title="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
+            v-b-tooltip.top="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             variant="light-flat"
             class="pages-toggle button-icon-only ml-3"
-            :class="showPages ? 'active' : ''"
+            :class="{ 'active': showPages }"
             data-qa="show thumbnails button"
-            @click="togglePages"
+            @click="showPages = !showPages"
+            @mouseleave="hideTooltips"
           >
             <span class="icon icon-pages" />
           </b-button>
@@ -86,10 +87,10 @@
       </div>
       <ItemMediaThumbnails
         v-if="resourceCount >= 2"
+        v-show="showPages"
         :resources="thumbnailResources"
         :selected-index="page -1"
         :edm-type="edmType"
-        :show="showPages"
       />
     </div>
   </div>
@@ -202,11 +203,6 @@
         this.$nextTick(() => {
           this.$emit('select', this.resource?.about);
         });
-      },
-
-      togglePages() {
-        this.showPages = !this.showPages;
-        this.hideTooltips();
       }
     }
   };
@@ -242,14 +238,11 @@
       right: 0;
       padding: 0.875rem 1rem;
 
-      .sidebar-toggle {
-        background-color: transparent;
-        font-size: $font-size-large;
-      }
-
+      .sidebar-toggle,
       .pages-toggle {
         background-color: transparent;
         font-size: $font-size-large;
+
         &.active {
           color: $blue;
         }
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
index 7254eb07b4..462255ac81 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnail.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartLink
     :destination="link"
-    class="item-media-thumbnail text-lowercase"
+    class="item-media-thumbnail text-lowercase text-decoration-none"
     data-qa="item media thumbnail"
   >
     <MediaCardImage
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-  import SmartLink from '../generic/SmartLink';
+  import SmartLink from '@/components/generic/SmartLink';
 
   export default {
     name: 'ItemMediaThumbnail',
@@ -135,7 +135,7 @@
     }
 
     &.selected {
-      border: 2px solid $blue;
+      outline: 2px solid $blue;
     }
 
     &::after {
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 46138a5fc3..2f080a0724 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -1,27 +1,28 @@
 <template>
-  <div
-    class="d-flex flex-column position-relative"
+  <transition
+    appear
+    name="fade"
   >
-    <ol
-      ref="mediaThumbnails"
-      class="media-thumbnails d-flex flex-row flex-lg-column"
-      :class="{ 'show': show }"
-    >
-      <li
-        v-for="(resource, index) in resources"
-        :key="index"
+    <div>
+      <ol
+        ref="mediaThumbnails"
+        class="media-thumbnails d-flex flex-row flex-lg-column"
       >
-        <ItemMediaThumbnail
-          :offset="index"
-          class="d-flex-inline mr-2"
-          :class="index === selectedIndex ? 'selected' : ''"
-          :resource="resource"
-          :edm-type="edmType"
-          alt=""
-        />
-      </li>
-    </ol>
-  </div>
+        <li
+          v-for="(resource, index) in resources"
+          :key="index"
+        >
+          <ItemMediaThumbnail
+            :offset="index"
+            class="d-flex-inline mr-2"
+            :class="{ 'selected': index === selectedIndex }"
+            :resource="resource"
+            :edm-type="edmType"
+          />
+        </li>
+      </ol>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -45,10 +46,6 @@
       selectedIndex: {
         type: Number,
         required: true
-      },
-      show: {
-        type: Boolean,
-        default: false
       }
     },
 
@@ -87,36 +84,26 @@
 
 <style lang="scss">
   @import '@europeana/style/scss/variables';
+  @import '@europeana/style/scss/transitions';
 
   .media-thumbnails {
-    padding: 0 1rem;
+    padding: 1rem;
     flex: 1 1 auto;
     background-color: $white;
     overflow-x: scroll;
     scrollbar-width: thin;
-    height: 0;
+    height: 100%;
     transition: $standard-transition;
 
     li {
       list-style-type: none;
     }
 
-    &.show {
-      transition: $standard-transition;
-      padding: 1rem;
-      height: auto;
-    }
-
     @media (min-width: $bp-large) {
       overflow-x: hidden;
       overflow-y: auto;
-      width: 0;
-      height: auto;
-      padding: 1rem 0;
-
-      &.show {
-        width: auto;
-      }
+      padding: 1rem;
+      width: 13rem;
     }
   }
 </style>

From adebd9091668c3e62ccc9beb509a258d47647b6c Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 14:19:18 +0200
Subject: [PATCH 07/19] Clean up tests

---
 .../tests/unit/components/item/ItemMediaThumbnail.spec.js   | 1 -
 .../tests/unit/components/item/ItemMediaThumbnails.spec.js  | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
index aff88ec7e1..80c735eaff 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
@@ -1,6 +1,5 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ItemMediaThumbnail from '@/components/item/ItemMediaThumbnail';
-// import sinon from 'sinon';
 
 const localVue = createLocalVue();
 
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
index 0b721c75c3..56cb8fab4f 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
@@ -1,15 +1,13 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ItemMediaThumbnails from '@/components/item/ItemMediaThumbnails';
-// import sinon from 'sinon';
 
 const localVue = createLocalVue();
 
-const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMount(ItemMediaThumbnails, {
+const factory = ({ propsData = {} } = {}) => shallowMount(ItemMediaThumbnails, {
   localVue,
   propsData,
   mocks: {
-    $t: (key) => key,
-    ...mocks
+    $t: (key) => key
   }
 });
 

From 21881f4467c00be8238c6ea04003f81c2b4ee324 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 15:16:35 +0200
Subject: [PATCH 08/19] a11y: add aria attributes for hide/show toggles and set
 focus on sidebar when expanded

---
 .../components/item/ItemMediaPresentation.vue | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 6056c2737a..71ed65e873 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -40,7 +40,11 @@
             </pre>
           </code>
           <ItemMediaSidebar
-            v-if="showSidebar"
+            v-if="sidebarHasContent"
+            v-show="showSidebar"
+            id="item-media-sidebar"
+            ref="sidebar"
+            tabindex="0"
             :annotation-page="annotationPage"
             :uri="uri"
           />
@@ -56,7 +60,9 @@
             class="sidebar-toggle button-icon-only"
             :class="{ 'active': showSidebar }"
             data-qa="iiif viewer toolbar sidebar toggle"
-            @click="showSidebar = !showSidebar"
+            aria-controls="item-media-sidebar"
+            :aria-expanded="showSidebar ? 'true' : 'false'"
+            @click="toggleSidebar"
             @mouseleave="hideTooltips"
           >
             <span class="icon icon-kebab" />
@@ -78,6 +84,8 @@
             class="pages-toggle button-icon-only ml-3"
             :class="{ 'active': showPages }"
             data-qa="show thumbnails button"
+            aria-controls="item-media-thumbnails"
+            :aria-expanded="showPages ? 'true' : 'false'"
             @click="showPages = !showPages"
             @mouseleave="hideTooltips"
           >
@@ -88,6 +96,7 @@
       <ItemMediaThumbnails
         v-if="resourceCount >= 2"
         v-show="showPages"
+        id="item-media-thumbnails"
         :resources="thumbnailResources"
         :selected-index="page -1"
         :edm-type="edmType"
@@ -203,6 +212,15 @@
         this.$nextTick(() => {
           this.$emit('select', this.resource?.about);
         });
+      },
+      async toggleSidebar() {
+        this.showSidebar = !this.showSidebar;
+
+        if (this.showSidebar) {
+          this.$nextTick(() => {
+            this.$refs.sidebar?.$el.focus();
+          });
+        }
       }
     }
   };

From 3a45cba8af87343e462d723940e1dccf2d8781ac Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 16:23:24 +0200
Subject: [PATCH 09/19] Make toolbar full width

---
 .../components/item/ItemMediaPresentation.vue | 49 ++++++++++++-------
 .../components/item/ItemMediaThumbnails.vue   |  2 +-
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 71ed65e873..8672e502e7 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -7,8 +7,17 @@
         class="iiif-viewer-inner-wrapper h-100 w-100 d-flex flex-column overflow-hidden"
       >
         <div
-          class="h-100 d-flex flex-row-reverse overflow-auto"
+          class="h-100 d-flex overflow-auto"
         >
+          <ItemMediaSidebar
+            v-if="sidebarHasContent"
+            v-show="showSidebar"
+            id="item-media-sidebar"
+            ref="sidebar"
+            tabindex="0"
+            :annotation-page="annotationPage"
+            :uri="uri"
+          />
           <MediaImageViewer
             v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
             :url="resource.about"
@@ -39,14 +48,15 @@
             -->{{ JSON.stringify(resource, null, 2) }}
             </pre>
           </code>
-          <ItemMediaSidebar
-            v-if="sidebarHasContent"
-            v-show="showSidebar"
-            id="item-media-sidebar"
-            ref="sidebar"
+          <ItemMediaThumbnails
+            v-if="resourceCount >= 2"
+            v-show="showPages"
+            id="item-media-thumbnails"
+            ref="itemPages"
             tabindex="0"
-            :annotation-page="annotationPage"
-            :uri="uri"
+            :resources="thumbnailResources"
+            :selected-index="page -1"
+            :edm-type="edmType"
           />
         </div>
         <div
@@ -86,21 +96,13 @@
             data-qa="show thumbnails button"
             aria-controls="item-media-thumbnails"
             :aria-expanded="showPages ? 'true' : 'false'"
-            @click="showPages = !showPages"
+            @click="togglePages"
             @mouseleave="hideTooltips"
           >
             <span class="icon icon-pages" />
           </b-button>
         </div>
       </div>
-      <ItemMediaThumbnails
-        v-if="resourceCount >= 2"
-        v-show="showPages"
-        id="item-media-thumbnails"
-        :resources="thumbnailResources"
-        :selected-index="page -1"
-        :edm-type="edmType"
-      />
     </div>
   </div>
 </template>
@@ -213,7 +215,8 @@
           this.$emit('select', this.resource?.about);
         });
       },
-      async toggleSidebar() {
+
+      toggleSidebar() {
         this.showSidebar = !this.showSidebar;
 
         if (this.showSidebar) {
@@ -221,6 +224,16 @@
             this.$refs.sidebar?.$el.focus();
           });
         }
+      },
+
+      togglePages() {
+        this.showPages = !this.showPages;
+
+        if (this.showPages) {
+          this.$nextTick(() => {
+            this.$refs.itemPages?.$el.focus();
+          });
+        }
       }
     }
   };
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 2f080a0724..5718f9516a 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -6,7 +6,7 @@
     <div>
       <ol
         ref="mediaThumbnails"
-        class="media-thumbnails d-flex flex-row flex-lg-column"
+        class="media-thumbnails d-flex flex-row flex-lg-column mb-0"
       >
         <li
           v-for="(resource, index) in resources"

From 88357642ffd0322be01bf5dd751c9eed74df2b6c Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 16:24:12 +0200
Subject: [PATCH 10/19] a11y: hide sidebar or pages bar on esc

---
 packages/portal/src/components/item/ItemMediaPresentation.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 8672e502e7..211bd21870 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -17,6 +17,7 @@
             tabindex="0"
             :annotation-page="annotationPage"
             :uri="uri"
+            @keydown.escape.native="showSidebar = false"
           />
           <MediaImageViewer
             v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
@@ -57,6 +58,7 @@
             :resources="thumbnailResources"
             :selected-index="page -1"
             :edm-type="edmType"
+            @keydown.escape.native="showPages = false"
           />
         </div>
         <div

From c76e8613c2075e57f4019295c5703e4410d98dfb Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 16:41:51 +0200
Subject: [PATCH 11/19] Set sidebar links aria-label on tab link

---
 packages/portal/src/components/item/ItemMediaSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/portal/src/components/item/ItemMediaSidebar.vue b/packages/portal/src/components/item/ItemMediaSidebar.vue
index 530ba4c789..ec9cd92d10 100644
--- a/packages/portal/src/components/item/ItemMediaSidebar.vue
+++ b/packages/portal/src/components/item/ItemMediaSidebar.vue
@@ -27,6 +27,7 @@
           v-if="!!uri"
           data-qa="item media sidebar links"
           button-id="item-media-sidebar-links"
+          :title-link-attributes="{ 'aria-label': $t('media.sidebar.links') }"
           @mouseleave.native="hideTooltips"
         >
           <b-tooltip
@@ -36,7 +37,6 @@
           />
           <template #title>
             <span
-              :aria-label="$t('media.sidebar.links')"
               class="icon icon-link"
             />
           </template>

From 97404ae1c45c82bffbe47e98df94799d702277f2 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 18:11:41 +0200
Subject: [PATCH 12/19] Refactor to have absolute positioned sidebars and
 handle mobile thumbnail pages

---
 .../components/item/ItemMediaPresentation.vue | 194 +++++++++---------
 .../src/components/item/ItemMediaSidebar.vue  |  13 +-
 .../components/item/ItemMediaThumbnails.vue   |  14 +-
 3 files changed, 122 insertions(+), 99 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 211bd21870..910a1b404e 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -1,84 +1,72 @@
 <template>
   <div>
     <div
-      class="iiif-viewer-wrapper d-flex flex-column flex-lg-row"
+      class="iiif-viewer-wrapper overflow-hidden"
     >
       <div
-        class="iiif-viewer-inner-wrapper h-100 w-100 d-flex flex-column overflow-hidden"
+        class="iiif-viewer-inner-wrapper w-100 overflow-auto"
       >
-        <div
-          class="h-100 d-flex overflow-auto"
+        <ItemMediaSidebar
+          v-if="sidebarHasContent"
+          v-show="showSidebar"
+          id="item-media-sidebar"
+          ref="sidebar"
+          tabindex="0"
+          :annotation-page="annotationPage"
+          :uri="uri"
+          @keydown.escape.native="showSidebar = false"
+        />
+        <MediaImageViewer
+          v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
+          :url="resource.about"
+          :item-id="itemId"
+          :width="resource.ebucoreWidth"
+          :height="resource.ebucoreHeight"
+          :format="resource.ebucoreHasMimeType"
+          :service="resource.svcsHasService"
+        />
+        <MediaPDFViewer
+          v-else-if="resource?.ebucoreHasMimeType === 'application/pdf'"
+          :url="resource.about"
+          :item-id="itemId"
+        />
+        <MediaAudioVisualPlayer
+          v-else-if="resource?.isPlayableMedia"
+          :url="resource.about"
+          :format="resource.ebucoreHasMimeType"
+          :item-id="itemId"
+        />
+        <code
+          v-else
+          class="h-50 w-100 p-5"
         >
-          <ItemMediaSidebar
-            v-if="sidebarHasContent"
-            v-show="showSidebar"
-            id="item-media-sidebar"
-            ref="sidebar"
-            tabindex="0"
-            :annotation-page="annotationPage"
-            :uri="uri"
-            @keydown.escape.native="showSidebar = false"
-          />
-          <MediaImageViewer
-            v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
-            :url="resource.about"
-            :item-id="itemId"
-            :width="resource.ebucoreWidth"
-            :height="resource.ebucoreHeight"
-            :format="resource.ebucoreHasMimeType"
-            :service="resource.svcsHasService"
-          />
-          <MediaPDFViewer
-            v-else-if="resource?.ebucoreHasMimeType === 'application/pdf'"
-            :url="resource.about"
-            :item-id="itemId"
-          />
-          <MediaAudioVisualPlayer
-            v-else-if="resource?.isPlayableMedia"
-            :url="resource.about"
-            :format="resource.ebucoreHasMimeType"
-            :item-id="itemId"
-          />
-          <code
-            v-else
-            class="h-50 w-100 p-5"
-          >
-            <pre
-              :style="{ color: 'white' }"
-            ><!--
+          <pre
+            :style="{ color: 'white' }"
+          ><!--
             -->{{ JSON.stringify(resource, null, 2) }}
             </pre>
-          </code>
-          <ItemMediaThumbnails
-            v-if="resourceCount >= 2"
-            v-show="showPages"
-            id="item-media-thumbnails"
-            ref="itemPages"
-            tabindex="0"
-            :resources="thumbnailResources"
-            :selected-index="page -1"
-            :edm-type="edmType"
-            @keydown.escape.native="showPages = false"
-          />
-        </div>
-        <div
-          class="iiif-viewer-toolbar d-flex align-items-center"
+        </code>
+      </div>
+      <div
+        class="iiif-viewer-toolbar d-flex flex-wrap flex-lg-nowrap align-items-center"
+      >
+        <!-- TODO: Refactor into separate ItemMediaToolbar component -->
+        <b-button
+          v-if="sidebarHasContent"
+          v-b-tooltip.top="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
+          :aria-label="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
+          variant="light-flat"
+          class="sidebar-toggle button-icon-only"
+          :class="{ 'active': showSidebar }"
+          data-qa="iiif viewer toolbar sidebar toggle"
+          aria-controls="item-media-sidebar"
+          :aria-expanded="showSidebar ? 'true' : 'false'"
+          @click="toggleSidebar"
+          @mouseleave="hideTooltips"
         >
-          <b-button
-            v-if="sidebarHasContent"
-            v-b-tooltip.top="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
-            :aria-label="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
-            variant="light-flat"
-            class="sidebar-toggle button-icon-only"
-            :class="{ 'active': showSidebar }"
-            data-qa="iiif viewer toolbar sidebar toggle"
-            aria-controls="item-media-sidebar"
-            :aria-expanded="showSidebar ? 'true' : 'false'"
-            @click="toggleSidebar"
-            @mouseleave="hideTooltips"
-          >
-            <span class="icon icon-kebab" />
-          </b-button>
+          <span class="icon icon-kebab" />
+        </b-button>
+        <div class="d-flex w-100 w-lg-auto">
           <PaginationNavInput
             :per-page="1"
             :total-results="resourceCount"
@@ -93,7 +81,7 @@
             v-b-tooltip.top="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             variant="light-flat"
-            class="pages-toggle button-icon-only ml-3"
+            class="pages-toggle button-icon-only ml-3 mr-auto"
             :class="{ 'active': showPages }"
             data-qa="show thumbnails button"
             aria-controls="item-media-thumbnails"
@@ -105,8 +93,20 @@
           </b-button>
         </div>
       </div>
+      <ItemMediaThumbnails
+        v-if="resourceCount >= 2"
+        v-show="showPages"
+        id="item-media-thumbnails"
+        ref="itemPages"
+        tabindex="0"
+        :resources="thumbnailResources"
+        :selected-index="page -1"
+        :edm-type="edmType"
+        @keydown.escape.native="showPages = false"
+      />
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -245,40 +245,50 @@
   @import '@europeana/style/scss/variables';
   @import '@europeana/style/scss/iiif';
 
+  .iiif-viewer-wrapper {
+    position: relative;
+
+    @media (max-width: ($bp-medium - 1px)) {
+      max-height: calc($swiper-height-medium + 12.375rem);
+    }
+
+    @media (max-width: ($bp-large - 1px)) {
+      max-height: calc($swiper-height + 12.375rem);
+    }
+  }
+
   .iiif-viewer-inner-wrapper {
     background-color: $black;
-    position: relative;
+    @include swiper-height(4rem);
 
-    &.error {
-      overflow: auto;
+    @media (max-width: ($bp-large - 1px)) {
+      position: relative;
     }
 
-    .iiif-viewer-sidebar {
-      background-color: $white;
+    &.error {
       overflow: auto;
-
-      .tab-pane {
-        overflow-wrap: break-word;
-        padding: 1rem;
-      }
     }
+  }
+
+  .iiif-viewer-toolbar {
+    background-color: rgba($white, 0.95);
+    padding: 0.875rem 1rem;
 
-    .iiif-viewer-toolbar {
-      background-color: rgba($white, 0.95);
+    @media (min-width: $bp-large) {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      padding: 0.875rem 1rem;
+      z-index: 2;
+    }
 
-      .sidebar-toggle,
-      .pages-toggle {
-        background-color: transparent;
-        font-size: $font-size-large;
+    .sidebar-toggle,
+    .pages-toggle {
+      background-color: transparent;
+      font-size: $font-size-large;
 
-        &.active {
-          color: $blue;
-        }
+      &.active {
+        color: $blue;
       }
     }
   }
diff --git a/packages/portal/src/components/item/ItemMediaSidebar.vue b/packages/portal/src/components/item/ItemMediaSidebar.vue
index ec9cd92d10..1a7418dbd6 100644
--- a/packages/portal/src/components/item/ItemMediaSidebar.vue
+++ b/packages/portal/src/components/item/ItemMediaSidebar.vue
@@ -85,8 +85,17 @@
   @import '@europeana/style/scss/transitions';
 
   .iiif-viewer-sidebar {
-    flex-basis: 260px;
-    flex-shrink: 0;
+    width: 260px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: $white;
+
+    .tab-pane {
+      overflow-wrap: break-word;
+    }
 
     ::v-deep .tab-content {
       padding: 1rem 1.5rem 1rem 0.875rem;
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 5718f9516a..77498920a7 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -3,10 +3,10 @@
     appear
     name="fade"
   >
-    <div>
+    <div class="media-thumbnails">
       <ol
         ref="mediaThumbnails"
-        class="media-thumbnails d-flex flex-row flex-lg-column mb-0"
+        class="d-flex flex-row flex-lg-column mb-0 pl-0"
       >
         <li
           v-for="(resource, index) in resources"
@@ -14,7 +14,7 @@
         >
           <ItemMediaThumbnail
             :offset="index"
-            class="d-flex-inline mr-2"
+            class="d-flex-inline mr-2 mr-lg-auto"
             :class="{ 'selected': index === selectedIndex }"
             :resource="resource"
             :edm-type="edmType"
@@ -92,18 +92,22 @@
     background-color: $white;
     overflow-x: scroll;
     scrollbar-width: thin;
-    height: 100%;
-    transition: $standard-transition;
 
     li {
       list-style-type: none;
     }
 
     @media (min-width: $bp-large) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
       overflow-x: hidden;
       overflow-y: auto;
       padding: 1rem;
       width: 13rem;
+      height: 100%;
     }
   }
 </style>

From 7ec63eaa9521c176a0ccdd1857a479be213088d9 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Thu, 26 Sep 2024 18:19:55 +0200
Subject: [PATCH 13/19] Fix lint error

---
 packages/portal/src/components/item/ItemMediaPresentation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 910a1b404e..ca8e3c70ac 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -106,7 +106,6 @@
       />
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -254,6 +253,7 @@
 
     @media (max-width: ($bp-large - 1px)) {
       max-height: calc($swiper-height + 12.375rem);
+      height: auto;
     }
   }
 

From 25c7e6339a8d4e7158530b736b1cf7f4c8ef17e5 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Mon, 30 Sep 2024 15:37:11 +0200
Subject: [PATCH 14/19] Mobile pagination and thumbnails style fixes

---
 .../components/item/ItemMediaPresentation.vue | 26 ++++++++++++++++---
 .../components/item/ItemMediaThumbnails.vue   |  8 +++---
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index ca8e3c70ac..aef73cdd59 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -66,7 +66,10 @@
         >
           <span class="icon icon-kebab" />
         </b-button>
-        <div class="d-flex w-100 w-lg-auto">
+        <div
+          class="iiif-viewer-toolbar-pagination d-flex w-100 w-lg-auto"
+          :class="{ closed: !showPages }"
+        >
           <PaginationNavInput
             :per-page="1"
             :total-results="resourceCount"
@@ -81,7 +84,7 @@
             v-b-tooltip.top="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             variant="light-flat"
-            class="pages-toggle button-icon-only ml-3 mr-auto"
+            class="pages-toggle button-icon-only ml-3 mr-auto mr-lg-0"
             :class="{ 'active': showPages }"
             data-qa="show thumbnails button"
             aria-controls="item-media-thumbnails"
@@ -252,7 +255,7 @@
     }
 
     @media (max-width: ($bp-large - 1px)) {
-      max-height: calc($swiper-height + 12.375rem);
+      max-height: calc($swiper-height + 13.375rem);
       height: auto;
     }
   }
@@ -272,7 +275,6 @@
 
   .iiif-viewer-toolbar {
     background-color: rgba($white, 0.95);
-    padding: 0.875rem 1rem;
 
     @media (min-width: $bp-large) {
       position: absolute;
@@ -282,6 +284,10 @@
       z-index: 2;
     }
 
+    .sidebar-toggle {
+      margin: 0.875rem 1rem;
+    }
+
     .sidebar-toggle,
     .pages-toggle {
       background-color: transparent;
@@ -293,6 +299,18 @@
     }
   }
 
+  .iiif-viewer-toolbar-pagination {
+    padding: 0.875rem 1rem;
+
+    @media(max-width: ($bp-large - 1px)) {
+      border-top: 1px solid $bodygrey;
+
+      &.closed {
+        border-bottom: 1px solid $bodygrey;
+      }
+    }
+  }
+
   ::v-deep .pagination {
     ul {
       margin-bottom: 0;
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 77498920a7..3d64256081 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -14,7 +14,7 @@
         >
           <ItemMediaThumbnail
             :offset="index"
-            class="d-flex-inline mr-2 mr-lg-auto"
+            class="d-flex-inline mr-3 mr-lg-auto"
             :class="{ 'selected': index === selectedIndex }"
             :resource="resource"
             :edm-type="edmType"
@@ -87,10 +87,12 @@
   @import '@europeana/style/scss/transitions';
 
   .media-thumbnails {
-    padding: 1rem;
+    // overlap 2px to save space for focus outline
+    margin-top: -2px;
+    padding: 2px 1rem 1rem;
     flex: 1 1 auto;
     background-color: $white;
-    overflow-x: scroll;
+    overflow-x: auto;
     scrollbar-width: thin;
 
     li {

From af81a9ea30cdaa13ddbab01f1266cf27eb6fd689 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Mon, 30 Sep 2024 16:21:18 +0200
Subject: [PATCH 15/19] Prevent feedback button overlap and fix max-height on
 mobile

---
 .../src/components/item/ItemMediaPresentation.vue   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index aef73cdd59..2967a4b79d 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -250,19 +250,20 @@
   .iiif-viewer-wrapper {
     position: relative;
 
-    @media (max-width: ($bp-medium - 1px)) {
-      max-height: calc($swiper-height-medium + 12.375rem);
+    @media (max-width: ($bp-large - 1px)) {
+      max-height: none;
+      height: auto
     }
 
-    @media (max-width: ($bp-large - 1px)) {
-      max-height: calc($swiper-height + 13.375rem);
-      height: auto;
+    // prevent feedback button overlapping thumbnails toggle laptop screens
+    @media (min-width: $bp-large) and (max-height: 845px) {
+      height: calc($swiper-height - 2rem);
     }
   }
 
   .iiif-viewer-inner-wrapper {
     background-color: $black;
-    @include swiper-height(4rem);
+    @include swiper-height(0px);
 
     @media (max-width: ($bp-large - 1px)) {
       position: relative;

From 3e5bd664abf0bbcb3c61e5550eeb717c7f79fba0 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Mon, 30 Sep 2024 18:24:58 +0200
Subject: [PATCH 16/19] Refactor and fix updateThumbnailScroll

---
 .../components/item/ItemMediaThumbnails.vue   | 29 ++++--
 .../item/ItemMediaThumbnails.spec.js          | 94 +++++++++++++++++--
 2 files changed, 107 insertions(+), 16 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 3d64256081..f671a55d15 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -3,9 +3,12 @@
     appear
     name="fade"
   >
-    <div class="media-thumbnails">
+    <div
+      ref="mediaThumbnails"
+      class="media-thumbnails"
+    >
       <ol
-        ref="mediaThumbnails"
+        ref="mediaThumbnailsList"
         class="d-flex flex-row flex-lg-column mb-0 pl-0"
       >
         <li
@@ -56,6 +59,14 @@
     created() {
       window.addEventListener('resize', this.updateThumbnailScroll);
     },
+
+    mounted() {
+      if (this.selectedIndex > 0) {
+        this.$nextTick(() => {
+          this.updateThumbnailScroll();
+        });
+      }
+    },
     destroyed() {
       window.removeEventListener('resize', this.updateThumbnailScroll);
     },
@@ -63,19 +74,25 @@
     methods: {
       updateThumbnailScroll() {
         const mediaThumbnailsElement = this.$refs.mediaThumbnails;
+        if (!mediaThumbnailsElement) {
+          return;
+        }
+
         const elementWidth = mediaThumbnailsElement.offsetWidth;
         const elementHeight = mediaThumbnailsElement.offsetHeight;
 
-        if (window?.innerWidth <= 991) {
+        if (window.innerWidth <= 991) {
           let cardWidth = 184;
           const padding = 16;
-          if (window?.innerWidth <= 767) {
+          if (window.innerWidth <= 767) {
             cardWidth = 90;
           }
-          mediaThumbnailsElement?.scroll(padding + (this.selectedIndex * cardWidth) - ((elementWidth / 2) - (cardWidth / 2)), 0);
+          const scrollLeft = padding + (this.selectedIndex * cardWidth) - ((elementWidth / 2) - (cardWidth / 2));
+          mediaThumbnailsElement.scroll(scrollLeft, 0);
         } else {
           const cardHeight = 140; // includes bottom padding
-          mediaThumbnailsElement?.scroll(0, (this.selectedIndex * cardHeight) - ((elementHeight / 2) - (cardHeight / 2)));
+          const scrollHeight = (this.selectedIndex * cardHeight) - ((elementHeight / 2) - (cardHeight / 2));
+          mediaThumbnailsElement.scroll(0, scrollHeight);
         }
       }
     }
diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
index 56cb8fab4f..9cbdc249af 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaThumbnails.spec.js
@@ -1,32 +1,106 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ItemMediaThumbnails from '@/components/item/ItemMediaThumbnails';
+import sinon from 'sinon';
 
 const localVue = createLocalVue();
 
-const factory = ({ propsData = {} } = {}) => shallowMount(ItemMediaThumbnails, {
+const props = {
+  edmType: 'image',
+  selectedIndex: 0,
+  resources: [
+    { edmType: '' },
+    { edmType: '' },
+    { edmType: '' },
+    { edmType: '' },
+    { edmType: '' }
+  ]
+};
+
+const factory = (propsData = props) => shallowMount(ItemMediaThumbnails, {
   localVue,
+  attachTo: document.body,
   propsData,
   mocks: {
     $t: (key) => key
   }
 });
 
-const props = {
-  edmType: 'image',
-  selectedIndex: 0,
-  resources: [{
-    edmType: ''
-  }]
-};
-
 describe('components/item/ItemMediaThumbnail', () => {
   describe('template', () => {
     it('renders a item media thumbnail', () => {
-      const wrapper = factory({ propsData: props });
+      const wrapper = factory();
+      wrapper.vm.$refs.mediaThumbnails.scroll = sinon.spy();
 
       const thumbnail = wrapper.find('.media-thumbnails');
 
       expect(thumbnail.isVisible()).toBe(true);
     });
   });
+
+  describe('when the selected page is after the first page', () => {
+    it('scrolls the thumbnails bar to the active position', async() => {
+      const wrapper = factory({ ...props, selectedIndex: 2 });
+      wrapper.vm.$refs.mediaThumbnails.scroll = sinon.spy();
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.$refs.mediaThumbnails.scroll.called).toBe(true);
+    });
+
+    describe('when the media thumbnails element is not yet available', () => {
+      it('does not scroll the thumbnails bar', () => {
+        const wrapper = factory({ ...props, selectedIndex: 2 });
+        wrapper.vm.$refs.mediaThumbnails = null;
+
+        expect(wrapper.vm.$refs.mediaThumbnails?.scroll).toBe(undefined);
+      });
+    });
+  });
+
+  describe('on resize', () => {
+    it('scrolls the thumbnails bar to the active position', () => {
+      const wrapper = factory();
+      wrapper.vm.$refs.mediaThumbnails.scroll = sinon.spy();
+
+      window.dispatchEvent(new Event('resize'));
+
+      expect(wrapper.vm.$refs.mediaThumbnails.scroll.called).toBe(true);
+    });
+
+    describe('when the viewport is 991 pixels or less', () => {
+      it('scrolls the thumbnails bar to the active position', () => {
+        const wrapper = factory();
+        wrapper.vm.$refs.mediaThumbnails.scroll = sinon.spy();
+
+        window.innerWidth = 991;
+        window.dispatchEvent(new Event('resize'));
+
+        expect(wrapper.vm.$refs.mediaThumbnails.scroll.calledWith(108, 0)).toBe(true);
+      });
+    });
+
+    describe('when the viewport is 767 pixels or less', () => {
+      it('scrolls the thumbnails bar to the active position', () => {
+        const wrapper = factory();
+        wrapper.vm.$refs.mediaThumbnails.scroll = sinon.spy();
+
+        window.innerWidth = 767;
+        window.dispatchEvent(new Event('resize'));
+
+        expect(wrapper.vm.$refs.mediaThumbnails.scroll.calledWith(61, 0)).toBe(true);
+      });
+    });
+  });
+
+  describe('on destroy', () => {
+    it('should remove resize event listener', () => {
+      const wrapper = factory();
+
+      const removeEventListener = sinon.spy(window, 'removeEventListener');
+
+      wrapper.destroy();
+
+      expect(removeEventListener.called).toBe(true);
+    });
+  });
 });

From 886d076cad85ec2e2e77c7630592f52859148842 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Tue, 1 Oct 2024 10:12:24 +0200
Subject: [PATCH 17/19] Style fixes

---
 .../portal/src/components/item/ItemMediaPresentation.vue  | 6 +++++-
 packages/portal/src/components/item/ItemMediaSidebar.vue  | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 2967a4b79d..efca7e3ac7 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -249,6 +249,7 @@
 
   .iiif-viewer-wrapper {
     position: relative;
+    @include swiper-height(0px);
 
     @media (max-width: ($bp-large - 1px)) {
       max-height: none;
@@ -276,13 +277,16 @@
 
   .iiif-viewer-toolbar {
     background-color: rgba($white, 0.95);
+    margin-top: -3.25rem;
+    position: relative;
+    z-index: 2;
 
     @media (min-width: $bp-large) {
+      margin-top: 0;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 2;
     }
 
     .sidebar-toggle {
diff --git a/packages/portal/src/components/item/ItemMediaSidebar.vue b/packages/portal/src/components/item/ItemMediaSidebar.vue
index 1a7418dbd6..cff887794d 100644
--- a/packages/portal/src/components/item/ItemMediaSidebar.vue
+++ b/packages/portal/src/components/item/ItemMediaSidebar.vue
@@ -85,7 +85,7 @@
   @import '@europeana/style/scss/transitions';
 
   .iiif-viewer-sidebar {
-    width: 260px;
+    width: 230px;
     position: absolute;
     top: 0;
     left: 0;
@@ -93,12 +93,16 @@
     z-index: 1;
     background-color: $white;
 
+    .tabs {
+      background-color: $white;
+    }
+
     .tab-pane {
       overflow-wrap: break-word;
     }
 
     ::v-deep .tab-content {
-      padding: 1rem 1.5rem 1rem 0.875rem;
+      padding: 1rem 1.5rem 4rem 0.875rem;
       overflow: auto;
 
       h2 {

From 3b5284da847d630533cb14ace74e3eb380daa133 Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Tue, 1 Oct 2024 14:14:13 +0200
Subject: [PATCH 18/19] Add unit tests

---
 .../components/item/ItemMediaPresentation.vue |  5 +-
 .../components/item/ItemMediaThumbnails.vue   |  1 +
 .../item/ItemMediaPresentation.spec.js        | 63 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index efca7e3ac7..11f03e27bd 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -67,6 +67,7 @@
           <span class="icon icon-kebab" />
         </b-button>
         <div
+          v-if="resourceCount >= 2"
           class="iiif-viewer-toolbar-pagination d-flex w-100 w-lg-auto"
           :class="{ closed: !showPages }"
         >
@@ -80,13 +81,12 @@
             class="pagination ml-auto"
           />
           <b-button
-            v-if="resourceCount >= 2"
             v-b-tooltip.top="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
             variant="light-flat"
             class="pages-toggle button-icon-only ml-3 mr-auto mr-lg-0"
             :class="{ 'active': showPages }"
-            data-qa="show thumbnails button"
+            data-qa="iiif viewer toolbar pages toggle"
             aria-controls="item-media-thumbnails"
             :aria-expanded="showPages ? 'true' : 'false'"
             @click="togglePages"
@@ -105,6 +105,7 @@
         :resources="thumbnailResources"
         :selected-index="page -1"
         :edm-type="edmType"
+        data-qa="item media thumbnails"
         @keydown.escape.native="showPages = false"
       />
     </div>
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index f671a55d15..3d812a305f 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -67,6 +67,7 @@
         });
       }
     },
+
     destroyed() {
       window.removeEventListener('resize', this.updateThumbnailScroll);
     },
diff --git a/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js b/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
index ddb667c53d..1db9df72a7 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaPresentation.spec.js
@@ -3,6 +3,7 @@ import { shallowMountNuxt } from '../../utils';
 import BootstrapVue from 'bootstrap-vue';
 import ItemMediaPresentation from '@/components/item/ItemMediaPresentation';
 import nock from 'nock';
+import sinon from 'sinon';
 
 const localVue = createLocalVue();
 localVue.use(BootstrapVue);
@@ -70,13 +71,73 @@ describe('components/item/ItemMediaPresentation', () => {
         it('is visible', async() => {
           const wrapper = factory();
 
-          await wrapper.setData({ annotationPage: [] });
+          await wrapper.setData({ annotationPage: {} });
 
           const sidebarToggle = wrapper.find('[data-qa="iiif viewer toolbar sidebar toggle"]');
 
           expect(sidebarToggle.isVisible()).toBe(true);
         });
       });
+
+      describe('on click', () => {
+        it('opens the sidebar', () => {
+          const wrapper = factory({ propsData: { uri: 'https://example.org/manifest' } });
+
+          wrapper.find('[data-qa="iiif viewer toolbar sidebar toggle"]').trigger('click');
+
+          expect(wrapper.vm.showSidebar).toBe(true);
+        });
+        it('sets focus to the sidebar', async() => {
+          const wrapper = factory({ propsData: { uri: 'https://example.org/manifest' } });
+          wrapper.vm.$refs.sidebar.$el.focus = sinon.spy();
+
+          wrapper.find('[data-qa="iiif viewer toolbar sidebar toggle"]').trigger('click');
+
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.$refs.sidebar.$el.focus.called).toBe(true);
+        });
+      });
+    });
+
+    describe('pages toggle button', () => {
+      describe('when there are two or more pages', () => {
+        it('is visible', async() => {
+          const wrapper = factory();
+
+          await wrapper.setData({ presentation: { resources: [{}, {}] } });
+
+          const pagesToggle = wrapper.find('[data-qa="iiif viewer toolbar pages toggle"]');
+
+          expect(pagesToggle.isVisible()).toBe(true);
+        });
+      });
+
+      describe('on click', () => {
+        it('closes and opens the item media thumbnails sidebar', async() => {
+          const wrapper = factory();
+
+          await wrapper.setData({ presentation: { resources: [{}, {}] } });
+
+          wrapper.find('[data-qa="iiif viewer toolbar pages toggle"]').trigger('click');
+          expect(wrapper.vm.showPages).toBe(false);
+          wrapper.find('[data-qa="iiif viewer toolbar pages toggle"]').trigger('click');
+          expect(wrapper.vm.showPages).toBe(true);
+        });
+        it('sets focus to the item media thumbnails sidebar', async() => {
+          const wrapper = factory();
+          await wrapper.setData({ presentation: { resources: [{}, {}] } });
+
+          wrapper.vm.$refs.itemPages.$el.focus = sinon.spy();
+          wrapper.vm.showPages = false;
+
+          wrapper.find('[data-qa="iiif viewer toolbar pages toggle"]').trigger('click');
+
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.$refs.itemPages.$el.focus.called).toBe(true);
+        });
+      });
     });
   });
 

From 6b4e31975c22a7863d51261efd8a871fdcee4aad Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Tue, 1 Oct 2024 14:24:51 +0200
Subject: [PATCH 19/19] Increase size limit

---
 packages/portal/tests/size/.size-limit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/portal/tests/size/.size-limit.json b/packages/portal/tests/size/.size-limit.json
index f7d54ea962..c803bd7db7 100644
--- a/packages/portal/tests/size/.size-limit.json
+++ b/packages/portal/tests/size/.size-limit.json
@@ -19,7 +19,7 @@
   {
     "name": "portal.js server",
     "running": false,
-    "limit": "1355 KB",
+    "limit": "1360 KB",
     "path": [
       ".nuxt/dist/server/*.js"
     ]