logos-co
/
open-law
mirror of https://github.com/logos-co/open-law.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

issues book-view scrolling beyond end of book #146

This commit is contained in:
SvyatoslavArtymovych 2023-06-16 12:43:32 +03:00
parent 26325b01c7
commit 990defb6ab
5 changed files with 109 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/css/styles.css
View File

File diff suppressed because one or more lines are too long

2
app/static/js/main.js
View File

File diff suppressed because one or more lines are too long

10
app/templates/book/collection_view.html
View File

@ -17,9 +17,10 @@
{% include 'book/modals/delete_section_modal.html' %}
{% endif %}
<div class="flex overflow-hidden">
<div class="flex">
<!-- prettier-ignore -->
<div id="accordion-collapse" data-accordion="open" class="p-3 w-2/6 border-t border-r border-gray-200 dark:border-gray-700 overflow-y-scroll h-box">
<div class="w-2/6 border-gray-200 dark:border-gray-700 h-box">
<div id="accordion-collapse" data-accordion="open" class="p-3 w-2/6 border-r fixed inset-0 mt-135 overflow-y-scroll">
<div class="flex justify-between">
<div class="flex dark:text-white">
<svg id="tabGoBackButton" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>
@ -114,8 +115,9 @@
{% endif %}
{% endfor %}
</div>
</div>
<!-- Here start book-preview on right side-->
<div class="p-3 px-6 w-4/6 dark:text-white overflow-y-scroll h-box">
<div class="p-3 px-6 w-4/6 dark:text-white">
<p class="text-xs mb-3">
{% if book.original_book %}
Forked by
@ -197,7 +199,7 @@
{% else %}
{% set children_collections = book.active_version.children_collections %}
{% endif %} {% for collection in children_collections if not collection.is_root and not collection.is_deleted %}
<p class="my-3 underline" id="collection-{{collection.label}}">
<p class="my-3 underline break-words " id="collection-{{collection.label}}">
#{{collection.label}}
</p>
{% if not collection.active_sections and not collection.active_children %}

15
src/scroll.ts
View File

@ -1,3 +1,14 @@
const scrollToElement = (element: Element) => {
var headerOffset = 160;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
});
};
export function scroll() {
const btns = document.querySelectorAll('[href^="#section-"]');
if (btns) {
@ -7,7 +18,7 @@ export function scroll() {
link = link.replace('#', '');
const neededSection = document.querySelector(`[id^="${link}"]`);
if (neededSection) {
neededSection.scrollIntoView(true);
scrollToElement(neededSection);
}
});
});
@ -20,7 +31,7 @@ export function scroll() {
link = link.replace('#', '');
const neededSection = document.querySelector(`[id^="${link}"]`);
if (neededSection) {
neededSection.scrollIntoView(true);
scrollToElement(neededSection);
}
});
});