recourse 4.1.2 → 4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af93482d287e4e17a767eda579b65e6e1be6a1b137ba0b60f4bcb81d079afbc7
-  data.tar.gz: e345935ababe4e104054f2072cdb2a0f270cd0fa651946a40b96178fef318a38
+  metadata.gz: 00e1253a6c0a7e462efb88f9c46765d51cbc90b20073cf72fefc38ac468d31b2
+  data.tar.gz: 51271fdc26d6a06cf53089e747f70a842b51d71ffa1fe163e4dc08927e1ba005
 SHA512:
-  metadata.gz: e9270aa3d092c1c760ca0a9b2a7fcdb754afb8fcbdeb48def3a8afb6ad7218ec96d48e10ed20bd13c1893c49e025bacc0016c5fe895fe5cabd56cb3f8cd7cbef
-  data.tar.gz: 9218b731e6d782dc16b1fa26480367dbe5867cc8945fd7102d3d03b5dd64d399c3496e0edb4b24e13a67f6176650c11b005c633cbe7511405f1ca49454b13f73
+  metadata.gz: 3526cb175143ce2fae2919654b9f7afb7c1e44e6188462084e56c784f81aaf624cc128b760499991d79bf809fab97b14a50156c15f1e4969fff710309bfee4e2
+  data.tar.gz: a4aac6c9576b269c9df0f66fa4f0e60ca4e8da4461500be1a534caa2f25f33ff6c08d88e4e7ec431edc15d3ad4cb6c9af80725245f45d82557586640c79cab46

data/CHANGELOG.md

@@ -5,6 +5,40 @@ All notable changes to this project will be documented in this file.
 For more information about changelogs, check [Keep a Changelog](http://keepachangelog.com) and
 [Vandamme](http://tech-angels.github.io/vandamme).
 
+## 4.3.0 - 2026-09-08
+
+* [Feature] On a phone a stacked cell reads as one line, `Estimate hi: 600`
+* [Feature] On a phone the sidebar's icons carry their words: `Dark mode`, `Light mode`, `Exit`
+* [Fix] A page never scrolls sideways on a phone, and Safari no longer zooms out of it
+
+  Safari laid the stacked table's hidden header row out at its full width; the page
+  now clips what would run past the window.
+
+* [Fix] Safari no longer zooms in on the search box or a filter when it is focused
+
+  The small controls were 14px, and Safari zooms on any field under 16; on a phone
+  they take the body's size.
+
+* [Fix] The footer's sentence stands above the pages on a phone rather than beside them
+* [Fix] A filter's menu drops over the first rows of the table rather than under them
+* [Feature] A date or a time is headed `Created` and `Updated`, not `Created at` and `Updated at`
+* [Fix] A touch screen gets no hover tint on a table's rows
+
+## 4.2.0 - 2026-09-08
+
+* [Feature] The log-out button sits beside the light/dark toggle
+
+  The two share the sidebar's foot, each centered in its own half, and a hover tints
+  either under a rounded corner.
+
+* [Fix] A bookmark click no longer marks the row green
+* [Fix] The log-out button is submitted by the browser, not by Turbo
+
+  A log out ends with a redirect to wherever the host signs people in, which is
+  another origin a fetch cannot follow, so the click left the page where it was.
+
+  The kept tint taking or leaving is the whole report.
+
 ## 4.1.2 - 2026-09-08
 
 * [Fix] The engine requires turbo-rails after Rails, not before

data/app/javascript/recourse/bookmark_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from '/recourse/stimulus.js'
 import { flash } from '/recourse/flash.js'
-import { marked } from '/recourse/written.js'
 
 // The square that keeps a row, answered before the server does. The icon flips under
 // the cursor and the request goes in the background, so the table is never redrawn and
@@ -78,13 +77,11 @@ export default class extends Controller {
       })
       if (!response.ok) return this.revert(kept)
 
-      // Two halves of one report, and the reason there is no toast. The tint lasts and
-      // says which rows are kept; the mark passes and says this one was written just
-      // now — the same outline a create or an update leaves while its message stands.
-      // The icon flipped on the click and would have flipped under a request that
-      // never landed, so both are the half only the server can give.
+      // The report, and the reason there is no toast: the row takes or loses its tint,
+      // which says which rows are kept. The icon flipped on the click and would have
+      // flipped under a request that never landed, so this is the half only the server
+      // can give.
       this.row?.classList.toggle('recourse-kept', kept)
-      marked(this.row)
     } catch {
       this.revert(kept)
     }

data/app/javascript/recourse/written.js

@@ -1,7 +1,5 @@
-// The mark a write leaves on the row it landed on, and how long it stands for. Two
-// things write rows here and both say so this way: a create or an update, which has a
-// toast to keep time with, and the square that keeps a row, which has none — so the
-// marking is here and the clock belongs to whoever calls it.
+// The mark a create or an update leaves on the row it landed on, and how long the toast
+// saying so stands — the one clock, which the toast controller reads too.
 export const DELAY = 2000
 
 // Marked, and handed back the way to let it go. Letting go swaps one class for the
@@ -20,10 +18,3 @@ export function mark(row) {
     row.classList.add('recourse-written-out')
   }
 }
-
-// And the same, on a clock of its own, for a write with no message to keep time with.
-export function marked(row) {
-  const fade = mark(row)
-
-  setTimeout(fade, DELAY)
-}

data/app/views/layouts/recourses.html.erb

@@ -101,6 +101,25 @@
         --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-active-color);
       }
 
+      /* Nothing here is meant to be wider than the window: the one thing that is, a
+         table, scrolls inside its own wrapper. Safari lays a stacked table's hidden
+         header row out at its full width all the same, and a page that can be
+         scrolled to it is a page Safari zooms out of and draws the navbar short on. */
+      html, .recourse-shell { overflow-x: hidden; }
+
+      /* A finger does not hover. The tint a pointer leaves on the row under it would
+         stay on whatever row was last touched, so a touch screen gets none. */
+      @media (hover: none) {
+        .table-hover > tbody > tr:hover > * {
+          --bs-table-color-state: initial;
+          --bs-table-bg-state: initial;
+        }
+      }
+
+      /* The navbar and the sidebar stack over the main column: a menu opened from a
+         filter or a link's tooltip drops over the first rows rather than under them. */
+      .recourse-shell > nav, .recourse-sidebar { position: relative; z-index: 2; }
+
       /* An action column is as wide as a row is tall — an icon in a square — and a
          counter column starts at the same square, widening only when a figure like
          38,405 needs the room: a table laying out to 100% reads the width as a
@@ -116,6 +135,23 @@
         }
       }
 
+      /* Stacked, a cell reads as one line — `Estimate hi: 600`, the heading semibold
+         and the value after it — where Bootstrap puts the heading on a line of its own
+         and leaves the row's first cell with no heading at all, bold in its place: a
+         status opening a row would be a bare badge. Every cell is headed here. And a
+         value with no space in it — an address, a token — breaks rather than widening
+         the row past the phone. */
+      @container (width < 576px) {
+        .sm\:table-stacked > tbody > tr > td[data-cell]::before {
+          content: attr(data-cell) ': ';
+          display: inline;
+          font-weight: var(--bs-font-weight-semibold);
+        }
+        .sm\:table-stacked > tbody > tr > td:first-child { font-weight: inherit; }
+        .sm\:table-stacked > tbody > tr > td:not(:first-child) + td::before { margin-block-start: 0; }
+        .sm\:table-stacked > tbody > tr > td { overflow-wrap: anywhere; }
+      }
+
       /* A counter says what it counts in one of two ways, and the table's own width is
          what picks: the icon and a bare figure where the column is a square, the
          counted model's words where there is room to read them. Bootstrap's `xl`, so
@@ -224,6 +260,9 @@
         .recourse-search { max-width: none; }
         .recourse-search-box,
         .recourse-search .combobox-toggle { flex: 1 1 100%; }
+        /* Safari zooms in on a field whose text is under 16px, and the small controls
+           are 14px: on a phone they take the body's size, and focusing one moves nothing. */
+        .recourse-search { --bs-btn-input-sm-font-size: var(--bs-body-font-size); }
       }
 
       /* Held Option marks the letter each sidebar link answers to. Marked rather than
@@ -335,12 +374,23 @@
         .table > tbody > .recourse-written-out > * { animation: none; }
       }
 
-      /* The scheme toggle sits at the foot of the sidebar and centered across it while
-         the sidebar is a column, and is simply the last item of the row while it is not
+      /* The foot of the sidebar holds the scheme toggle and the way out side by side,
+         each centered in its own half of the row: the toggle alone is in the middle, and
+         the two together are at a quarter and at three quarters. Each control sits in
+         a wrapper — the toggle's own, the form `button_to` draws — and the wrapper is
+         the half, so a button is only as wide as its icon and so is its hover. */
+      .recourse-foot { display: flex; }
+      .recourse-foot > * { flex: 1 1 0; display: flex; justify-content: center; }
+      .recourse-foot .nav-link { border-radius: var(--bs-radius-5); }
+      /* A hand cursor alone says little on an icon: a tint under it says it is a control. */
+      .recourse-foot .nav-link:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
+
+      /* The foot sits at the bottom of the sidebar and stretches across it while the
+         sidebar is a column, and is simply the last item of the row while it is not
          — the query matches the `md:` the sidebar's own classes use. Both lines are
          needed: `.nav-item` ships `flex: auto`, so every item would take an equal share
          of a full-height nav and the auto margin would never have anything left to
-         push against. Pin the items to their own height and the toggle takes the rest. */
+         push against. Pin the items to their own height and the foot takes the rest. */
       @media (width >= 768px) {
         /* A floor rather than a height, and never wrapped. `.nav` ships `flex-wrap:
            wrap`, and a column that may wrap, whose items are pinned to their own height
@@ -351,17 +401,28 @@
         .recourse-sidebar .nav-item { flex: 0 0 auto; }
         /* And it rides at the foot of the screen, which the auto margin alone is
            enough to do: the nav's floor is the sidebar's full height, so while the
-           links leave room the margin takes all of it and the toggle sits on the fold,
+           links leave room the margin takes all of it and the foot sits on the fold,
            rising with it as the window is shortened. Once the links fill the nav there
-           is no room left to take, and the toggle comes to rest immediately below the
+           is no room left to take, and the foot comes to rest immediately below the
            last of them and goes under the fold with it, to be scrolled to.
            Deliberately not sticky. Sticking it to the bottom of the viewport would lift
            it off that resting place and hold it over the links it had passed — which is
            what the background color was for, masking whichever one it covered. Both go
            together: nothing is painted over, so nothing needs painting out. */
-        .recourse-sidebar .recourse-scheme {
+        .recourse-sidebar .recourse-foot {
           margin-block-start: auto;
-          align-self: center;
+          align-self: stretch;
+        }
+      }
+
+      /* While the sidebar is a row its foot has room for words, so each icon is followed
+         by its own; as a column the words are read but not seen, the way Bootstrap's
+         `.visually-hidden` does it. */
+      .recourse-foot-word { margin-inline-start: .4em; }
+      @media (width >= 768px) {
+        .recourse-foot-word {
+          position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+          overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
         }
       }
 

data/app/views/recourses/_footer.html.erb

@@ -1,6 +1,7 @@
 <%# locals: (pagy:) %>
 <% if pagy %>
-  <div class='d-flex align-items-center' <%= tag.attributes data: limit_data(pagy) %>>
+  <%# A column on a phone, the sentence above the pages, and one row from `sm` up. -%>
+  <div class='d-flex flex-column sm:flex-row sm:align-items-center' <%= tag.attributes data: limit_data(pagy) %>>
     <%# The gem's own sentence from pagy's public readers, every figure delimited —
         rewriting pagy's English with a regex delimited one figure, only in English.
         The switch follows it after a dot: how much of the table is showing, then the
@@ -17,6 +18,6 @@
         <%= t 'recourse.displaying', count: pagy.count %>
       <% end %>
     </div>
-    <div class='pe-2'><%== pagy.series_nav(:bootstrap, classes: 'pagination mb-0') if pagy.last > 1 %></div>
+    <div class='px-2 mt-2 sm:mt-0'><%== pagy.series_nav(:bootstrap, classes: 'pagination mb-0') if pagy.last > 1 %></div>
   </div>
 <% end %>

data/app/views/recourses/_sidebar.html.erb

@@ -9,32 +9,37 @@
     </li>
   <% end %>
 
-  <%# A reader's own say in how the page looks: the last item of the sidebar, and at the
-      foot of it wherever it is a column. Which side of the fold that lands on is the
-      layout's business rather than this file's, and so is which of the two icons shows —
-      the mode may be the system's, which only CSS knows, so both are drawn. -%>
-  <li class='nav-item recourse-scheme'>
-    <%= tag.button type: 'button', class: 'nav-link border-0 bg-transparent',
-                   data: scheme_data do %>
-      <span class='recourse-scheme-light'>
-        <i class='bi bi-moon-fill'></i>
-        <span class='visually-hidden'><%= t 'recourse.darken' %></span>
-      </span>
-      <span class='recourse-scheme-dark'>
-        <i class='bi bi-sun-fill'></i>
-        <span class='visually-hidden'><%= t 'recourse.lighten' %></span>
-      </span>
-    <% end %>
-  </li>
-
-  <%# And the way out, where the host drew a route named `exit`: a button, since ending
-      a session is never a GET, and an icon like the toggle beside it. -%>
-  <% if exit? %>
-    <li class='nav-item recourse-exit'>
-      <%= button_to exit_path, method: :delete, class: 'nav-link border-0 bg-transparent' do %>
+  <%# The foot of the sidebar: a reader's own say in how the page looks and, where the
+      host drew a route named `exit`, the way out beside it — a button, since ending a
+      session is never a GET. Each takes half the row and centers its icon in it, so the
+      toggle alone sits in the middle and the two together sit at a quarter and at three
+      quarters. Which side of the fold the foot lands on is the layout's business, and so
+      is which of the two mode icons shows — the mode may be the system's, which only CSS
+      knows, so both are drawn. -%>
+  <li class='nav-item recourse-foot'>
+    <%# In a wrapper of its own, as the way out is in its form: the wrapper is the half
+        of the row, and the button is only as wide as its icon. -%>
+    <div>
+      <%= tag.button type: 'button', class: 'nav-link border-0 bg-transparent',
+                     data: scheme_data do %>
+        <span class='recourse-scheme-light'>
+          <i class='bi bi-moon-fill'></i>
+          <span class='recourse-foot-word'><%= t 'recourse.darken' %></span>
+        </span>
+        <span class='recourse-scheme-dark'>
+          <i class='bi bi-sun-fill'></i>
+          <span class='recourse-foot-word'><%= t 'recourse.lighten' %></span>
+        </span>
+      <% end %>
+    </div>
+    <%# Submitted by the browser rather than by Turbo: a log out ends with a redirect to
+        wherever the host signs people in, which is another origin a fetch cannot follow. -%>
+    <% if exit? %>
+      <%= button_to exit_path, method: :delete, class: 'nav-link border-0 bg-transparent',
+                    form: { data: { turbo: false } } do %>
         <i class='bi bi-box-arrow-right'></i>
-        <span class='visually-hidden'><%= t 'recourse.exit' %></span>
+        <span class='recourse-foot-word'><%= t 'recourse.exit' %></span>
       <% end %>
-    </li>
-  <% end %>
+    <% end %>
+  </li>
 </ul>

data/config/locales/recourse.en.yml

@@ -21,10 +21,10 @@ en:
     create: Create
     created: "%{model} was created."
     created_error: "%{model} could not be created."
-    darken: Darken the page
+    darken: Dark mode
     delete: Delete %{model}
     deleted: "%{model} was deleted."
-    exit: Log out
+    exit: Exit
     displaying:
       one: Displaying 1 item
       other: Displaying %{count} items
@@ -37,7 +37,7 @@ en:
     items:
       one: 1 item
       other: "%{count} items"
-    lighten: Lighten the page
+    lighten: Light mode
     missing_model: You declared `recourses :%{name}` in your routes file, but this app
       has no %{model} model.
     nested: You nested `recourses %{names}` inside `resources :%{parent}`, which does

data/lib/recourse/helpers/cells.rb

@@ -59,11 +59,20 @@ module Recourse
       # column holds a number and the heading says what the number is of.
       def resource_column_title(column)
         counted = resource_model.recourse_counters[column]
-        return resource_model.human_attribute_name column unless counted
+        return dated_title column unless counted
 
         Recourse.model_title counted.klass
       end
 
+      # The model's own name for a column, less the `at` or `on` a date's name ends in:
+      # `Created`, not `Created at`, since when it happened is what the column holds.
+      def dated_title(column)
+        title = resource_model.human_attribute_name column
+        dated = column.end_with?('_at', '_on') && Columns::DATE_KINDS.include?(attribute_type(column))
+
+        dated ? title.sub(/ (at|on)\z/, '') : title
+      end
+
       # Value for one cell, formatted according to what the column holds.
       def resource_cell(resource, column)
         association = belongs_to_association column

data/lib/recourse/version.rb

@@ -1,4 +1,4 @@
 module Recourse
   # Version of the gem, read by the gemspec and by hosts checking compatibility.
-  VERSION = '4.1.2'
+  VERSION = '4.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: recourse
 version: !ruby/object:Gem::Version
-  version: 4.1.2
+  version: 4.3.0
 platform: ruby
 authors:
 - claudiob