Merge pull request #4991 from kiva/design-changes-in-porfolio-new-mod…

…ules
kiva · Sep 28, 2023 · b783319 · b783319
2 parents 5c3ee17 + 7e79490
commit b783319
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/src/pages/Portfolio/ImpactDashboard/EducationModule.vue b/src/pages/Portfolio/ImpactDashboard/EducationModule.vue
@@ -1,7 +1,10 @@
 <template>
 	<async-portfolio-section @visible="whenVisible" data-testid="education-module">
 		<kv-grid class="tw-grid-cols-12 tw-items-center">
-			<div class="lg:tw-col-span-6 tw-col-span-12 md:tw-items-start tw-flex tw-flex-col tw-items-center">
+			<div
+				class="tw-col-span-12 lg:tw-col-span-5 xl:tw-col-span-6 md:tw-items-start
+					tw-flex tw-flex-col tw-items-center"
+			>
 				<div class="tw-mr-0 md:tw-mr-2 tw-bg-primary tw-h-12 tw-p-1 tw-rounded tw-w-12">
 					<img class="tw-w-10 tw-h-10" alt="Leaf heart" :src="imageRequire(`./leaf_heart.svg`)">
 				</div>
@@ -13,7 +16,7 @@
 					Every dollar donated to Kiva helps bring us one step closer to financial access for all. See what we’ve achieved with your support.
 				</p>
 			</div>
-			<div class="tw-col-span-12 lg:tw-col-span-6">
+			<div class="tw-col-span-12 lg:tw-col-span-7 xl:tw-col-span-6">
 				<education-post :post="post" :loading="loading" />
 			</div>
 		</kv-grid>

diff --git a/src/pages/Portfolio/ImpactDashboard/EducationPost.vue b/src/pages/Portfolio/ImpactDashboard/EducationPost.vue
@@ -3,12 +3,12 @@
 		<a
 			v-if="!loading"
 			:href="url"
-			class="tw-block"
+			class="card-container-link-image"
 			@click="trackEvent('blog-image')"
 		>
 			<kv-contentful-img
 				:alt="headline"
-				:width="344"
+				:width="312"
 				:contentful-src="imageUrl"
 				class="card-container-image"
 				:source-sizes="sourceSizes"
@@ -55,9 +55,14 @@ export default {
 	data() {
 		return {
 			sourceSizes: [
+				{
+					width: 312,
+					height: 217,
+					media: 'min-width: 1025px',
+				},
 				{
 					width: 344,
-					height: 219,
+					height: 217,
 					media: 'min-width: 734px',
 				},
 				{
@@ -93,10 +98,25 @@ export default {
 <style lang="postcss" scoped>
 .card-container {
 	height: 387px;
-	@apply tw-block tw-bg-eco-green-4 tw-rounded tw-p-2 tw-grid-rows-3 tw-decoration-white;
+	max-width: 344px;
+	@apply tw-block tw-bg-eco-green-4 tw-rounded tw-p-2 tw-grid-rows-3 tw-decoration-white tw-mx-auto;
 
 	@screen md {
-		height: 418px;
+		height: 447px;
+	}
+
+	@screen xl {
+		margin-left: auto;
+		width: 344px;
+	}
+}
+
+.card-container-link-image {
+	@apply tw-block tw-mb-1;
+
+	@screen xl {
+		width: 312px;
+		height: 217px;
 	}
 }
 
@@ -109,7 +129,7 @@ export default {
 	@apply tw-rounded;
 
 	@screen md {
-		max-height: 239px;
+		max-height: 217px;
 	}
 }
 

diff --git a/src/pages/Portfolio/ImpactDashboard/LendingInsights.vue b/src/pages/Portfolio/ImpactDashboard/LendingInsights.vue
@@ -4,7 +4,7 @@
 			Your lending insights
 		</h2>
 		<kv-grid as="dl" class="stats-container">
-			<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
+			<div class="tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-3">
 				<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 7rem;" />
 				<dt v-show="!loading" class="stat-value">
 					{{ amountLent }}
@@ -38,7 +38,7 @@
 					<loan-count-over-time-figure />
 				</kv-lightbox> -->
 			</div>
-			<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
+			<div class="tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-3">
 				<kv-loading-placeholder
 					v-if="loading"
 					class="stat-placeholder"
@@ -51,7 +51,7 @@
 					Loans made
 				</dt>
 			</div>
-			<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
+			<div class="tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-3">
 				<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 4rem;" />
 				<dt v-show="!loading" class="stat-value">
 					{{ countryCount }}
@@ -71,7 +71,7 @@
 					/>
 				</router-link>
 			</div>
-			<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
+			<div class="tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-3">
 				<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 7rem;" />
 				<dt v-show="!loading" class="stat-value">
 					{{ percentile }}