Skip to content

Commit

Permalink
dev: re-design search results
Browse files Browse the repository at this point in the history 
Commit unfinished work.
  • Loading branch information
@yld-weng
yld-weng committed Nov 11, 2021
1 parent bf1e021 commit f5aa86c
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 187 deletions.
220 changes: 53 additions & 167 deletions src/components/shared/__tests__/__snapshots__/search.spec.js.snap
View file
Expand Up @@ -165,81 +165,21 @@ exports[`Search component return search result without error 1`] = `
target="_blank"
>
<div
class="shadow-lg hover:shadow-xl rounded-lg group text-left relative md:mx-6 my-6 transform hover:scale-105 transition duration-500"
style="width: 363px; background-image: url(undefined); background-size: cover; background-position: center; border-radius: 10px; min-height: 420px;"
class="sc-bdvvtL bYgJTE"
>
<div
class="rounded-lg max-h-60 w-full p-6 transition duration-700 bg-black-65 group-hover:bg-black-85"
style="min-height: 420px;"
>
<div
class="absolute pt-8 lg:pt-12 2xl:pt-16 overflow-hidden"
style="max-width: 320px;"
>
<h1
class="mb-3 group-hover:-translate-y-8 text-white bg-gray-900 group-hover:text-brand-blue group-hover:bg-black font-bold text-lg transform transition duration-300 inline-block rounded-md"
style="text-shadow: none; padding: .15rem .65rem;"
>
docs
</h1>
<h1
class="group-hover:-translate-y-8 text-white font-bold leading-7 text-2xl transform transition duration-100"
>
<span>
<span
class=""
>
Statistical Testing
</span>
</span>
</h1>
<h1
class="group-hover:hidden text-gray-400 leading-7 my-4 font-bold text-lg transition duration-500"
style="text-shadow: #000 0px 0px 30px;"
>
<span
class="text-white"
>
<span
class=""
>
Dataviz Team,
</span>
</span>
<span
class="text-white"
>
<span
class=""
>
Jean Russell
</span>
</span>
</h1>
<p
class="hidden group-hover:block my-4 text-xs text-gray-500 w-full font-semibold transform group-hover:-translate-y-12 transition duration-500"
>
<span>
<span
class=""
>
/DOCS/07/04/2021/LEARNINGPATH-STATISTICAL-MODELING-4
</span>
</span>
</p>
<h1
class="hidden group-hover:block text-white leading-5 text-lg py-3 transform group-hover:-translate-y-12 transition duration-500"
>
<span>
<span
class=""
>
Statistical Modeling Part 4 - What is Statistical testing? Why do we need to test? How do we perform tests?
</span>
</span>
</h1>
</div>
class="sc-gsDKAQ dkUFpn"
style="width: 100%; background-image: url(undefined); background-size: cover; background-position: center; border-radius: 10px; min-height: 220px;"
/>
<div>
<span />
</div>
<h1>
Statistical Testing
</h1>
<p>
Statistical Modeling Part 4 - What is Statistical testing? Why do we need to test? How do we perform tests?
</p>
</div>
</a>
<a
Expand All @@ -248,114 +188,60 @@ exports[`Search component return search result without error 1`] = `
target="_blank"
>
<div
class="shadow-lg hover:shadow-xl rounded-lg group text-left relative md:mx-6 my-6 transform hover:scale-105 transition duration-500"
style="width: 363px; background-image: url(undefined); background-size: cover; background-position: center; border-radius: 10px; min-height: 420px;"
class="sc-bdvvtL bYgJTE"
>
<div
class="rounded-lg max-h-60 w-full p-6 transition duration-700 bg-black-65 group-hover:bg-black-85"
style="min-height: 420px;"
>
<div
class="absolute pt-8 lg:pt-12 2xl:pt-16 overflow-hidden"
style="max-width: 320px;"
class="sc-gsDKAQ dkUFpn"
style="width: 100%; background-image: url(undefined); background-size: cover; background-position: center; border-radius: 10px; min-height: 220px;"
/>
<div>
<a
class="sc-iCfMLu imbDEA"
gatsby="true"
href="/blog/category/research-innovation-it"
>
<h1
class="mb-3 group-hover:-translate-y-8 text-white bg-gray-900 group-hover:text-brand-blue group-hover:bg-black font-bold text-lg transform transition duration-300 inline-block rounded-md"
style="text-shadow: none; padding: .15rem .65rem;"
>
visualisation
</h1>
<h1
class="group-hover:-translate-y-8 text-white font-bold leading-7 text-2xl transform transition duration-100"
>
<span>
<span
class=""
>
Which statistical test to use for two variables? ...
</span>
</span>
</h1>
<h1
class="group-hover:hidden text-gray-400 leading-7 my-4 font-bold text-lg transition duration-500"
style="text-shadow: #000 0px 0px 30px;"
>
<span>
<span
class="text-white"
class=""
>
<span
class=""
>
Yu Liang Weng
</span>
</span>
</h1>
<h1
class="group-hover:hidden text-gray-200 font-bold transition duration-500"
>
CAT:  
<span>
<span
class="text-white"
>
<span
class=""
>
RESEARCH & INNOVATION IT
</span>
</span>
<span>
 
</span>
Research & Innovation IT
</span>
</h1>
<h1
class="group-hover:hidden text-gray-200 font-bold transition duration-500"
>
TAG:  
</span>
</a>
<a
class="sc-furwcr kBeoSF"
gatsby="true"
href="/blog/tag/statistics"
>
<span>
<span
class="text-white"
class=""
>
<span
class=""
>
STATISTICS,
</span>
Statistics
</span>
</span>
</a>
<a
class="sc-furwcr kBeoSF"
gatsby="true"
href="/blog/tag/interative"
>
<span>
<span
class="text-white"
class=""
>
<span
class=""
>
INTERATIVE
</span>
</span>
</h1>
<p
class="hidden group-hover:block my-4 text-xs text-gray-500 w-full font-semibold transform group-hover:-translate-y-12 transition duration-500"
>
<span>
<span
class=""
>
/VISUALISATION/04/08/2021/WHICH-STATISTICAL-TEST-TO-USE-FOR-TWO-VARIABLES
</span>
</span>
</p>
<h1
class="hidden group-hover:block text-white leading-5 text-lg py-3 transform group-hover:-translate-y-12 transition duration-500"
>
<span>
<span
class=""
>
An interative tool based on the flow chart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of ...
</span>
Interative
</span>
</h1>
</div>
</span>
</a>
<span />
</div>
<h1>
Which statistical test to use for two variables? ...
</h1>
<p>
An interative tool based on the flow chart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of ...
</p>
</div>
</a>
</div>
Expand Down
69 changes: 51 additions & 18 deletions src/components/shared/search.jsx
View file
Expand Up @@ -7,6 +7,9 @@ import Zoom from "react-reveal/Zoom";
import Fade from "react-reveal/Fade";
import bg from "../../images/search/search.png";
import { getImageSource, shortenText } from "../../utils/shared";
import { SearchItem, ItemThumb } from "../style/search";
import { CatBtn, TagBtn } from "../style/styleComponent";
import kebabCase from "lodash.kebabcase";

// Search component
class Search extends Component {
Expand Down Expand Up @@ -85,18 +88,49 @@ class Search extends Component {
rel="noopener noreferrer"
key={i}
>
<div
style={{
width: "363px",
backgroundImage: `url(${imagesrc})`,
backgroundSize: "cover",
backgroundPosition: "center",
borderRadius: "10px",
minHeight: "420px"
}}
className="shadow-lg hover:shadow-xl rounded-lg group text-left relative md:mx-6 my-6 transform hover:scale-105 transition duration-500"
>
<div
<SearchItem>
<ItemThumb
style={{
width: "100%",
backgroundImage: `url(${imagesrc})`,
backgroundSize: "cover",
backgroundPosition: "center",
borderRadius: "10px",
minHeight: "220px"
}}
></ItemThumb>
<div>
{item.category &&
item.category.map((cat) => (
<CatBtn
key={cat}
to={`/blog/category/${kebabCase(cat)}`}
>
<Highlighter
highlightClassName={highlightClasses}
textToHighlight={cat}
searchWords={this.state.query.split()}
/>
</CatBtn>
))}
{item.tag &&
item.tag.map((currentTag) => (
<TagBtn
key={currentTag}
to={`/blog/tag/${kebabCase(currentTag)}`}
>
<Highlighter
highlightClassName={highlightClasses}
textToHighlight={currentTag}
searchWords={this.state.query.split()}
/>
</TagBtn>
))}
<span>{item.date}</span>
</div>
<h1>{title}</h1>
<p>{description}</p>
{/* <div
className="rounded-lg max-h-60 w-full p-6 transition duration-700 bg-black-65 group-hover:bg-black-85"
style={{ minHeight: "420px" }}
>
Expand All @@ -113,15 +147,15 @@ class Search extends Component {
>
{item.type || "blog"}
</h1>
{/* title */}
<h1 className="group-hover:-translate-y-8 text-white font-bold leading-7 text-2xl transform transition duration-100">
<Highlighter
highlightClassName={highlightClasses}
textToHighlight={title}
searchWords={this.state.query.split()}
/>
</h1>
{/* authors */}
<h1
className="group-hover:hidden text-gray-400 leading-7 my-4 font-bold text-lg transition duration-500"
style={{ textShadow: "#000 0px 0px 30px" }}
Expand All @@ -142,7 +176,7 @@ class Search extends Component {
);
})}
</h1>
{/* category */}
{item.category && (
<h1 className="group-hover:hidden text-gray-200 font-bold transition duration-500">
CAT: &nbsp;
Expand All @@ -160,7 +194,6 @@ class Search extends Component {
</h1>
)}
{/* tag */}
{item.tag && (
<h1 className="group-hover:hidden text-gray-200 font-bold transition duration-500">
TAG: &nbsp;
Expand Down Expand Up @@ -204,8 +237,8 @@ class Search extends Component {
/>
</h1>
</div>
</div>
</div>
</div> */}
</SearchItem>
</a>
);
})}
Expand Down
18 changes: 18 additions & 0 deletions src/components/style/search.jsx
View file
@@ -0,0 +1,18 @@
import styled from "styled-components";

export const SearchItem = styled.div`
width: 363px;
min-height: 420px;
transition: 0.5s ease;
text-align: left;
position: relative;
`;

export const ItemThumb = styled.div`
width: 100%;
background-size: "cover",
background-position: "center",
border-radius: "10px",
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
min-height: "220px"
`;

0 comments on commit f5aa86c

Please sign in to comment.