Merge pull request #6393 from OCHA-DAP/feature/HDX-9970-move-carousel…

…-label-bottom PR: HDX-9970 move homepage carousel label to bottom
OCHA-DAP · Jul 17, 2024 · 1cb8b90 · 1cb8b90
2 parents 3618238 + 1420b2d
commit 1cb8b90
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 26 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.css
@@ -86,13 +86,16 @@
   background-color: #333333;
   color: #fff;
   position: absolute;
-  top: 0;
+  bottom: 0;
   text-transform: uppercase;
   line-height: 1;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
 }
+#carousel-config-main .carousel-item .sub-item .sub-item-wrapper {
+  position: relative;
+}
 #carousel-config-main .carousel-item .sub-item .sub-item-image {
   position: relative;
   height: 215px;

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/homepage/homepage.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/homepage/homepage.css
@@ -261,13 +261,16 @@
   background-color: #333333;
   color: #fff;
   position: absolute;
-  top: 0;
+  bottom: 0;
   text-transform: uppercase;
   line-height: 1;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
 }
+.homepage-main .carousel-section .carousel-items .sub-item .sub-item-wrapper {
+  position: relative;
+}
 .homepage-main .carousel-section .carousel-items .sub-item .sub-item-image {
   position: relative;
   height: 215px;

diff --git a/...xt-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/homepage/homepage-carousel.less b/...xt-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/homepage/homepage-carousel.less
@@ -55,14 +55,18 @@
       background-color: @darkGrayColor;
       color: @whiteColor;
       position: absolute;
-      top: 0;
+      bottom: 0;
       text-transform: uppercase;
       line-height: 1;
       left: 50%;
       transform: translateX(-50%);
       white-space: nowrap;
     }
 
+    .sub-item-wrapper {
+      position: relative;
+    }
+
     .sub-item-image{
       position: relative;
       height: @carouselImageHeight;

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/admin/carousel.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/admin/carousel.html
@@ -53,18 +53,20 @@ <h3>Configure the homepage carousel items</h3>
                                                   <div class="sample-text">Preview Item</div>
                                                   <div class="thumbnail-container">
                                                       <div class="sub-item">
-                                                          <div class="sub-item-image">
-                                                              <%
-                                                                  var preview = graphic_upload_preview || graphic;
-                                                                  if (preview){
-                                                              %>
-                                                                  <img class="graphic" src="<%= preview %>">
-                                                              <%  } %>
-                                                              <div class="sub-item-action">
-                                                                  <a href="<%= url %>" class="btn"><%= (buttonText?buttonText:"Explore") %></a>
-                                                              </div>
+                                                          <div class="sub-item-wrapper">
+                                                            <div class="sub-item-image">
+                                                                <%
+                                                                    var preview = graphic_upload_preview || graphic;
+                                                                    if (preview){
+                                                                %>
+                                                                    <img class="graphic" src="<%= preview %>">
+                                                                <%  } %>
+                                                                <div class="sub-item-action">
+                                                                    <a href="<%= url %>" class="btn"><%= (buttonText?buttonText:"Explore") %></a>
+                                                                </div>
+                                                            </div>
+                                                            <div class="title"><%= title %></div>
                                                           </div>
-                                                          <div class="title"><%= title %></div>
                                                           <a href="<%= url %>" >
                                                               <div class="sub-item-caption">
                                                                   <p class="description"><%= description %></p>

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/home/snippets/hdx_carousel_item.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/home/snippets/hdx_carousel_item.html
@@ -1,18 +1,20 @@
 <div class="sub-item">
-  <div class="sub-item-image">
-    <img class="graphic lazyload" data-src="{{ item.graphic }}" alt="Highlight item">
-    <div class="sub-item-action">
-      {% if item.embed %}
-        <a href="{{ item.url }}" class="btn" target="_blank" data-module="hdx_click_stopper"
-           data-module-link_type="carousel">Watch</a>
-      {% else %}
-        <a href="{{ item.url }}" class="btn" {% if item.newTab %} target="_blank" {% endif %}
-           data-module="hdx_click_stopper" data-module-link_type="carousel">{% if item.buttonText %}
-          {{ item.buttonText }} {% else %} Explore {% endif %}</a>
-      {% endif %}
+  <div class="sub-item-wrapper">
+    <div class="sub-item-image">
+      <img class="graphic lazyload" data-src="{{ item.graphic }}" alt="Highlight item">
+      <div class="sub-item-action">
+        {% if item.embed %}
+          <a href="{{ item.url }}" class="btn" target="_blank" data-module="hdx_click_stopper"
+             data-module-link_type="carousel">Watch</a>
+        {% else %}
+          <a href="{{ item.url }}" class="btn" {% if item.newTab %} target="_blank" {% endif %}
+             data-module="hdx_click_stopper" data-module-link_type="carousel">{% if item.buttonText %}
+            {{ item.buttonText }} {% else %} Explore {% endif %}</a>
+        {% endif %}
+      </div>
     </div>
+    <div class="title">{{ item.title }}</div>
   </div>
-  <div class="title">{{ item.title }}</div>
   <a href="{{ item.url }}">
     <div class="sub-item-caption">
       <p class="description">{{ item.description }}</p>