Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 06:55:47 +01:00
Code Issues Packages Projects Releases Activity

make right content in cardcolumn hoverable

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-04-09 09:31:13 +02:00
parent f9e24055a4
commit 9cdec81ec0
3 changed files with 72 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scm-ui/ui-components/src/CardColumn.stories.tsx
View File

@@ -27,6 +27,8 @@ import { storiesOf } from "@storybook/react";
import CardColumn from "./CardColumn";
import Icon from "./Icon";
import styled from "styled-components";
import { DateFromNow } from ".";
import repository from "./__resources__/repository";
const Wrapper = styled.div`
margin: 2rem;
@@ -40,6 +42,7 @@ const avatar = <Icon name="icons fa-2x fa-fw" />;
const title = <strong>title</strong>;
const footerLeft = <small>left footer</small>;
const footerRight = <small>right footer</small>;
const baseDate = "2020-03-26T12:13:42+02:00";
storiesOf("CardColumn", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -60,4 +63,10 @@ storiesOf("CardColumn", module)
footerLeft={footerLeft}
footerRight={footerRight}
/>
))
.add("with hoverable date", () => (
<CardColumn title={title} footerLeft={footerLeft} footerRight={
<small className="level-item">
<DateFromNow baseDate={baseDate} date={repository.creationDate}/>
</small>} />
));

1
scm-ui/ui-components/src/CardColumn.tsx
View File

@@ -74,6 +74,7 @@ const RightMarginDiv = styled.div`
const InheritFlexShrinkDiv = styled.div`
flex-shrink: inherit;
pointer-events: all;
`;
const CardColumn: FC<Props> = ({

67
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -498,7 +498,7 @@ exports[`Storyshots CardColumn default 1`] = `
</small>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small>
right footer
@@ -546,7 +546,7 @@ exports[`Storyshots CardColumn minimal 1`] = `
</small>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small>
right footer
@@ -558,6 +558,61 @@ exports[`Storyshots CardColumn minimal 1`] = `
</div>
`;
exports[`Storyshots CardColumn with hoverable date 1`] = `
<div
className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
>
<article
className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
>
<div
className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
>
<div
className="is-flex"
>
<div
className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
>
<p
className="shorten-text is-marginless"
>
<strong>
title
</strong>
</p>
</div>
</div>
<div
className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
>
<div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
>
<small>
left footer
</small>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small
className="level-item"
>
<time
className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
title="2020-03-23 09:26:01"
>
3 days ago
</time>
</small>
</div>
</div>
</div>
</article>
</div>
`;
exports[`Storyshots CardColumnSmall default 1`] = `
<div
className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
@@ -34694,7 +34749,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
</a>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small
className="level-item"
@@ -34808,7 +34863,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
</a>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small
className="level-item"
@@ -34919,7 +34974,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
</a>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small
className="level-item"
@@ -35037,7 +35092,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
</a>
</div>
<div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
>
<small
className="level-item"