mirror of
https://gitea.invidious.io/iv-org/invidious-copy-2022-08-14.git
synced 2024-08-15 00:53:20 +00:00
Enhance search filter UI for JS disabled users
Change filters UI box to use <details>. Stylize detail button for filter ui Fix localization for 'filter' Fix CSS Fix styling
This commit is contained in:
parent
489d0151ad
commit
83b5fd252e
3 changed files with 34 additions and 29 deletions
|
@ -628,6 +628,31 @@ body.dark-theme {
|
|||
}
|
||||
}
|
||||
|
||||
#filters {
|
||||
display: none;
|
||||
}
|
||||
#filters
|
||||
display: inline;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#filters > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#filters > summary {
|
||||
display: inline-block;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
#filters > summary {
|
||||
display: inline-block;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
#filters > summary::before {
|
||||
content: "[ + ]";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#filters[open] > summary::before {
|
||||
content: "[ - ]";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
function toggle_comments(event) {
|
||||
var target = event.target;
|
||||
var body = document.getElementById('filters');
|
||||
if (body.style.display === 'flex') {
|
||||
target.innerHTML = '[ + ]';
|
||||
body.style.display = 'none';
|
||||
} else {
|
||||
target.innerHTML = '[ - ]';
|
||||
body.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('togglefilters').onclick = toggle_comments;
|
|
@ -2,18 +2,10 @@
|
|||
<title><%= search_query.not_nil!.size > 30 ? HTML.escape(query.not_nil![0,30].rstrip(".") + "...") : HTML.escape(query.not_nil!) %> - Invidious</title>
|
||||
<% end %>
|
||||
|
||||
<h3>
|
||||
<a id="togglefilters" href="javascript:void(0)">[ + ]</a>
|
||||
<%= translate(locale, "filter") %>
|
||||
</h3>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
#filters {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
<details id="filters">
|
||||
<summary>
|
||||
<a><h3 style="display:inline"> <%= translate(locale, "filter") %> </h3></a>
|
||||
</summary>
|
||||
<div id="filters" class="pure-g h-box">
|
||||
<div class="pure-u-1-3 pure-u-md-1-5">
|
||||
<b><%= translate(locale, "date") %></b>
|
||||
|
@ -95,6 +87,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr/>
|
||||
|
||||
|
@ -141,4 +134,4 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/search.js?v=<%= ASSET_COMMIT %>"></script>
|
||||
<script src="/js/search.js?v=<%= ASSET_COMMIT %>"></script>
|
||||
|
|
Loading…
Reference in a new issue