show more button for item description
This commit is contained in:
parent
0a7fa5f09e
commit
e91a61eb85
2 changed files with 59 additions and 8 deletions
|
@ -223,17 +223,35 @@
|
|||
{% endif %}
|
||||
</hgroup>
|
||||
</div>
|
||||
<style type="text/css"></style>
|
||||
<div id="item-detail" class="middle">
|
||||
<section id="item-content">
|
||||
<h5>{% trans 'overview' %}</h5>
|
||||
<div class="tldr-box">
|
||||
<input type="checkbox" id="content-expanded">
|
||||
{% if item.display_description %}
|
||||
<p class="tldr" _="on click toggle .tldr on me">{{ item.display_description | linebreaksbr }}</p>
|
||||
<p>{{ item.display_description | linebreaksbr }}</p>
|
||||
{% elif item.parent_item.display_description %}
|
||||
<p class="tldr" _="on click toggle .tldr on me">{{ item.parent_item.display_description | linebreaksbr }}</p>
|
||||
<p>{{ item.parent_item.display_description | linebreaksbr }}</p>
|
||||
{% else %}
|
||||
<p class="empty">{% trans 'nothing so far.' %}</p>
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
<label for="content-expanded" role="button" class="outline secondary">{% trans "show more" %}</label>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const ps = document.querySelectorAll('.tldr-box p');
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
entry.target.classList[entry.target.scrollHeight > entry.contentRect.height ? 'add' : 'remove']('truncated');
|
||||
}
|
||||
});
|
||||
|
||||
ps.forEach(p => {
|
||||
observer.observe(p);
|
||||
});
|
||||
</script>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</section>
|
||||
<section class="solo-hidden">
|
||||
<div>
|
||||
|
|
|
@ -14,6 +14,39 @@
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.tldr-box {
|
||||
input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 10;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input:focus ~ label {
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
input:checked + p {
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
|
||||
input:checked ~ label,
|
||||
p:not(.truncated) ~ label{
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 1px 4px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.longlist {
|
||||
max-height: 60vh;
|
||||
overflow-y: scroll;
|
||||
|
|
Loading…
Add table
Reference in a new issue