Highlight items widget: edit link

intk · Oct 1, 2024 · 58dc501 · 58dc501
1 parent 72b2401
commit 58dc501
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 21 deletions.
diff --git a/server/modules/@apostrophecms/page/index.js b/server/modules/@apostrophecms/page/index.js
@@ -5,6 +5,14 @@ module.exports = {
         name: 'default-page',
         label: 'Default',
       },
+      {
+        name: 'book-page',
+        label: 'Book',
+      },
+      {
+        name: 'author-page',
+        label: 'Author',
+      },
     ],
     park: [
       {

diff --git a/server/modules/asset/i18n/en.json b/server/modules/asset/i18n/en.json
@@ -24,5 +24,11 @@
   "About Public Domain Library": "About Public Domain Library",
   "Discover": "Discover",
   "Description": "Description",
-  "Year": "Year"
+  "Year": "Year",
+  "Text": "Text",
+  "Link Type": "Link Type",
+  "Page": "Page",
+  "Custom URL": "Custom URL",
+  "Will the link open a new browser tab?": "Will the link open a new browser tab?",
+  "Open in new tab": "Open in new tab"
 }
diff --git a/server/modules/donate/ui/src/index.scss b/server/modules/donate/ui/src/index.scss
@@ -96,13 +96,17 @@
 
   .pdl-donate__amount-button {
     height: 45px;
-    width: 115px;
     border-radius: 4px;
     border: 1px solid black;
     background-color: transparent;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
 
+    @media (min-width: map-get($breakpoints, 'xs')) {
+      font-size: 18px;
+      height: 50px;
+    }
+
     @media (min-width: map-get($breakpoints, 'sm')) {
       height: 50px;
       width: 63px;
@@ -127,14 +131,19 @@
 
   .pdl-donate__amount-input {
     height: 41px;
-    width: 66px;
+    width: 50px;
     border-radius: 4px;
     border: 1px solid black;
     background-color: transparent;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     text-align: center;
 
+    @media (min-width: map-get($breakpoints, 'xs')) {
+      font-size: 18px;
+      width: 66px;
+    }
+
     @media (min-width: map-get($breakpoints, 'md')) {
       height: 50px;
       width: 115px;
@@ -173,8 +182,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 23px;
+    gap: 10px;
     margin: 16px 0;
+    color: black;
+
+    @media (min-width: map-get($breakpoints, 'xs')) {
+      gap: 23px;
+    }
 
     @media (min-width: map-get($breakpoints, 'sm')) {
       margin: 14px 0;
@@ -223,9 +237,13 @@
 .pdl-donate__image-wrapper {
   .pdl-donate__image {
     position: relative;
-    width: 330px;
+    width: 230px;
     top: 30px;
 
+    @media (min-width: map-get($breakpoints, 'xs')) {
+      width: 330px;
+    }
+
     @media (min-width: map-get($breakpoints, 'sm')) {
       top: 10px;
     }

diff --git a/server/modules/highlight-items-widget/index.js b/server/modules/highlight-items-widget/index.js
@@ -30,17 +30,64 @@ module.exports = {
               label: 'pdl:Color',
               type: 'color',
             },
-            _page: {
-              label: 'Page to link',
-              type: 'relationship',
-              withType: '@apostrophecms/page',
-              max: 1,
-              builders: {
-                project: {
-                  title: 1,
-                  _url: 1,
-                },
-              },
+            link: {
+              type: 'object',
+              fields: {
+                add: {
+                  linkText: {
+                    label: 'pdl:Text',
+                    type: 'string',
+                  },
+                  linkType: {
+                    label: 'pdl:Link Type',
+                    type: 'select',
+                    choices: [
+                      {
+                        label: 'pdl:Page',
+                        value: 'page'
+                      },
+                      {
+                        label: 'pdl:Custom URL',
+                        value: 'custom'
+                      }
+                    ]
+                  },
+                  _linkPage: {
+                    label: 'pdl:Page',
+                    type: 'relationship',
+                    withType: '@apostrophecms/page',
+                    max: 1,
+                    builders: {
+                      project: {
+                        title: 1,
+                        _url: 1
+                      }
+                    },
+                    if: {
+                      linkType: 'page'
+                    },
+                    required: true
+                  },
+                  linkUrl: {
+                    label: 'pdl:Custom URL',
+                    type: 'url',
+                    if: {
+                      linkType: 'custom'
+                    },
+                    required: true
+                  },
+                  linkTarget: {
+                    label: 'pdl:Will the link open a new browser tab?',
+                    type: 'checkboxes',
+                    choices: [
+                      {
+                        label: 'pdl:Open in new tab',
+                        value: '_blank'
+                      }
+                    ]
+                  },
+                }
+              }
             },
             imageArea: {
               label: 'pdl:Image',

diff --git a/server/modules/highlight-items-widget/views/widget.html b/server/modules/highlight-items-widget/views/widget.html
@@ -19,9 +19,10 @@
 
         <div class="pdl-highlight-widget__description">{{ item.description }}</div>
 
-        {% if item._page[0]._url %}
-          <a class="pdl-highlight-widget__link" href="{{ item._page[0]._url }}">
-            {{ __t('pdl:View all') }}
+        {% if item.link and item.link._id %}
+          {% set link = item.link %}
+          <a class="pdl-highlight-widget__link" href="{{ link._linkPage[0]._url if link.linkType === 'page' else link.linkUrl }}" {%- if link.linkTarget[0] === '_blank' %} target="_blank" {%- endif %}>
+            {{ link.linkText }}
             {% include "@apostrophecms/home-page:svg-arrow-right.html" %}
           </a>
         {% endif %}