Town6: Add option for label text

TYPE: Feature LINK: OGC-2040
OneGov · Jan 29, 2025 · e59d033 · e59d033
1 parent 40481da
commit e59d033
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/homepage_widget_options.md b/homepage_widget_options.md
@@ -82,7 +82,8 @@ The images for the slider are defined via photoalbums. You can find the "show on
     <autoplay_video
         max-height="100vh"
         text="Text on video"
-        text_link="https://..."
+        button_url="https://..."
+        button_text="Button Text"
         link_mp4="/storage/..."
         link_mp4_low_res="/storage/..."
         link_webm="/storage/..."
@@ -93,7 +94,8 @@ The images for the slider are defined via photoalbums. You can find the "show on
 | ------------- | ------------------------------------------ | ------------------- | ---------------------- |
 | `max-height` | The *maximum* height of the video. Can for example be used for fullscreen videos on desktop. The video will center itself in the available space. | Video height                  | 30vw, 40vh, 100px, ... |
 | `text`       | Text to be shown atop of the video | -                   | Any text         |
-| `text_link`       | Turns the text into a linked button | -                   | https://...         |
+| `button_url`       | Adds a button linked to the url | -                   | https://...         |
+| `button_text`       | Text used as the label of the button. Button only appears if there is a button_url. | "Show more"                   | Any text         |
 | `link_mp4_low_res`  | Link to the video in the mp4 format with reduced size uploaded in the files-section. Will be shown for mobile devices instead of the full sized video. | -                   | /storage/...         |
 | `link_mp4`       | Link to the full sized video in the mp4 format uploaded in the files-section. Will be shown for desktop and mobile, if no smaller size is available. | -                   | /storage/...         |
 | `link_webm_low_res`  | Link to the video in the webm format with reduced size uploaded in the files-section. Will be shown for mobile devices instead of the full sized video. | -                   | /storage/...         |

diff --git a/src/onegov/town6/homepage_widgets.py b/src/onegov/town6/homepage_widgets.py
@@ -81,11 +81,12 @@ class AutoplayVideoWidget:
     template = """
         <xsl:template match="autoplay_video">
             <div metal:use-macro="layout.macros.autoplay_video"
-             tal:define="max_height '{@max-height}'; link_mp4 '{@link_mp4}';
-             link_mp4_low_res '{@link_mp4_low_res}';
-             link_webm '{@link_webm}'; text_link '{@text_link}';
-              link_webm_low_res '{@link_webm_low_res}'; text '{@text}'
-             "
+            tal:define="max_height '{@max-height}'; link_mp4 '{@link_mp4}';
+            link_mp4_low_res '{@link_mp4_low_res}';
+            link_webm '{@link_webm}'; button_url '{@button_url}';
+            link_webm_low_res '{@link_webm_low_res}'; text '{@text}';
+            button_text '{@button_text}';
+            "
             />
         </xsl:template>
     """

diff --git a/src/onegov/town6/templates/macros.pt b/src/onegov/town6/templates/macros.pt
@@ -1652,12 +1652,17 @@
             <div class="dark-overlay" tal:condition="text"></div>
             <div class="grid-container" tal:condition="text">
                 <div class="text">
-                    <tal:b tal:condition="text_link|False">
-                        <a class="button" href="${text_link}">${text}</a>
-                    </tal:b>
-                    <tal:b tal:condition="not:text_link|False">
+                    <p tal:condition="text and button_url">
+                        <tal:b >
+                            <span>${text}</span>
+                        </tal:b>
+                    </p>
+                    <tal:b tal:condition="text and not button_url">
                         <span>${text}</span>
                     </tal:b>
+                    <tal:b tal:condition="button_url|False">
+                        <a class="button" href="${button_url}">${button_text}<tal:b condition="not: button_text" i18n:translate="">Show more</tal:b></a>
+                    </tal:b>
                 </div>
             </div>
         </div>

diff --git a/src/onegov/town6/theme/styles/homepage.scss b/src/onegov/town6/theme/styles/homepage.scss
@@ -61,12 +61,15 @@
                 color: $white;
                 font-size: 1.6rem;
                 text-shadow: none;
-                font-weight: bold;
                 padding: 1.5rem 2.5rem !important;
 
                 &:hover {
                     padding: 1.5rem 3rem !important;
                 }
+
+                i.fa-external-link-alt {
+                    margin-left: .5rem;
+                }
             }
 
             span {
@@ -78,6 +81,15 @@
 
             @media #{$small-only} {
                 bottom: 2rem;
+
+                a {
+                    font-size: 1.2rem;
+                    padding: .7rem 1.5rem !important;
+
+                    &:hover {
+                        padding: .7rem 2rem !important;
+                    }
+                }
             }
 
         }