QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-07 14:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Remove additional padding from JS controller and add directly as a class (#1007)

Browse Source
This commit is contained in:
Alessio Cappa
2026-02-16 23:36:27 +01:00
committed by GitHub
parent d79d86d848
commit 862d39dc3b
3 changed files with 9 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/UI/account_page.html.erb
View File

@@ -1,12 +1,12 @@
<%= turbo_stream_from account %> <%= turbo_stream_from account %>
<%= turbo_frame_tag id do %> <%= turbo_frame_tag id do %>
<%= tag.div class: "space-y-4 pb-32" do %> <%= tag.div class: "space-y-4 pb-5 lg:pb-32" do %>
<%= render "accounts/show/header", account: account, title: title, subtitle: subtitle %> <%= render "accounts/show/header", account: account, title: title, subtitle: subtitle %>
<%= render UI::Account::Chart.new(account: account, period: chart_period, view: chart_view) %> <%= render UI::Account::Chart.new(account: account, period: chart_period, view: chart_view) %>
<div class="min-h-[800px]" data-testid="account-details"> <div data-testid="account-details">
<% if tabs.count > 1 %> <% if tabs.count > 1 %>
<%= render DS::Tabs.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %> <%= render DS::Tabs.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %>
<% tabs_container.with_nav(classes: "max-w-fit") do |nav| %> <% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>

32
app/javascript/controllers/viewport_controller.js
View File

@@ -1,46 +1,26 @@
import { Controller } from "@hotwired/stimulus" import { Controller } from "@hotwired/stimulus"
export default class extends Controller { export default class extends Controller {
static targets = ["content", "bottomNav"]
connect() { connect() {
this.updateViewport() this.updateViewport()
this.updateBottomSpacing()
window.addEventListener("resize", this.handleResize) this.boundResize = this.handleResize.bind(this)
window.addEventListener("orientationchange", this.handleResize)
if (this.hasBottomNavTarget) { window.addEventListener("resize", this.boundResize)
this.resizeObserver = new ResizeObserver(() => { window.addEventListener("orientationchange", this.boundResize)
this.updateBottomSpacing()
})
this.resizeObserver.observe(this.bottomNavTarget)
}
} }
disconnect() { disconnect() {
window.removeEventListener("resize", this.handleResize) window.removeEventListener("resize", this.boundResize)
window.removeEventListener("orientationchange", this.handleResize) window.removeEventListener("orientationchange", this.boundResize)
if (this.resizeObserver) {
this.resizeObserver.disconnect()
}
} }
handleResize = () => { handleResize() {
this.updateViewport() this.updateViewport()
this.updateBottomSpacing()
} }
updateViewport() { updateViewport() {
const height = window.innerHeight const height = window.innerHeight
document.documentElement.style.setProperty("--app-height", `${height}px`) document.documentElement.style.setProperty("--app-height", `${height}px`)
} }
updateBottomSpacing() {
if (!this.hasBottomNavTarget || !this.hasContentTarget) return
const navHeight = this.bottomNavTarget.offsetHeight
this.contentTarget.style.paddingBottom = `${navHeight}px`
}
} }

2
app/views/layouts/application.html.erb
View File

@@ -126,7 +126,7 @@ end %>
<% end %> <% end %>
<%# SHARED - Main content %> <%# SHARED - Main content %>
<%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto"), data: { app_layout_target: "content", viewport_target: "content" } do %> <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content" } do %>
<% unless intro_mode %> <% unless intro_mode %>
<div class="hidden lg:flex gap-2 items-center justify-between mb-6 sticky top-0 z-10 -mx-3 lg:-mx-10 px-3 lg:px-10 py-4 bg-surface border-b border-tertiary"> <div class="hidden lg:flex gap-2 items-center justify-between mb-6 sticky top-0 z-10 -mx-3 lg:-mx-10 px-3 lg:px-10 py-4 bg-surface border-b border-tertiary">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">