From e60579d5af177ccf277107268bdf10ec672a6f38 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 30 Aug 2019 09:15:59 +0300
Subject: [PATCH] Add view snippet button

---
 src/docs/components/SnippetCard.js | 53 +++++++++++++++---------------
 src/docs/styles/_button.scss       |  4 +++
 src/docs/styles/_card.scss         | 20 ++++++-----
 3 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js
index 5b96275c0..19c23a41b 100644
--- a/src/docs/components/SnippetCard.js
+++ b/src/docs/components/SnippetCard.js
@@ -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>
   );
 };
 
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
index 5842d51ba..30d608232 100644
--- a/src/docs/styles/_button.scss
+++ b/src/docs/styles/_button.scss
@@ -95,4 +95,8 @@
   background-position-y: center;
   background-position-x: 0.5rem;
   padding-left: 2.5rem
+}
+
+.button.button-view {
+  font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss
index 5c60f621c..d4281eba1 100644
--- a/src/docs/styles/_card.scss
+++ b/src/docs/styles/_card.scss
@@ -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;
+
+}
\ No newline at end of file