Improve catalog ranges rendering

VedaWebProject · Sep 26, 2024 · e43f874 · e43f874
1 parent 2e71b87
commit e43f874
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/Tekst-Web/src/assets/main.css b/Tekst-Web/src/assets/main.css
@@ -285,7 +285,7 @@ code {
 .gray-box {
   padding: var(--gap-lg);
   margin: var(--gap-lg) 0;
-  background-color: var(--main-bg-color);
+  background-color: color-mix(in srgb, var(--main-bg-color), #0000 40%);
   border-radius: var(--border-radius);
 }
 

diff --git a/Tekst-Web/src/components/resource/ResourceCoverageWidget.vue b/Tekst-Web/src/components/resource/ResourceCoverageWidget.vue
@@ -87,15 +87,24 @@ onMounted(async () => {
       <div v-else class="text-small mb-sm" style="color: var(--col-error)">
         {{ $t('browse.contents.widgets.infoWidget.coverageRangesMissing') }}
       </div>
-      <ul class="m-0">
-        <li v-for="(range, index) in coverage.ranges" :key="`${index}_${range.toString()}`">
-          <span class="range-boundary">{{ range[0] }}</span>
-          <template v-if="range[0] !== range[1]">
-            <span class="mx-sm">–</span>
-            <span class="range-boundary">{{ range[1] }}</span>
+      <div class="gray-box">
+        <n-virtual-list
+          style="max-height: 512px"
+          :item-size="42"
+          :items="coverage.ranges"
+          item-resizable
+        >
+          <template #default="{ item: range }">
+            <div class="range">
+              <span class="range-boundary">{{ range[0] }}</span>
+              <template v-if="range[0] !== range[1]">
+                <span class="mx-sm">–</span>
+                <span class="range-boundary">{{ range[1] }}</span>
+              </template>
+            </div>
           </template>
-        </li>
-      </ul>
+        </n-virtual-list>
+      </div>
     </n-collapse-item>
     <n-collapse-item
       :title="$t('browse.contents.widgets.infoWidget.coverageDetails')"
@@ -140,9 +149,20 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.range {
+  border-bottom: 1px solid var(--main-bg-color);
+  padding: 0.5rem 0;
+}
+.range:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.range:first-child {
+  padding-top: 0;
+}
 .range-boundary {
   padding: 0 var(--gap-sm);
-  background-color: var(--main-bg-color);
+  background-color: var(--accent-color-fade5);
   border-radius: var(--border-radius);
 }
 :deep(.n-collapse-item__content-inner) {