jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-19 15:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

use html5 details element instead of javascript (#34279)

Browse Source
This commit is contained in:
Remy Sharp 2024-08-13 14:20:18 +01:00 committed by GitHub
parent baacce1ac4
commit a39e8c8e6f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/details.rb
View File

@ -40,29 +40,17 @@ module Jekyll
end end
<<~MARKUP <<~MARKUP
<script>
function showDetails(el) {
const content = el.parentElement.querySelector(".details-block-content");
const up = el.querySelector("svg#up");
const down = el.querySelector("svg#down");
const shouldExpand = down.style.display === "block";
up.style.display = shouldExpand ? "block" : "none";
down.style.display = !shouldExpand ? "block" : "none";
content.hidden = !shouldExpand;
el.ariaExpanded = shouldExpand;
}
</script>
<div class="details-block"> <div class="details-block">
<div class='details-block-item'> <details class='details-block-item'>
<button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false"> <summary class='details-block-title'>
<span>#{icon}#{title}</span> <span>#{icon}#{title}</span>
<div class='details-block-arrow'> <div class='details-block-arrow'>
<svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg> <svg class="down" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
<svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg> <svg class="up" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
</div>
</button>
<div class='details-block-content' id="content_#{idx}" hidden>#{contents}</div>
</div> </div>
</summary>
<div class='details-block-content' id="content_#{idx}">#{contents}</div>
</details>
</div> </div>
MARKUP MARKUP
end end

18
sass/homeassistant/plugins/_details.scss
View File

@ -10,6 +10,16 @@ div.details-block {
border: 1px solid rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .12);
border-radius: 16px; border-radius: 16px;
&[open] .details-block-title {
.up {
display: block;
}
.down {
display: none;
}
}
.details-block-title { .details-block-title {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
@ -23,6 +33,14 @@ div.details-block {
border: 0px; border: 0px;
width: 100%; width: 100%;
padding: 0; padding: 0;
.up {
display: none;
}
.down {
display: block;
}
} }
.details-block-content { .details-block-content {
margin: 4px 0 12px 0; margin: 4px 0 12px 0;