From fbb74bd1f868321d97086896dedfba5bc125387b Mon Sep 17 00:00:00 2001 From: cryptogopher Date: Sun, 14 May 2023 15:11:17 +0200 Subject: [PATCH] Replace non-GET links with buttons --- app/assets/stylesheets/application.css | 90 ++++++++++++--------- app/helpers/application_helper.rb | 27 ++++--- app/views/layouts/application.html.erb | 10 +-- app/views/users/index.html.erb | 5 +- app/views/users/registrations/edit.html.erb | 6 +- 5 files changed, 79 insertions(+), 59 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 9a389c0..939416e 100644 --- a/app/assets/stylesheets/application.css +++ b/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 { - 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 { +.nav-menu .right > * { 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, -.image-button.active:hover, +a.button: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 { - background-color: #ff1f5b; - border-color: #ff1f5b; -} -.image-button:focus-visible, -.image-button.active:focus-visible, +a.button:focus-visible, +a.button.active:focus-visible, +button:focus-visible, input[type=submit]:focus-visible { background-color: #f3f3f3; } -.image-button:hover:focus-visible, -.image-button.active:hover:focus-visible, +a.button: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 { - border-color: #dddddd; - color: #909090; - margin-right: 0.25rem; - padding: 0.25rem; +table.items a:focus-visible { + text-decoration-style: dashed; } 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; +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 49532b0..655bf9b 100644 --- a/app/helpers/application_helper.rb +++ b/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) - 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 + image_element_to(:link, name, image, 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 diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1c875df..49442b0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,17 +14,15 @@
<% if user_signed_in? %> <% if current_user_disguised? %> - <%= image_link_to t(:revert), "incognito-off", revert_users_path, - data: {turbo: true, turbo_method: :post} %> + <%= image_button_to t(:revert), "incognito-off", revert_users_path %> <% else %> - <%= image_link_to t(:sign_out), "logout", destroy_user_session_path, - data: {turbo: true, turbo_method: :delete} %> + <%= image_button_to t(:sign_out), "logout", destroy_user_session_path, 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 %>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb index 01b532c..9b3e093 100644 --- a/app/views/users/index.html.erb +++ b/app/views/users/index.html.erb @@ -18,8 +18,9 @@ <%= user.created_at.to_fs(:db_without_sec) %> - <%= image_link_to t(".disguise"), "incognito", disguise_user_path(user), - data: {turbo: true, turbo_method: :post} if allow_disguise?(user) %> + <% if allow_disguise?(user) %> + <%= image_button_to t(".disguise"), "incognito", disguise_user_path(user) %> + <% end %> <% end %> diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb index b41f4da..901fb8f 100644 --- a/app/views/users/registrations/edit.html.erb +++ b/app/views/users/registrations/edit.html.erb @@ -4,9 +4,9 @@ request.referer.present? ? :back : root_url %>
- <%= image_link_to t(".delete"), "account-remove-outline", user_registration_path, - class: "dangerous", - data: { turbo: true, turbo_method: :delete, turbo_confirm: t(".confirm_delete") } %> + <%# TODO: make confirm dialog work %> + <%= image_button_to t(".delete"), "account-remove-outline", user_registration_path, + class: "dangerous", method: :delete, data: {confirm: t(".confirm_delete")} %>
<% end %>