Replace non-GET links with buttons

app/assets/stylesheets/application.css

@@ -74,42 +74,42 @@ input:read-only:hover {
   height: 2.2rem;
   margin: 0.4rem 0;
 }
-.app-menu .image-button {
+.app-menu > * {
   float: right;
   margin-left: 0.8rem;
 }
 
 .nav-menu {
-  height: 2.7rem;
+  height: 2.4rem;
   margin: 0.4rem 0;
 }
-.nav-menu a svg {
+.nav-menu .right > * {
-  height: 1.5rem;
-  padding-right: 0.4rem;
-  width: 1.5rem;
-}
-.nav-menu .image-button {
-  font-size: 0.9rem;
-  padding: 0.5rem 0.8rem;
-}
-.nav-menu .right .image-button {
   float: right;
 }
-.nav-menu .left .image-button {
+.nav-menu .left > * {
   float: left;
 }
-.nav-menu .tab-button {
+.nav-menu .tab {
   border: none;
   border-radius: 0;
+  font-size: 0.9rem;
   margin: 0 0.8rem;
+  padding: 0.5rem 0.8rem;
 }
-.nav-menu .tab-button.active {
+.nav-menu .tab.active {
   border-bottom: solid 0.2rem;
   color: #009ade;
   fill: #009ade;
 }
+.nav-menu a.button svg,
+.nav-menu button svg {
+  height: 1.5rem;
+  padding-right: 0.4rem;
+  width: 1.5rem;
+}
 
-.image-button,
+a.button,
+button,
 input[type=submit] {
   align-items: center;
   background-color: white;
@@ -126,35 +126,39 @@ input[type=submit] {
   text-decoration: none;
   width: fit-content;
 }
-.image-button svg {
+a.button svg,
+button svg {
   height: 1.3rem;
   padding-right: 0.4rem;
   width: 1.3rem;
 }
-.image-button:hover,
+a.button:hover,
-.image-button.active:hover,
+a.button.active:hover,
+button:hover,
 input[type=submit]:hover {
   background-color: #009ade;
   border-color: #009ade;
   color: white;
   fill: white;
 }
-.image-button.dangerous:hover {
+a.button:focus-visible,
-  background-color: #ff1f5b;
+a.button.active:focus-visible,
-  border-color: #ff1f5b;
+button:focus-visible,
-}
-.image-button:focus-visible,
-.image-button.active:focus-visible,
 input[type=submit]:focus-visible {
   background-color: #f3f3f3;
 }
-.image-button:hover:focus-visible,
+a.button:hover:focus-visible,
-.image-button.active:hover:focus-visible,
+a.button.active:hover:focus-visible,
+button:hover:focus-visible,
 input[type=submit]:hover:focus-visible {
   background-color: #006c9b;
   border-color: #006c9b;
 }
-.image-button.dangerous:hover:focus-visible {
+button.dangerous:hover {
+  background-color: #ff1f5b;
+  border-color: #ff1f5b;
+}
+button.dangerous:hover:focus-visible {
   background-color: #b21237;
   border-color: #b21237;
 }
@@ -265,37 +269,45 @@ table.items td:not(:first-child):not(.actions) {
 }
 table.items td {
   border-top: 1px solid #dddddd;
-  line-height: 2.5rem;
   padding: 0;
 }
-table.items td a {
+table.items a {
   color: black;
   cursor: pointer;
   display: block;
   font-weight: normal;
+  line-height: 2.5rem;
   padding: 0 0.8rem;
   text-decoration: none;
 }
-table.items td a:hover {
+table.items a:hover,
+table.items a:focus-visible,
+table.items a:hover:focus-visible {
   text-decoration: underline;
   text-decoration-thickness: 0.05rem;
   text-underline-offset: 0.2rem;
 }
-table.items td a.image-button {
+table.items a:focus-visible {
-  border-color: #dddddd;
+  text-decoration-style: dashed;
-  color: #909090;
-  margin-right: 0.25rem;
-  padding: 0.25rem;
 }
 table.items td:not(:first-child) {
   color: #909090;
   fill: #909090;
 }
-table.items td.actions {
-  text-align: right;
-}
 table.items svg {
   height: 1.2rem;
   vertical-align: middle;
   width: 1.2rem;
 }
+table.items td.actions {
+  padding-left: 0.8rem;
+  text-align: right;
+}
+table.items button {
+  margin-right: 0.25rem;
+  padding: 0.25rem;
+}
+table.items button:not(:hover) {
+  border-color: #dddddd;
+  color: #909090;
+}

app/helpers/application_helper.rb

@@ -54,15 +54,12 @@ module ApplicationHelper
     form_for(record, **options, &-> (f) { f.table_form_for(&block) })
   end
 
+  def image_button_to(name, image = nil, options = nil, html_options = {})
+    image_element_to(:button, name, image, options, html_options)
+  end
+
   def image_link_to(name, image = nil, options = nil, html_options = {})
-    current = html_options.delete(:current)
+    image_element_to(:link, name, image, options, html_options)
-    return "" if (current == :hide) && (url_for(options) == request.path)
-
-    name = svg_tag("pictograms/#{image}") + name if image
-    classes = class_names(html_options[:class], "image-button", active: current == :active)
-    html_options.merge!(class: classes) { |k, v1, v2| "#{v1} #{v2}" }
-
-    link_to name, options, html_options
   end
 
   def svg_tag(source, options = {})
@@ -76,9 +73,21 @@ module ApplicationHelper
 
     content_tag :div, class: "right" do
       if current_user.at_least(:admin)
-        image_link_to t('.users'), "account-multiple-outline", users_path, class: "tab-button",
+        image_link_to t('.users'), "account-multiple-outline", users_path, class: "tab",
           current: :active
       end
     end
   end
+
+  private
+
+  def image_element_to(type, name, image = nil, options = nil, html_options = {})
+    current = html_options.delete(:current)
+    return "" if (current == :hide) && (url_for(options) == request.path)
+
+    name = svg_tag("pictograms/#{image}") + name if image
+    html_options[:class] = class_names(html_options[:class], "button", active: current == :active)
+
+    send "#{type}_to", name, options, html_options
+  end
 end

app/views/layouts/application.html.erb

@@ -14,17 +14,15 @@
     <div class="app-menu">
       <% if user_signed_in? %>
         <% if current_user_disguised? %>
-          <%= image_link_to t(:revert), "incognito-off", revert_users_path,
+          <%= image_button_to t(:revert), "incognito-off", revert_users_path %>
-            data: {turbo: true, turbo_method: :post} %>
         <% else %>
-          <%= image_link_to t(:sign_out), "logout", destroy_user_session_path,
+          <%= image_button_to t(:sign_out), "logout", destroy_user_session_path, method: :delete %>
-            data: {turbo: true, turbo_method: :delete} %>
         <% end %>
         <%= image_link_to current_user.email, "account-wrench-outline",
-              edit_user_registration_path, current: :hide %>
+          edit_user_registration_path, current: :hide %>
       <% else %>
         <%= image_link_to t(:register), "account-plus-outline", new_user_registration_path,
-              current: :hide %>
+          current: :hide %>
         <%= image_link_to t(:sign_in), "login", new_user_session_path, current: :hide %>
       <% end %>
     </div>

app/views/users/index.html.erb

@@ -18,8 +18,9 @@
         </td>
         <td><%= user.created_at.to_fs(:db_without_sec) %></td>
         <td class="actions">
-          <%= image_link_to t(".disguise"), "incognito", disguise_user_path(user),
+          <% if allow_disguise?(user) %>
-            data: {turbo: true, turbo_method: :post} if allow_disguise?(user) %>
+            <%= image_button_to t(".disguise"), "incognito", disguise_user_path(user) %>
+          <% end %>
         </td>
       </tr>
     <% end %>

app/views/users/registrations/edit.html.erb

@@ -4,9 +4,9 @@
       request.referer.present? ? :back : root_url %>
   </div>
   <div class="right">
-    <%= image_link_to t(".delete"), "account-remove-outline", user_registration_path,
+    <%# TODO: make confirm dialog work %>
-      class: "dangerous",
+    <%= image_button_to t(".delete"), "account-remove-outline", user_registration_path,
-      data: { turbo: true, turbo_method: :delete, turbo_confirm: t(".confirm_delete") } %>
+      class: "dangerous", method: :delete, data: {confirm: t(".confirm_delete")} %>
   </div>
 <% end %>