From 2685582a908893be42177e1b5e56e7a76f5b44b3 Mon Sep 17 00:00:00 2001 From: BcRikko Date: Thu, 21 Feb 2019 18:37:24 +0900 Subject: [PATCH] docs: fix copied balloon --- docs/index.html | 13 ++++++++++--- docs/script.js | 19 ++++++++++++++++++- docs/style.css | 11 ++++++++++- 3 files changed, 38 insertions(+), 5 deletions(-) diff --git a/docs/index.html b/docs/index.html index 7d1d2da..d22f869 100644 --- a/docs/index.html +++ b/docs/index.html @@ -38,12 +38,12 @@ -
+

NES.css

NES-style CSS Framework.

-
+

Fork me
on GitHub

@@ -79,12 +79,13 @@
- + 
{{ sample.code }}
+

#Members

@@ -142,6 +143,7 @@
+

#Articles

@@ -158,6 +160,11 @@ @bc_rikko

+ + +
+

copied!!

+
diff --git a/docs/script.js b/docs/script.js index 1e3834f..1ba6442 100644 --- a/docs/script.js +++ b/docs/script.js @@ -208,6 +208,11 @@ new Vue({ contributors, articles, animateOctocat: false, + copiedBalloon: { + display: 'none', + top: 0, + left: 0, + }, }; }, filters: { @@ -221,7 +226,9 @@ new Vue({ hljs.initHighlightingOnLoad(); }, methods: { - copy(id) { + copy(event, id) { + this.showCopiedBalloon(event.pageY, event.pageX); + const fake = document.createElement('textarea'); fake.value = this.collection.find(a => a.title === id).code; fake.setAttribute('readonly', ''); @@ -240,5 +247,15 @@ new Vue({ stopAnimate() { this.animateOctocat = false; }, + showCopiedBalloon(top, left) { + this.copiedBalloon = { + display: 'block', + top: `${top - 100}px`, + left: `${left - 180}px`, + }; + setTimeout(() => { + this.copiedBalloon.display = 'none'; + }, 1000); + }, }, }); diff --git a/docs/style.css b/docs/style.css index 28b6185..2d2265b 100644 --- a/docs/style.css +++ b/docs/style.css @@ -80,7 +80,7 @@ section.showcase > section.samplecode { section.showcase > section.samplecode > pre code { font-size: 13px; line-height: 1.5; - padding: 1rem; + padding: 1.5rem; } .item { @@ -96,6 +96,15 @@ section.showcase > section.samplecode > pre code { max-width: 400px; } +/* Copied balloon */ +.nes-balloon.copied-balloon { + position: absolute; + display: none; + padding: 1rem; + box-shadow: 0 5px 20px 5px rgba(0,0,0,.6); + z-index: 1; +} + /* Topic */ h3.topic-title { display: flex;