WEB-442-feat: implement LightGallery document preview across all document tabs (#2847)

* feat: implement LightGallery document preview across all document tabs feat(documents): add LightGallery preview with accessibility and error handling * fix: add accessibility and performance improvements for document preview fix(styles): replace undefined variable with -river Delete button title translated
2025-12-03 05:18:02 -06:00
parent 83f3a0b0fe
commit 9432ad3b96
32 changed files with 1031 additions and 323 deletions
@@ -1,16 +1,159 @@
-table {
-  width: 100%;
-  margin-top: 3%;
+@use '../../../../assets/styles/colours' as *;

-  .document-action-button {
-    min-width: 26px;
-    padding: 0 6px;
-    margin: 4px;
-    line-height: 25px;
+.tab-container {
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+}
+
+.document-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 0.75rem;
+}
+
+.document-card {
+  width: 240px;
+  background: $white;
+  border: 1px solid $silver;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba($dark-grey, 0.12);
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba($dark-grey, 0.14);
  }
 }

-.tab-container {
-  padding: 1%;
-  margin: 1%;
+.thumb {
+  position: relative;
+  background: $clouds;
+  min-height: 9.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.preview-overlay {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  background: rgba($white, 0.9);
+  border-radius: 50%;
+  padding: 0.4rem;
+  color: $peter-river;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .thumb:hover &,
+  .thumb:focus & {
+    opacity: 1;
+  }
+}
+
+.placeholder {
+  color: $light-grey;
+  text-align: center;
+  padding: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+
+  fa-icon {
+    font-size: 22px;
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 1.2;
+  }
+}
+
+.preview-btn {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  background: rgba($black, 0.65);
+  color: $white;
+}
+
+.card-body {
+  padding: 0.75rem 0.875rem 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.title {
+  font-weight: 700;
+  color: $dark-grey;
+}
+
+.meta {
+  font-size: 12px;
+  color: $asbestos;
+}
+
+.description {
+  font-size: 13px;
+  color: $dark-grey;
+  min-height: 32px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.empty-state {
+  margin-top: 0.75rem;
+  padding: 1.25rem;
+  text-align: center;
+  background: $light-grey;
+  border: 1px dashed $silver;
+  border-radius: 4px;
+  color: $dark-grey;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+
+  .muted {
+    color: $concrete;
+    margin: 0.25rem 0 0;
+    font-size: 0.8125rem;
+  }
+}
+
+.document-lightbox-host {
+  display: none;
 }