mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-25 15:10:48 +02:00
Code Issues Releases Wiki Activity

docs: fix copied balloon

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/index.html
View File

@@ -38,12 +38,12 @@
</head>
<body>
<div class="wrapper">
<div id="nescss" class="wrapper">
<header>
<h1><i class="snes-jp-logo brand"></i>NES.css</h1>
<p>NES-style CSS Framework.</p>
</header>
<main id="nescss">
<main>
<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>
<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>
</section>
<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>
</section>
</section>
</section>
<!-- Members -->
<section class="topic">
<h2 id="members"><a href="#members">#</a>Members</h2>
<section class="coreteam">
@@ -142,6 +143,7 @@
</section>
</section>
<!-- Articles -->
<section class="articles">
<h2 id="articles"><a href="#articles">#</a>Articles</h2>
<article v-for="article in articles">
@@ -158,6 +160,11 @@
<a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
</p>
</footer>
<!-- Copied balloon -->
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p>
</div>
</div>
</body>
<script src="./script.js"></script>

19
docs/script.js
View File

@@ -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);
},
},
});

11
docs/style.css
View File

@@ -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;