Mike Dalessio
733e7f0b09
ref: https://37s.fizzy.37signals.com/buckets/693169850/bubbles/999008733 This moves the "fetch-on-visible" link to right after the "div#activity" to which it will append, so that it immediately triggers if the first day's grid is short. The link previously was at the end of the page, meaning that a long list of Collections would push it out of the viewport, requiring a scroll before loading the next day.
53 lines
2.2 KiB
Plaintext
53 lines
2.2 KiB
Plaintext
<% @page_title = "Home" %>
|
|
|
|
<% content_for :header do %>
|
|
<nav class="align-start">
|
|
<header style="margin-inline-start: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3))">
|
|
<h1 class="txt-x-large margin-none"><%= Current.account.name %></h1>
|
|
</header>
|
|
|
|
<%= link_to account_users_path, class: "btn flex-item-justify-end" do %>
|
|
<%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Account settings</span>
|
|
<% end %>
|
|
</nav>
|
|
<% end %>
|
|
|
|
<div class="events__container align-start gap">
|
|
<div class="flex flex-column">
|
|
<div class="events__index-header flex align-center gap justify-space-between">
|
|
<h2 class="txt-large txt-nowrap">Latest activity</h2>
|
|
<%= render "events/filter" %>
|
|
</div>
|
|
<div id="activity" class="events__index flex flex-column">
|
|
<%= render "events/day", activity_day: @activity_day, next_day: @next_day, events: @events %>
|
|
</div>
|
|
<%= event_next_page_link(@next_day) %>
|
|
</div>
|
|
|
|
<div class="txt-align-start">
|
|
<h2 class="txt-large txt-nowrap" style="margin-block: 0.4em 0.5em;">Custom views</h2>
|
|
<div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
|
|
<% @filters.each do |filter| %>
|
|
<h3 class="txt-normal margin-block-end-half txt-tight-lines">
|
|
<%= link_to filter.summary, bubbles_path(**filter.as_params) %>
|
|
</h3>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="flex align-center gap min-width margin-block-start-double margin-block-end-half" >
|
|
<h2 class="txt-large overflow-ellipsis">Collections</h2>
|
|
<%= link_to new_bucket_path, class: "btn txt-small flex-item-justify-end flex-item-no-shrink", style: "view-transition-name: new-bucket" do %>
|
|
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">New</span>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
|
|
<% @buckets.each do |bucket| %>
|
|
<h3 class="txt-normal margin-block-end-half txt-tight-lines"><%= link_to bucket.name, bubbles_path(bucket_ids: [ bucket ]) %></h3>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|