ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-10 07:35:16 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added arrow to dropdown button

Browse source
This commit is contained in:
tsmitty11 2023-05-15 20:28:53 +02:00
parent b3882e7705
commit 2f8d53ea27
1 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/layouts/partials/tea-two-ways.html
View file

@ -22,13 +22,17 @@
{{- partial "click-to-copy.html" . -}} {{- partial "click-to-copy.html" . -}}
<p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand&#8208;alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including&nbsp;<span class="tea brew-install no-break pe-2">brew install</span>&nbsp;.</p> <p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand&#8208;alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including&nbsp;<span class="tea brew-install no-break pe-2">brew install</span>&nbsp;.</p>
<div class="dropdown"> <div class="dropdown">
<button onclick="toggleDropdown()" class="dropbtn hbtn-light hb-light-fill-right">Additional Install Options</button> <button onclick="toggleDropdown()" class="dropbtn hbtn-light hb-light-fill-right">
<div id="myDropdown" class="dropdown-content"> Additional Install Options
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#a-fancy-one-liner">fancy one-liner</a> <span id="arrow" class="arrow" style="font-size:16px;">&#8250;</span>
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-homebrew">hombrew</a> </button>
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-docker">via docker</a> <div id="myDropdown" class="dropdown-content">
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#a-fancy-one-liner">fancy one-liner</a>
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-homebrew">hombrew</a>
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-docker">via docker</a>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -105,22 +109,38 @@
content: "\00a0"; /* non-breaking space character */ content: "\00a0"; /* non-breaking space character */
} }
.arrow {
transition: transform 0.3s;
display: inline-block;
margin-left: 5px;
}
.rotated {
transform: rotate(90deg);
}
</style> </style>
<script> <script>
function toggleDropdown() { function toggleDropdown() {
var dropdown = document.getElementById("myDropdown"); var dropdown = document.getElementById("myDropdown");
var arrow = document.getElementById("arrow");
dropdown.classList.toggle("show"); dropdown.classList.toggle("show");
arrow.classList.toggle("rotated", dropdown.classList.contains("show"));
} }
window.onclick = function(event) { window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) { if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content"); var dropdowns = document.getElementsByClassName("dropdown-content");
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < dropdowns.length; i++) { for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i]; var openDropdown = dropdowns[i];
var arrow = arrows[i];
if (openDropdown.classList.contains('show')) { if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show'); openDropdown.classList.remove('show');
arrow.classList.remove('rotated');
} }
} }
} }