This is an automated email from the ASF dual-hosted git repository.
visortelle pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new c977330ee930 Fix broken Case Studies page (#857)
c977330ee930 is described below
commit c977330ee9303a8b029bd39e0aeefca3ba79ac3e
Author: Kiryl Valkovich 🛸 <[email protected]>
AuthorDate: Tue Mar 19 15:37:03 2024 +0400
Fix broken Case Studies page (#857)
---
.../pages/CaseStudiesPage/Cards/Cards.module.css | 73 ++++++++++-----------
.../CaseStudiesPage/CaseStudiesPage.module.css | 75 +++-------------------
.../pages/CaseStudiesPage/CaseStudiesPage.tsx | 10 +--
3 files changed, 44 insertions(+), 114 deletions(-)
diff --git a/src/components/pages/CaseStudiesPage/Cards/Cards.module.css
b/src/components/pages/CaseStudiesPage/Cards/Cards.module.css
index f1774e3f9474..1204923f26a4 100644
--- a/src/components/pages/CaseStudiesPage/Cards/Cards.module.css
+++ b/src/components/pages/CaseStudiesPage/Cards/Cards.module.css
@@ -1,64 +1,57 @@
.Cards {
display: grid;
- grid-template-columns: 1fr;
- grid-gap: 1.5rem;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 1rem;
}
-.Card {
- padding-bottom: 1rem;
- color: var(--text-color);
-}
-.Card:hover{
- color: var(--text-color);
- text-decoration: none;
+.Card {}
+
+.CompanyName {
+ font-size: 2rem;
+ font-weight: 400;
+ line-height: 2.625rem;
}
.CardImage {
- transition: all .35s ease-in-out;
- height: 15rem;
- margin-bottom: 1rem;
- border-radius: 1rem;
- border: 1px solid var(--border-color);
position: relative;
-}
-
-.Card:hover .CardImage{
- border-color: var(--gray-1);
-}
-
-.CardImage > div{
+ display: block;
+ height: 16rem;
+ padding: 2rem;
+ background-origin: content-box;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
- width: calc(100% - 4rem);
- height: calc(100% - 4rem);
- position: absolute;
- left: 2rem;
- top: 2rem;
+ overflow: hidden;
+ margin-bottom: 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 1rem;
}
-.CardImage > img{
- transition: all .35s ease-in-out;
- display: block;
+.CardImage:hover {
+ border: 1px solid var(--input-border-color);
+ transition: var(--transition-short);
+}
+
+.LinkIcon {
+ fill: var(--text-color);
position: absolute;
- width: 16px;
- height: 16px;
bottom: 1rem;
right: 1rem;
- opacity: 0;
+ display: none;
}
-.Card:hover img{
- opacity: 1;
+
+.LinkIcon svg {
+ width: 1.25rem;
+ height: 1.25rem;
}
-.Card h3{
- font-size: 1.75rem;
- line-height: 2rem;
- font-weight: 400;
+.CardImage:hover .LinkIcon {
+ display: inline-flex;
}
-@media (min-width: 1000px) {
+@media (max-width: 800px) {
.Cards {
- grid-template-columns: 1fr 1fr 1fr;
+ grid-template-columns: 1fr;
+ gap: 4rem;
}
}
diff --git a/src/components/pages/CaseStudiesPage/CaseStudiesPage.module.css
b/src/components/pages/CaseStudiesPage/CaseStudiesPage.module.css
index 7920ae4da159..db8de7b8513a 100644
--- a/src/components/pages/CaseStudiesPage/CaseStudiesPage.module.css
+++ b/src/components/pages/CaseStudiesPage/CaseStudiesPage.module.css
@@ -1,76 +1,17 @@
.Header {
- margin: 0 auto;
- width: calc(100% - 1rem);
- max-width: var(--max-content-width);
- display: flex;
- flex-direction: column;
- gap: 1rem;
- margin-bottom: 1rem;
-}
-
-.Header {
- padding: 6rem 0;
- line-height: 3rem;
-}
-
-.Header h1{
- font-size: 40px;
- line-height: 48px;
- color: var(--primary-0);
- font-weight: 400;
- margin: 0;
- max-width: 35rem;
-}
-
-.Header p {
- font-size: 22px;
- line-height: 30px;
- font-weight: 400;
- margin: 0;
- max-width: 42rem;
-}
-.Header p a{
- text-decoration: underline;
- color: var(--text-color);
+ padding: 2rem 0;
+ max-width: 48rem;
}
.Filters {
- display: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 1rem;
+ margin-bottom: 6rem;
}
-.FiltersMobile{
- overflow-x: scroll;
- width: 100%;
- height: 6rem;
- position: relative;
- white-space: nowrap;
-}
-.FiltersMobile > div{
- width: auto;
- position: absolute;
- left: 0;
- top: 1.5rem;
-}
-.CategoryFilterLink {
- cursor: pointer;
- color: var(--text-color);
- display: inline-block;
- padding: .5rem 1rem;
- background-color: transparent;
- border-radius: 1rem;
- border-width: 0;
-}
-.CategoryFilterLink.active {
- background-color: var(--gray-5);
-}
-@media (min-width: 800px) {
+@media (max-width: 800px) {
.Filters {
- grid-template-columns: 1fr 1fr 1fr;
- display: grid;
- gap: 1rem;
- margin-bottom: 2rem;
- }
- .FiltersMobile{
- display: none;
+ grid-template-columns: 1fr;
}
}
diff --git a/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx
b/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx
index 5bdcbd8aabd2..90706328633f 100644
--- a/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx
+++ b/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
import Layout from "@theme/Layout";
import Cards from "./Cards/Cards";
import * as data from '@site/data/case-studies';
+import Input from "@site/src/components/ui/Input/Input";
import Select from "@site/src/components/ui/Select/Select";
import Page from "@site/src/components/ui/Page/Page";
import s from './CaseStudiesPage.module.css';
@@ -40,13 +41,8 @@ const CaseStudiesPage: React.FC = () => {
title: option === 'any' ? 'All Industries' :
data.categoryLabels[option]
}))}
/>
- </div>
- <div className={s.FiltersMobile}>
- <div>
- {categoryFilterOptions.map((option, idx) => (
- <button type="button" key={idx} onClick={() =>
{setCategoryFilter(option)}} className={s.CategoryFilterLink+(option ==
categoryFilter ? ' '+s.active : '')}>{option === 'any' ? 'All Industries' :
data.categoryLabels[option]}</button>
- ))}
- </div>
+
+ <Input placeholder="Search" value={searchQuery}
onChange={setSearchQuery} clearable />
</div>
<div>
