andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add view snippet button

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-30 09:15:59 +03:00
parent 1bbec18130
commit e60579d5af
3 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/docs/components/SnippetCard.js
View File

@ -151,34 +151,35 @@ const ShortCard = ({
}, []);
return (
<Link to={`/snippet/${snippetData.id}`} className='clickable-card-wrapper' rel='canonical'>
<div className='card short'>
<h4 className='card-title'>
{snippetData.title}
</h4>
<div
className='card-description'
dangerouslySetInnerHTML={{
__html: `${getTextualContent(snippetData.html)}`,
}}
/>
<div className='card-bottom'>
<h5 className='card-section-demo-title'>Demo</h5>
<div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
<style>
{snippetData.code.scopedCss}
</style>
<div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
{
snippetData.code.js &&
<script>
{`function()(${snippetData.code.js})();`}
</script>
}
</div>
<div className='card short'>
<h4 className='card-title'>
<Link to={`/snippet/${snippetData.id}`} className='clickable-card-wrapper' rel='canonical'>
{snippetData.title}
</Link>
</h4>
<div
className='card-description'
dangerouslySetInnerHTML={{
__html: `${getTextualContent(snippetData.html)}`,
}}
/>
<div className='card-bottom'>
<h5 className='card-section-demo-title'>Demo</h5>
<div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
<style>
{snippetData.code.scopedCss}
</style>
<div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
{
snippetData.code.js &&
<script>
{`function()(${snippetData.code.js})();`}
</script>
}
</div>
<p className='snippet-view'><Link to={`/snippet/${snippetData.id}`} className='button button-b button-view' rel='canonical'>View snippet</Link></p>
</div>
</Link>
</div>
);
};

4
src/docs/styles/_button.scss
View File

@ -95,4 +95,8 @@
background-position-y: center;
background-position-x: 0.5rem;
padding-left: 2.5rem
}
.button.button-view {
font-size: 1rem;
}

20
src/docs/styles/_card.scss
View File

@ -71,14 +71,9 @@
background: var(--button-example-toggler-fore-color);
}
}
// &.short {
// .card-bottom {
// display: none;
// @media screen and (min-width: $layout-large-breakpoint) {
// display: block;
// }
// }
// }
&.short {
margin-bottom: 2rem;
}
}
// Card sections
@ -215,3 +210,12 @@
}
}
}
.snippet-view {
text-align: center;
width: calc(100% + 2.75rem);
position: absolute;
margin-left: 0.75rem;
bottom: -3.5rem;
}