[update][s]: Data providers updated as per design

datopian · Sep 19, 2024 · 6f442a5 · 6f442a5
1 parent 48fa32e
commit 6f442a5
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 17 deletions.
diff --git a/ckanext/ubdc/assets/css/style.css b/ckanext/ubdc/assets/css/style.css
@@ -10400,6 +10400,16 @@ h4 small {
 .homepage .btn {
   padding: 15px 30px;
 }
+.homepage .small-button {
+  padding: 12px 20px 12px 24px;
+  font-size: 14px;
+  background-color: #c2410c;
+  border: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  text-transform: capitalize;
+}
 .homepage .hero {
   min-height: 480px;
   height: 500px;
@@ -10893,6 +10903,9 @@ h4 small {
 .homepage .providers {
   background: #fff;
 }
+.homepage .providers .wrap {
+  margin: 3rem 0;
+}
 .homepage .providers h2 {
   color: #000000;
   text-align: center;
@@ -10905,6 +10918,7 @@ h4 small {
   flex-wrap: wrap;
   align-items: center;
   align-content: center;
+  padding: 4rem;
 }
 .homepage .providers .logo-grid__item {
   padding: 15px;
@@ -11145,7 +11159,7 @@ input[type=search]::-webkit-search-cancel-button {
 }
 .explore-content .card-text {
   font-size: 1.5rem;
-  color: #666D80;
+  color: #666d80;
 }
 .explore-content .btn-readmore {
   background-color: transparent;

diff --git a/ckanext/ubdc/public/base/scss/_homepage.scss b/ckanext/ubdc/public/base/scss/_homepage.scss
@@ -3,6 +3,19 @@
   .btn {
     padding: 15px 30px;
   }
+  .small-button {
+    padding: 12px 20px 12px 24px;
+    font-size: 14px;
+    background-color: #c2410c;
+    border: none;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    text-transform: capitalize;
+  }
+  //   .small-button:hover {
+  //     opacity: 0.9;
+  //   }
   .hero {
     min-height: 480px;
     height: $hero-height;
@@ -541,6 +554,9 @@
 
   .providers {
     background: #fff;
+    .wrap {
+      margin: 3rem 0;
+    }
     h2 {
       color: #000000;
       text-align: center;
@@ -553,6 +569,7 @@
       flex-wrap: wrap;
       align-items: center;
       align-content: center;
+      padding: 4rem;
       &__item {
         padding: 15px;
         width: 180px;
@@ -806,7 +823,8 @@ input[type="search"]::-webkit-search-cancel-button {
     padding: 1rem;
   }
   .card-img-top-wrapper {
-    height: 190px; overflow: hidden;
+    height: 190px;
+    overflow: hidden;
     img {
       width: 100%;
       height: 200px;
@@ -816,7 +834,7 @@ input[type="search"]::-webkit-search-cancel-button {
   }
   .card-text {
     font-size: 1.5rem;
-    color: #666D80;
+    color: #666d80;
   }
   .btn-readmore {
     background-color: transparent;

diff --git a/ckanext/ubdc/templates/home/snippets/providers.html b/ckanext/ubdc/templates/home/snippets/providers.html
@@ -1,25 +1,38 @@
 <section class="providers">
     <div class="container">
-        <h2>- Data Providers -</h2>
         <div class="wrap">
+
+            <!-- Centered Heading -->
+            <div class="row">
+                <div class="col-12 text-center">
+                    <h1> Data Providers </h1>
+                </div>
+            </div>
+
             {% set count = namespace(value=0) %}
             {% set providers = h.get_data_providers() %}
             <div class="logo-grid">
                 {% for provider in providers %}
-                    {% if provider.image_display_url %}
-                        {% set url = h.url_for('organization' ~ '.read', id=provider.name) %}
-                        {% if count.value < 6 %}
-                            <div class="logo-grid__item">
-                                <a href="{{ url }}">
-                                    <img src="{{ provider.image_display_url }}" alt="{{ provider.name }}" width="150" height="85">
-                                </a>
-                            </div>
-                        {% endif %}
-                        {% set count.value = count.value + 1 %}
-                    {% endif %}
-                {% endfor %}
+                {% if provider.image_display_url %}
+                {% set url = h.url_for('organization' ~ '.read', id=provider.name) %}
+                {% if count.value < 6 %} <div class="logo-grid__item">
+                    <a href="{{ url }}">
+                        <img src="{{ provider.image_display_url }}" alt="{{ provider.name }}" width="150" height="85">
+                    </a>
             </div>
-            <p class="more"><a href="/organization">Explore all data providers →</a></p>
+            {% endif %}
+            {% set count.value = count.value + 1 %}
+            {% endif %}
+            {% endfor %}
         </div>
+        <p class="more">
+            <a href="/organization"></a>
+            <button class="btn btn-primary dataset-explore-btn small-button">
+                Explore all data providers
+                <span class="arrow">→</span>
+            </button>
+            </a>
+        </p>
+    </div>
     </div>
 </section>