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:
@@ -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"><></button>
|
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode"><></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>
|
||||||
|
@@ -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);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user