add element pdf path

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -9,6 +9,7 @@ export interface ChildElement {
 
 export interface Element extends ChildElement {
   richText: string
+  pdfPath: string | null
 }
 
 interface ElementResponse {

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -56,6 +56,18 @@ watch(
           v-html="element.richText"
         />
 
+        <div v-if="element.pdfPath !== null" class="element-page__actions">
+          <a
+            :href="element.pdfPath"
+            class="element-page__pdf-link"
+            data-cy="element-pdf-link"
+            target="_blank"
+            rel="noreferrer"
+          >
+            View PDF
+          </a>
+        </div>
+
         <nav
           v-if="childElements.length > 0"
           class="element-page__children"
@@ -137,6 +149,44 @@ watch(
   font-weight: 700;
 }
 
+.element-page__actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.75rem;
+}
+
+.element-page__pdf-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.15rem;
+  color: var(--color-white);
+  background: var(--color-olive);
+  border-radius: 8px;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.element-page__pdf-link:hover,
+.element-page__pdf-link:focus-visible {
+  background: #4d5b3c;
+  box-shadow: 0 10px 24px rgb(44 44 44 / 12%);
+  transform: translateY(-1px);
+}
+
+.element-page__pdf-link:focus-visible {
+  outline: 3px solid rgb(94 107 76 / 38%);
+  outline-offset: 4px;
+}
+
 .element-page__children {
   margin-top: 3rem;
 }