PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-04-14 07:23:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add a round dashed border around the "What's this" button and rename it to "Help"

Browse source
This commit is contained in:
MareStare 2025-03-23 20:51:29 +00:00
parent 6f21be0164
commit db77c36451
3 changed files with 15 additions and 10 deletions
assets
css/elements
forms.css
js
settings.ts
lib/philomena_web/views
setting_view.ex

17
assets/css/elements/forms.css
View file

@ -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;

2
assets/js/settings.ts
View file

@ -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;

6
lib/philomena_web/views/setting_view.ex
View file

@ -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)