1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-25 07:01:11 +02:00

docs: fix copied balloon

This commit is contained in:
BcRikko
2019-02-21 18:37:24 +09:00
parent bd17c12cac
commit 2685582a90
3 changed files with 38 additions and 5 deletions

View File

@@ -38,12 +38,12 @@
</head> </head>
<body> <body>
<div class="wrapper"> <div id="nescss" class="wrapper">
<header> <header>
<h1><i class="snes-jp-logo brand"></i>NES.css</h1> <h1><i class="snes-jp-logo brand"></i>NES.css</h1>
<p>NES-style CSS Framework.</p> <p>NES-style CSS Framework.</p>
</header> </header>
<main id="nescss"> <main>
<a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate"> <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
<p class="nes-balloon from-right">Fork me<br />on GitHub</p> <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
<i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i> <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
@@ -79,12 +79,13 @@
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button> <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
</section> </section>
<section class="samplecode" v-show="sample.showCode"> <section class="samplecode" v-show="sample.showCode">
<button type="button" class="nes-btn copycode" @click="copy(sample.title)">copy</button> <button type="button" class="nes-btn copycode" @click="copy($event, sample.title)">copy</button>
<pre><code class="html">{{ sample.code }}</code></pre> <pre><code class="html">{{ sample.code }}</code></pre>
</section> </section>
</section> </section>
</section> </section>
<!-- Members -->
<section class="topic"> <section class="topic">
<h2 id="members"><a href="#members">#</a>Members</h2> <h2 id="members"><a href="#members">#</a>Members</h2>
<section class="coreteam"> <section class="coreteam">
@@ -142,6 +143,7 @@
</section> </section>
</section> </section>
<!-- Articles -->
<section class="articles"> <section class="articles">
<h2 id="articles"><a href="#articles">#</a>Articles</h2> <h2 id="articles"><a href="#articles">#</a>Articles</h2>
<article v-for="article in articles"> <article v-for="article in articles">
@@ -158,6 +160,11 @@
<a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a> <a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
</p> </p>
</footer> </footer>
<!-- Copied balloon -->
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p>
</div>
</div> </div>
</body> </body>
<script src="./script.js"></script> <script src="./script.js"></script>

View File

@@ -208,6 +208,11 @@ new Vue({
contributors, contributors,
articles, articles,
animateOctocat: false, animateOctocat: false,
copiedBalloon: {
display: 'none',
top: 0,
left: 0,
},
}; };
}, },
filters: { filters: {
@@ -221,7 +226,9 @@ new Vue({
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
}, },
methods: { methods: {
copy(id) { copy(event, id) {
this.showCopiedBalloon(event.pageY, event.pageX);
const fake = document.createElement('textarea'); const fake = document.createElement('textarea');
fake.value = this.collection.find(a => a.title === id).code; fake.value = this.collection.find(a => a.title === id).code;
fake.setAttribute('readonly', ''); fake.setAttribute('readonly', '');
@@ -240,5 +247,15 @@ new Vue({
stopAnimate() { stopAnimate() {
this.animateOctocat = false; this.animateOctocat = false;
}, },
showCopiedBalloon(top, left) {
this.copiedBalloon = {
display: 'block',
top: `${top - 100}px`,
left: `${left - 180}px`,
};
setTimeout(() => {
this.copiedBalloon.display = 'none';
}, 1000);
},
}, },
}); });

View File

@@ -80,7 +80,7 @@ section.showcase > section.samplecode {
section.showcase > section.samplecode > pre code { section.showcase > section.samplecode > pre code {
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
padding: 1rem; padding: 1.5rem;
} }
.item { .item {
@@ -96,6 +96,15 @@ section.showcase > section.samplecode > pre code {
max-width: 400px; 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 */ /* Topic */
h3.topic-title { h3.topic-title {
display: flex; display: flex;