Add copy icon wrt #133
This commit is contained in:
Julian Ospald
parent
46441d00fc
commit
46da6f3d6d
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<title>copy</title>
|
||||
<path d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
|
|
@ -63,7 +63,7 @@ body#idx > * {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
width: 31em;
|
||||
width: 37em;
|
||||
}
|
||||
|
||||
body#idx > #pitch {
|
||||
|
|
@ -88,31 +88,56 @@ body#idx p.other-help {
|
|||
background-color: rgb(250, 250, 250);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 45rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
.instructions > * {
|
||||
width: 45rem;
|
||||
width: 55rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.instructions div.command-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.instructions div.command-button button {
|
||||
color: white;
|
||||
/* border: none; */
|
||||
background-color: rgb(242, 242, 242);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
|
||||
margin-left: 1rem;
|
||||
margin-right: auto;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions div.command-button button:hover {
|
||||
background: rgb(232, 232, 232);
|
||||
}
|
||||
|
||||
.instructions div.command-button button:focus {
|
||||
background: rgb(222, 222, 222);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#platform-instructions-linux > pre,
|
||||
#platform-instructions-mac > pre,
|
||||
#platform-instructions-freebsd > pre,
|
||||
#platform-instructions-linux > div > pre,
|
||||
#platform-instructions-mac > div > pre,
|
||||
#platform-instructions-freebsd > div > pre,
|
||||
#platform-instructions-win32 > pre,
|
||||
#platform-instructions-win64 > pre,
|
||||
#platform-instructions-default > div > pre,
|
||||
#platform-instructions-unknown > div > pre {
|
||||
#platform-instructions-default > div > div > pre,
|
||||
#platform-instructions-unknown > div > div > pre {
|
||||
background-color: #515151;
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
|
|
@ -166,3 +191,50 @@ hr {
|
|||
color: #999;
|
||||
content: " $ ";
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* border-bottom: 1px dotted black; [> If you want dots under the hoverable text <] */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* Tooltip arrow */
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
10
www/ghcup.js
10
www/ghcup.js
|
|
@ -148,6 +148,16 @@ function fill_in_bug_report_values() {
|
|||
nav_app.textContent = navigator.appVersion;
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const text = document.getElementsByClassName("ghcup-command").item(0).innerText;
|
||||
const el = document.createElement('textarea');
|
||||
el.value = text;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
}
|
||||
|
||||
(function () {
|
||||
adjust_for_platform();
|
||||
set_up_cycle_button();
|
||||
|
|
|
|||
|
|
@ -26,19 +26,19 @@
|
|||
|
||||
<div id="platform-instructions-linux" class="instructions" style="display: none;">
|
||||
<p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
|
||||
<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
|
||||
<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
|
||||
<p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running Linux. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
|
||||
</div>
|
||||
|
||||
<div id="platform-instructions-mac" class="instructions" style="display: none;">
|
||||
<p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
|
||||
<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
|
||||
<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
|
||||
<p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running macOS. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
|
||||
</div>
|
||||
|
||||
<div id="platform-instructions-freebsd" class="instructions" style="display: none;">
|
||||
<p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
|
||||
<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
|
||||
<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
|
||||
<p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running FreeBSD. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
<!-- duplicate the default cross-platform instructions -->
|
||||
<div>
|
||||
<p>If you are running Linux, macOS or FreeBSD,<br/>run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
|
||||
<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
|
||||
<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
|
||||
<p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
<div>
|
||||
<p>To install Haskell, if you are running Linux, macOS or FreeBSD,<br/>run the following
|
||||
in your terminal (as a user other than root), then follow the onscreen instructions.</p>
|
||||
<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
|
||||
<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
|
||||
<p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue