Merge pull request #2619 from basecamp/style-devices-page

Style devices page
This commit is contained in:
Adrien Maston
2026-03-03 12:20:09 +01:00
committed by GitHub
4 changed files with 38 additions and 17 deletions
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<%= render "layouts/shared/head" %>
<body class="public <%= @body_class %>" data-controller="local-time timezone-cookie" data-action="turbo:morph@window->local-time#refreshAll">
<body class="public <%= @body_class %>" data-controller="local-time timezone-cookie bridge--title bridge--text-size bridge--insets" data-action="turbo:morph@window->local-time#refreshAll" data-platform="<%= platform.type %>" data-bridge--title-title-value="<%= @page_title %>">
<div id="global-container">
<header class="header" id="header">
<a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
@@ -2,6 +2,8 @@ class DevicesController < ApplicationController
disallow_account_scope
before_action :set_device, only: :destroy
layout "public"
def index
@devices = Current.identity.devices.order(created_at: :desc)
end
+25 -6
View File
@@ -1,16 +1,35 @@
<h1>Registered Devices</h1>
<% @page_title = "Registered devices" %>
<section class="panel panel--centered flex flex-column gap" style="--panel-size: auto;">
<% if @devices.any? %>
<ul>
<h1 class="txt-x-large font-weight-black txt-tight-lines margin-none">
Registered devices
</h1>
<ul class="flex flex-column gap list-style-none full-width pad border-radius border" style="--inline-space: var(--block-space);">
<% @devices.each do |device| %>
<li>
<li class="flex align-center gap txt-medium txt-align-start">
<div class="flex-1 flex flex-column">
<span>
<strong><%= device.name || "Unnamed device" %></strong>
(<%= device.platform == "apple" ? "iOS" : "Android" %>)
<span>Added <%= time_ago_in_words(device.created_at) %> ago</span>
<%= button_to "Remove", saas.device_path(device), method: :delete, data: { confirm: "Remove this device?" } %>
</span>
<span class="txt-subtle txt-x-small">
Added <%= local_datetime_tag(device.created_at, style: :daysago) %>
</span>
</div>
<%= button_to saas.device_path(device), method: :delete, class: "btn btn--circle-mobile txt-small", data: { confirm: "Remove this device?" }, form: { class: "flex-item-no-shrink" } do %>
<%= icon_tag "trash", class: "icon--mobile-only" %>
<span class="overflow-ellipsis">Remove</span>
<% end %>
</li>
<% end %>
</ul>
<% else %>
<p>No devices registered. Install the mobile app to receive push notifications.</p>
<h1 class="txt-x-large font-weight-black margin-none">No devices registered</h1>
<p class="margin-none-block-start">Mobile devices registered with the mobile app will receive push notifications and will be listed here.</p>
<% end %>
<%= link_to session_menu_path(script_name: nil), class: "btn center txt-small margin-block-start hide-on-native", data: { turbo_prefetch: false } do %>
<span>Your Fizzy accounts</span>
<% end %>
</section>
@@ -22,7 +22,7 @@ class DevicesControllerTest < ActionDispatch::IntegrationTest
untenanted { get saas.devices_path }
assert_response :success
assert_select "p", /No devices registered/
assert_select "h1", /No devices registered/
end
test "show notification settings with registered devices" do