didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust header

Browse Source
This commit is contained in:
Pete Matsyburka
2025-04-18 12:28:46 +03:00
parent 847e70ec1b
commit 2a9c375273
2 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/elements/scroll_buttons.js
+9 -3
View File
@@ -5,7 +5,9 @@ export default class extends HTMLElement {
window.addEventListener('scroll', this.onScroll.bind(this))
window.addEventListener('resize', this.onResize.bind(this))
this.onResize()
if (!this.isNarrow() && this.isHeaderNotVisible()) {
this.showButtons({ animate: false })
}
}
disconnectedCallback () {
@@ -22,7 +24,7 @@ export default class extends HTMLElement {
}
isNarrow () {
return window.innerWidth < 1366
return window.innerWidth < 1230
}
onScroll () {
@@ -38,7 +40,11 @@ export default class extends HTMLElement {
return rect.bottom <= 0 || rect.top >= window.innerHeight
}
showButtons () {
showButtons ({ animate } = { animate: true }) {
if (animate) {
this.classList.add('transition-transform', 'duration-300')
}
this.classList.remove('hidden', '-translate-y-10', 'opacity-0')
this.classList.add('translate-y-0', 'opacity-100')
}
app/views/submit_form/show.html.erb
+13 -6
View File
@@ -8,10 +8,10 @@
<div style="max-height: -webkit-fill-available;">
<div id="scrollbox">
<div class="mx-auto block pb-72" style="max-width: 1000px">
<%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
<%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 transition-transform duration-300 %>
<%= local_assigns[:banner_html] || capture do %>
<%= render('submit_form/banner') %>
<div id="signing_form_header" class="sticky min-[1366px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
<div id="signing_form_header" class="sticky min-[1230px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
<div class="text-xl md:text-2xl font-medium focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<%= @submitter.submission.template.name %>
</div>
@@ -36,16 +36,23 @@
</download-button>
</div>
</div>
<scroll-buttons class="fixed right-5 top-2 hidden md:flex gap-1 z-50 transition-transform duration-300 ease-in-out opacity-0 -translate-y-10">
<scroll-buttons class="fixed right-5 top-2 hidden md:flex gap-1 z-50 ease-in-out opacity-0 -translate-y-10">
<% if @form_configs[:with_decline] %>
<label id="decline_button" for="<%= decline_modal_checkbox_uuid %>" class="btn btn-sm px-2"><%= t(:decline) %></label>
<label id="decline_button" for="<%= decline_modal_checkbox_uuid %>" class="btn btn-sm px-0">
<span class="min-[1366px]:inline hidden px-3">
<%= t(:decline) %>
</span>
<span class="inline min-[1366px]:hidden px-2">
<%= svg_icon('x', class: 'w-5 h-5') %>
</span>
</label>
<% end %>
<download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2">
<span data-target="download-button.defaultButton">
<%= svg_icon('download', class: 'w-6 h-6') %>
<%= svg_icon('download', class: 'w-5 h-5') %>
</span>
<span class="hidden" data-target="download-button.loadingButton">
<%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
<%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
</span>
</download-button>
</scroll-buttons>