mkrhere
/
pw2
mirror of https://github.com/mkrhere/pw2
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(blog): blog content load animation 

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 2 years ago
parent
42587c7d90
commit
eeaf04a4ec
Signed by: mkrhere GPG Key ID: 3FD688398897097E
3 changed files with 105 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/assets/draw-close.svg
  2. 12
      src/index.css
  3. 155
      src/pages/blog/Home.tsx

4
src/assets/draw-close.svg
View File

@ -0,0 +1,4 @@
<svg width="27" height="18" viewBox="0 0 27 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.14286 18L10.7143 16.4531L4.2449 10.1049H25V7.89509H4.2449L10.7143 1.52679L9.14286 0L0 9L9.14286 18Z" fill="#B5B5B5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 16V3H27V16H25Z" fill="#B5B5B5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 319 B

12
src/index.css
View File

@ -17,8 +17,9 @@
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
color: var(--text-colour);
height: 100vh;
}
@ -28,7 +29,8 @@ body {
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
h1,
@ -80,3 +82,7 @@ a {
a:hover {
color: var(--primary-colour);
}
button {
cursor: pointer;
}

155
src/pages/blog/Home.tsx
View File

@ -1,11 +1,12 @@
import { css, cx } from "@emotion/css";
import { css } from "@emotion/css";
import React, { useEffect, useState } from "react";
import { Routes, Route, Link, useLocation } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { Spacer } from "../../components/Spacer";
import { ArticleSubHeader } from "./components/ArticleSubHeader";
import { BlogPost } from "./components/BlogContent";
import { articles, getBlogPath } from "../../data";
import { ReactComponent as DrawClose } from "../../assets/draw-close.svg";
import classNames from "classnames";
const Header: React.FC = () => {
return (
@ -69,7 +70,9 @@ const BlogHome: React.FC = () => {
return (
<div
className={cx(
data-home
key="blog-home"
className={classNames(
{ "article-open": isArticleOpen, "aside-closed": isAsideClosed },
css`
display: flex;
@ -77,6 +80,7 @@ const BlogHome: React.FC = () => {
height: 100%;
width: 100vw;
overflow: hidden;
position: relative;
@media screen and (max-width: 80rem) {
div& > .draw-ctl {
@ -101,69 +105,64 @@ const BlogHome: React.FC = () => {
}
}
& > aside {
transition: all 250ms;
}
&:is(.aside-closed) {
aside {
max-width: 0;
}
}
& > aside,
& > article {
transition: all 250ms;
@media screen and (max-width: 50rem) {
padding-block-start: 4rem;
padding-block-end: 6rem;
}
}
& > .draw-ctl {
`,
)}>
<button
onClick={() => setAsideClosed(closed => !closed)}
className={classNames(
css`
border: none;
padding: 1rem;
padding-block: 10vw;
display: flex;
min-width: 3.6rem;
max-width: 3.6rem;
}
`,
)}>
{isArticleOpen ? (
<button
onClick={() => setAsideClosed(closed => !closed)}
className={cx(
"draw-ctl",
css`
transition: background-color 100ms;
background-color: #262626;
transition: background-color 100ms;
background-color: #262626;
position: absolute;
width: 100%;
height: 100%;
transition: transform 300ms;
&:hover {
background-color: #323232;
}
&:hover {
background-color: #323232;
}
`,
!isArticleOpen &&
css`
transform: translateX(-100%);
`,
)}>
<DrawClose
width="2.6rem"
className={cx(
css`
transition: transform 100ms;
`,
{
[css`
transform: rotate(180deg);
`]: isAsideClosed,
},
)}
/>
</button>
) : (
<div className="draw-ctl"></div>
)}
)}>
<DrawClose
width="2.6rem"
className={classNames(
css`
transition: transform 100ms;
`,
{
[css`
transform: rotate(180deg);
`]: isAsideClosed,
},
)}
/>
</button>
<aside
className={css`
height: 100%;
width: 100%;
flex: 2;
max-width: 45rem;
margin-inline-start: 3.6rem;
`}>
<div
className={css`
@ -175,6 +174,11 @@ const BlogHome: React.FC = () => {
gap: 1rem;
padding: 8vw;
min-width: 30rem;
@media screen and (max-width: 50rem) {
padding-block-start: 4rem;
padding-block-end: 6rem;
}
`}>
<Header />
<Spacer y={2} />
@ -218,31 +222,56 @@ const BlogHome: React.FC = () => {
</div>
</aside>
<article
className={cx(
className={classNames(
{ "article-open": isArticleOpen },
css`
height: 100%;
width: 100%;
flex: 3;
z-index: 1000;
display: flex;
position: relative;
overflow: hidden;
& > * {
height: 100%;
width: 100%;
}
`,
)}>
<div
className={css`
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 8vw;
background-color: #262626;
display: flex;
flex-direction: column;
gap: 1.5rem;
`}>
<Routes>
<Route path="/" element={<div></div>} />
<Route path="/*" element={<BlogPost />} />
</Routes>
key="blog-content"
className={classNames(
css`
background-color: #262626;
position: absolute;
transition: all 300ms;
transform: translateX(100%);
@media screen and (max-width: 50rem) {
padding-block-start: 4rem;
padding-block-end: 6rem;
}
`,
{
[css`
transform: translateX(0%);
`]: isArticleOpen,
},
)}>
<div
className={css`
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
padding: 8vw;
gap: 1.5rem;
`}>
{isArticleOpen && <BlogPost />}
</div>
</div>
</article>
</div>

Write Preview
Loading…
Cancel
Save