From db77c36451521db455de358bf0cf374ce8e780bb Mon Sep 17 00:00:00 2001
From: MareStare <mare.stare.official@gmail.com>
Date: Sun, 23 Mar 2025 20:51:29 +0000
Subject: [PATCH] Add a round dashed border around the "What's this" button and
rename it to "Help"
---
assets/css/elements/forms.css | 17 +++++++++++------
assets/js/settings.ts | 2 +-
lib/philomena_web/views/setting_view.ex | 6 +++---
3 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/assets/css/elements/forms.css b/assets/css/elements/forms.css
index 1b002730..a74ef49a 100644
--- a/assets/css/elements/forms.css
+++ b/assets/css/elements/forms.css
@@ -92,16 +92,21 @@ textarea {
margin-bottom: 6px;
}
-.whats-this-button,
-.whats-this-button * {
- /* font-size: 0.9em; */
+.field-help-button,
+.field-help-button * {
font-style: italic;
cursor: pointer;
}
-.whats-this-button {
+.field-help-button {
+ margin-left: 6px;
+ font-size: 0.8em;
color: var(--foreground-half-color);
- margin-left: 10px;
+ border-color: var(--foreground-half-color);
+ border-style: dashed;
+ border-width: 1px;
+ border-radius: 10px;
+ padding: 4px;
/*
We want this to behave like a button, so double clicking on it
@@ -110,7 +115,7 @@ textarea {
user-select: none;
}
-.whats-this-content {
+.field-help-content {
color: var(--foreground-half-color);
margin: 10px auto;
font-style: italic;
diff --git a/assets/js/settings.ts b/assets/js/settings.ts
index a940fdf2..b12e8226 100644
--- a/assets/js/settings.ts
+++ b/assets/js/settings.ts
@@ -51,7 +51,7 @@ function setupHelpExpansions() {
return;
}
- const helpButton = event.target.closest('.whats-this-button');
+ const helpButton = event.target.closest('.field-help-button');
if (!helpButton || !helpButton.nextElementSibling) {
return;
diff --git a/lib/philomena_web/views/setting_view.ex b/lib/philomena_web/views/setting_view.ex
index 281cf4a6..a9a82a5d 100644
--- a/lib/philomena_web/views/setting_view.ex
+++ b/lib/philomena_web/views/setting_view.ex
@@ -44,13 +44,13 @@ defmodule PhilomenaWeb.SettingView do
children
|> Enum.intersperse(" ")
|> Enum.concat([
- content_tag :span, class: "whats-this-button" do
+ content_tag :span, class: "field-help-button" do
[
content_tag(:i, "", class: "fa-regular fa-question-circle"),
- " What's this?"
+ " Help"
]
end,
- content_tag :div, class: "whats-this-content hidden" do
+ content_tag :div, class: "field-help-content hidden" do
[
title,
tag(:hr)