Skip to content
Snippets Groups Projects
Verified Commit 4e189bc8 authored by Julian Ospald's avatar Julian Ospald 🍵
Browse files

Add copy icon wrt #133

parent 46441d00
No related branches found
No related tags found
1 merge request!139Add copy icon wrt #133
Hide whitespace changes
Inline Side-by-side
www/copy.svg 0 → 100644
+ 1
− 0
View file @ 4e189bc8
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.66em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3l3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7c-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2c1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1s-1 .45-1 1s-.45 1-1 1H3c-.55 0-1 .45-1 1z" fill="#626262"/></svg>
www/ghcup.css
+ 81
− 9
View file @ 4e189bc8
...@@ -63,7 +63,7 @@ body#idx > * { ...@@ -63,7 +63,7 @@ body#idx > * {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
width: 31em; width: 37em;
} }
body#idx > #pitch { body#idx > #pitch {
...@@ -88,31 +88,56 @@ body#idx p.other-help { ...@@ -88,31 +88,56 @@ body#idx p.other-help {
background-color: rgb(250, 250, 250); background-color: rgb(250, 250, 250);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 45rem;
text-align: center;
border-radius: 3px; border-radius: 3px;
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);
box-shadow: 0px 1px 4px 0px rgb(204, 204, 204); box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
} }
.instructions > * { .instructions > * {
width: 45rem; width: 55rem;
margin-left: auto; margin-left: auto;
margin-right: 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 { hr {
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
#platform-instructions-linux > pre, #platform-instructions-linux > div > pre,
#platform-instructions-mac > pre, #platform-instructions-mac > div > pre,
#platform-instructions-freebsd > pre, #platform-instructions-freebsd > div > pre,
#platform-instructions-win32 > pre, #platform-instructions-win32 > pre,
#platform-instructions-win64 > pre, #platform-instructions-win64 > pre,
#platform-instructions-default > div > pre, #platform-instructions-default > div > div > pre,
#platform-instructions-unknown > div > pre { #platform-instructions-unknown > div > div > pre {
background-color: #515151; background-color: #515151;
color: white; color: white;
margin-left: auto; margin-left: auto;
...@@ -166,3 +191,50 @@ hr { ...@@ -166,3 +191,50 @@ hr {
color: #999; color: #999;
content: " $ "; 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;
}
www/ghcup.js
+ 10
− 0
View file @ 4e189bc8
...@@ -148,6 +148,16 @@ function fill_in_bug_report_values() { ...@@ -148,6 +148,16 @@ function fill_in_bug_report_values() {
nav_app.textContent = navigator.appVersion; 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 () { (function () {
adjust_for_platform(); adjust_for_platform();
set_up_cycle_button(); set_up_cycle_button();
......
www/index.html
+ 5
− 5
View file @ 4e189bc8
...@@ -26,19 +26,19 @@ ...@@ -26,19 +26,19 @@
<div id="platform-instructions-linux" class="instructions" style="display: none;"> <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> <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> <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>
<div id="platform-instructions-mac" class="instructions" style="display: none;"> <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> <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> <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>
<div id="platform-instructions-freebsd" class="instructions" style="display: none;"> <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> <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> <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> </div>
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<!-- duplicate the default cross-platform instructions --> <!-- duplicate the default cross-platform instructions -->
<div> <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> <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> <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> </div>
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
<div> <div>
<p>To install Haskell, if you are running Linux, macOS or FreeBSD,<br/>run the following <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> 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> <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> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment