Merge pull request #33 from prabhuignoto/updated-demo-page-+-minor-cs…

…s-fixes updated demo page
prabhuignoto · Oct 8, 2020 · 64cbd90 · 64cbd90 · vercel · Oct 8, 2020
2 parents c1dfe79 + befef98
commit 64cbd90
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 16 deletions.
diff --git a/public/github.svg b/public/github.svg
diff --git a/src/components/timeline-elements/timeline-control/timeline-control.styles.ts b/src/components/timeline-elements/timeline-control/timeline-control.styles.ts
@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 export const TimelineControlWrapper = styled.ul`
   display: flex;
   list-style: none;
-  margin: 0;
   padding: 0;
   border-radius: 20px;
   background: #0f52ba;
+  margin: 1rem 0;
   /* box-shadow: inset 0 0 8px 6px rgba(0,0,0,0.2), 0 0 2px 2px rgba(0,0,0,0.3); */
 `;
 

diff --git a/src/components/timeline-elements/timeline-item-content/timeline-item-content.styles.ts b/src/components/timeline-elements/timeline-item-content/timeline-item-content.styles.ts
@@ -61,15 +61,15 @@ export const TimelineContentDetailsWrapper = styled.div<{ theme: Theme }>`
   flex-direction: column;
   /* margin-top: 0.25rem; */
   margin-top: auto;
-  max-height: 350px;
+  max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: 0.35em;
   transition: max-height .2s linear;
   width: 100%;
 
   &.show-less {
-    max-height: 100px;
+    max-height: 50px;
     overflow: hidden;
   }
 

diff --git a/src/components/timeline-elements/timeline-item-content/timeline-item-content.tsx b/src/components/timeline-elements/timeline-item-content/timeline-item-content.tsx
@@ -37,8 +37,8 @@ const TimelineItemContent: React.FunctionComponent<TimelineContentModel> = ({
       return;
     }
     setTimeout(() => {
-      setCanShowMore(detailsEle.scrollHeight > 100);
-    }, 100);
+      setCanShowMore(detailsEle.scrollHeight > 50);
+    }, 300);
   }, []);
 
   useEffect(() => {

diff --git a/src/components/timeline-tree/timeline-tree.styles.ts b/src/components/timeline-tree/timeline-tree.styles.ts
@@ -1,5 +1,5 @@
-import styled from "@emotion/styled";
 import { keyframes } from "@emotion/core";
+import styled from "@emotion/styled";
 
 export const TimelineTreeWrapper = styled.div`
   display: flex;
@@ -73,7 +73,7 @@ export const TreeTrunkWrapper = styled.div<{ bg?: string, alternateCards?: boole
 export const TimelineItemContentWrapper = styled.div<{ alternateCards?: boolean }>`
   visibility: hidden;
   ${(p) => p.alternateCards ? "width: 45%;" : "width: 75%; height: 85%"};
-  padding: 1rem 0;
+  /* padding: 1rem 0; */
   
   &.left {
     order: 1;

diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
@@ -140,7 +140,7 @@ const Timeline: React.FunctionComponent<TimelineModel> = ({
     <Wrapper
       tabIndex={0}
       onKeyDown={(evt: React.KeyboardEvent<HTMLDivElement>) =>
-        !disableNavOnKey ? handleKeySelection(evt) : null
+        !disableNavOnKey && !slideShowRunning ? handleKeySelection(evt) : null
       }
       className={`${mode.toLowerCase()} ${titlePosition?.toLowerCase()}`}
     >

diff --git a/src/demo/App.styles.ts b/src/demo/App.styles.ts
@@ -95,6 +95,7 @@ export const Footer = styled.footer`
 
 export const URL = styled.a`
   margin: 0 1rem;
+  text-decoration: none;
 `;
 
 export const DescriptionContent = styled.p`
@@ -150,4 +151,10 @@ export const GithubLogo = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+`;
+
+export const SandBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
diff --git a/src/demo/App.tsx b/src/demo/App.tsx
@@ -12,14 +12,16 @@ import {
   DescriptionHeader,
   Footer,
   Horizontal,
+  SandBox,
   URL,
   Vertical,
   Wrapper,
 } from "./App.styles";
+import AppHeader from "./AppHeader";
 import data from "./data";
+import dataMixed from "./data-mixed";
 import Features from "./Features";
 import useMediaQuery from "./mediaQueryEffect";
-import AppHeader from "./AppHeader";
 
 const NewDemo: React.FunctionComponent = () => {
   const [state, setState] = useState({ fontsLoaded: false, mediaType: "" });
@@ -86,7 +88,8 @@ const NewDemo: React.FunctionComponent = () => {
               <DescriptionHeader># Horizontal</DescriptionHeader>
             </span>
             <DescriptionContent>
-              Timelines are rendered horizontally by default. Use the control buttons or LEFT, RIGHT keys on your keyboard to navigate.
+              Timelines are rendered horizontally by default. Use the control
+              buttons or LEFT, RIGHT keys on your keyboard to navigate.
             </DescriptionContent>
           </Description>
           <ComponentContainer type={state.mediaType}>
@@ -108,6 +111,14 @@ const NewDemo: React.FunctionComponent = () => {
           <ComponentContainerTree type={state.mediaType}>
             <Chrono items={items} mode="VERTICAL" />
           </ComponentContainerTree>
+          <SandBox>
+            <a href="https://codesandbox.io/s/react-chrono-tree-horizontal-wdqk3?fontsize=14&hidenavigation=1&theme=dark">
+              <img
+                alt="Edit react-chrono-tree-horizontal"
+                src="https://codesandbox.io/static/img/play-codesandbox.svg"
+              />
+            </a>
+          </SandBox>
         </Vertical>
 
         {/* Tree Mode */}
@@ -117,12 +128,45 @@ const NewDemo: React.FunctionComponent = () => {
               <DescriptionHeader># Tree</DescriptionHeader>
             </span>
             <DescriptionContent>
-              In <strong>TREE</strong> mode, the cards are rendered vertically in an alternating fashion.
+              In <strong>TREE</strong> mode, the cards are rendered vertically
+              in an alternating fashion.
             </DescriptionContent>
           </Description>
           <ComponentContainerTree type={state.mediaType}>
             <Chrono items={items} mode="TREE" />
           </ComponentContainerTree>
+          <SandBox>
+            <a href="https://codesandbox.io/s/react-chrono-tree-text-xtksq?fontsize=14&hidenavigation=1&theme=dark">
+              <img
+                alt="Edit react-chrono-tree-text"
+                src="https://codesandbox.io/static/img/play-codesandbox.svg"
+              />
+            </a>
+          </SandBox>
+        </Vertical>
+
+        {/* mixed mode */}
+        <Vertical>
+          <Description>
+            <span>
+              <DescriptionHeader># Mixed mode</DescriptionHeader>
+            </span>
+            <DescriptionContent>
+              The rendering is data driven. This allows to mix both media and
+              textual content.
+            </DescriptionContent>
+          </Description>
+          <ComponentContainerTree type={state.mediaType}>
+            <Chrono items={dataMixed} mode="TREE" />
+          </ComponentContainerTree>
+          <SandBox>
+            <a href="https://codesandbox.io/s/react-chrono-tree-image-uh2nz?fontsize=14&hidenavigation=1&theme=dark">
+              <img
+                alt="Edit react-chrono-tree-image"
+                src="https://codesandbox.io/static/img/play-codesandbox.svg"
+              />
+            </a>
+          </SandBox>
         </Vertical>
 
         {/* Horizontal Slideshow */}
@@ -142,35 +186,73 @@ const NewDemo: React.FunctionComponent = () => {
               items={items}
               mode="HORIZONTAL"
               slideShow
-              slideItemDuration={3500}
+              slideItemDuration={4500}
             />
           </ComponentContainer>
+          <SandBox>
+            <a href="https://codesandbox.io/s/react-chrono-tree-text-slide-zytpi?fontsize=14&hidenavigation=1&theme=dark">
+              <img
+                alt="Edit react-chrono-tree-text-slide"
+                src="https://codesandbox.io/static/img/play-codesandbox.svg"
+              />
+            </a>
+          </SandBox>
         </Horizontal>
 
-
         {/* Tree Slideshow */}
         <Vertical>
           <Description>
             <span>
               <DescriptionHeader># Slideshow with Tree</DescriptionHeader>
             </span>
             <DescriptionContent>
-              SlideShow is also supported in all the modes.
+              SlideShow is supported in all 3 modes.
             </DescriptionContent>
           </Description>
           <ComponentContainerTree type={state.mediaType}>
-            <Chrono items={data} mode="TREE" slideItemDuration={3500} slideShow />
+            <Chrono
+              items={data}
+              mode="TREE"
+              slideItemDuration={4500}
+              slideShow
+            />
           </ComponentContainerTree>
+          <SandBox>
+            <a href="https://codesandbox.io/s/react-chrono-tree-demo-zksyo?fontsize=14&hidenavigation=1&theme=dark">
+              <img
+                alt="Edit react-chrono-tree-demo"
+                src="https://codesandbox.io/static/img/play-codesandbox.svg"
+              />
+            </a>
+          </SandBox>
         </Vertical>
+
+        {/* footer */}
         <Footer>
           <URL href="https://www.prabhumurthy.com" target="_new">
             {new Date().getFullYear()}&copy;www.prabhumurthy.com
           </URL>
           <URL
             href="https://github.com/prabhuignoto/react-chrono"
             target="_new"
+            style={{
+              marginLeft: "auto",
+              display: "flex",
+              alignItems: "center",
+            }}
           >
-            Github
+            <img
+              src="github.svg"
+              style={{
+                width: "1.25rem",
+                height: "1.25rem",
+                marginRight: "0.2rem",
+              }}
+            />
+            <span>Github</span>
+          </URL>
+          <URL href="#" onClick={() => (document.body.scrollTop = 0)}>
+            ⏫ TOP
           </URL>
         </Footer>
       </>