From 819e9c26d3a2a3be61d447e97fb43ba50339c5a2 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Tue, 13 Feb 2024 08:11:37 -0600 Subject: [PATCH] Improve input feedback styles and add focus style to checkboxes. The correct/incorrect/partial-correct and focus box-shadows are also made a bit more pronounced by removing the blur radius and making the spread radius a tad bigger. Basically, the same box-shadow used by bootstrap for buttons and inputs. To make this work well the margins between buttons and inputs needed to be increased a bit so that the box-shadows of the two don't overlap. The focus style has also been added to checkboxes. I think this style accidentally didn't get added for checkboxes when the correct/incorrect/partially-correct styles were added for checkboxes. This caused an undesirable lack of style when a checkbox was focused that could be confusing (@Alex-Jordan observed this a while back). The focus colors have been synchronized with those of MathQuill. MathQuill will also need a change to its style so that MathQuill inputs have the same box-shadow when focused. --- htdocs/js/MathQuill/mqeditor.js | 6 +++--- htdocs/js/MathView/mathview.js | 4 ++-- htdocs/js/Problem/problem.scss | 17 +++++++++-------- macros/PG.pl | 4 ++-- macros/core/PGessaymacros.pl | 2 +- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/htdocs/js/MathQuill/mqeditor.js b/htdocs/js/MathQuill/mqeditor.js index af63e27320..4ce4058098 100644 --- a/htdocs/js/MathQuill/mqeditor.js +++ b/htdocs/js/MathQuill/mqeditor.js @@ -137,7 +137,7 @@ // Find the preview button container, and add the equation editor button to that. const buttonContainer = document.getElementById(`${answerLabel}-latexentry-button-container`); if (buttonContainer) { - buttonContainer.classList.add('d-flex', 'gap-1'); + buttonContainer.classList.add('d-flex', 'gap-2'); buttonContainer.prepend(button); innerContainer.append(buttonContainer); } else { @@ -146,7 +146,7 @@ // Create a collapse to hold the editor. const collapse = document.createElement('div'); - collapse.classList.add('collapse', 'mt-1'); + collapse.classList.add('collapse', 'mt-2'); collapse.id = `${answerLabel}-equation-editor`; let blinkInterval; @@ -221,7 +221,7 @@ 'pt-0', 'pb-2', 'px-2', - 'gap-1', + 'gap-2', 'bg-white', 'border-top-0' ); diff --git a/htdocs/js/MathView/mathview.js b/htdocs/js/MathView/mathview.js index ea1b66955b..1952526154 100644 --- a/htdocs/js/MathView/mathview.js +++ b/htdocs/js/MathView/mathview.js @@ -94,7 +94,7 @@ // Find the preview button container, and wrap it in the inner container. const buttonContainer = container.nextElementSibling; if (buttonContainer && buttonContainer.classList.contains('latexentry-button-container')) { - buttonContainer.classList.add('d-flex', 'justify-content-end', 'gap-1'); + buttonContainer.classList.add('d-flex', 'justify-content-end', 'gap-2'); buttonContainer.append(this.button); innerContainer.append(buttonContainer); } else { @@ -171,7 +171,7 @@ inputGroup.append(this.inputTextBox); const footer = document.createElement('div'); - footer.classList.add('d-flex', 'justify-content-end', 'gap-1', 'mt-2'); + footer.classList.add('d-flex', 'justify-content-end', 'gap-2', 'mt-2'); const insertButton = document.createElement('button'); insertButton.type = 'button'; diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index 3920782f30..f580ed0140 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -73,19 +73,19 @@ span[id^='mq-answer'], .graphtool-container { &.correct:not(:focus):not(.mq-focused) { - border-color: rgba(81, 153, 81, 1); /* green */ + border-color: rgba(81, 153, 81, 0.8); /* green */ outline: 0; box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.25), - 0 0 8px 2px rgba(81, 153, 81, 1); + 0 0 0 0.2rem rgba(81, 153, 81, 0.5); } &.incorrect:not(:focus):not(.mq-focused) { - border-color: rgba(191, 84, 84, 1); /* red */ + border-color: rgba(191, 84, 84, 0.8); /* red */ outline: 0; box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.25), - 0 0 8px 2px rgba(191, 84, 84, 1); + 0 0 0 0.2rem rgba(191, 84, 84, 0.5); } &.partially-correct:not(:focus):not(.mq-focused) { @@ -93,7 +93,7 @@ outline: 0; box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.25), - 0 0 8px 2px rgba(255, 193, 7, 1); + 0 0 0 0.2rem rgba(255, 193, 7, 0.8); } } @@ -116,14 +116,15 @@ input[type='text'], input[type='radio'], + input[type='checkbox'], textarea, select { &:focus { - border-color: rgba(82, 168, 236, 0.8); + border-color: rgba(112, 154, 192, 0.8); outline: 0; box-shadow: - inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px 2px rgba(82, 168, 236, 0.6); + inset 0 1px 1px rgba(0, 0, 0, 0.25), + 0 0 0 0.2rem rgba(136, 187, 221, 0.8); } } diff --git a/macros/PG.pl b/macros/PG.pl index 538da36120..d2201492eb 100644 --- a/macros/PG.pl +++ b/macros/PG.pl @@ -840,7 +840,7 @@ =head2 ENDDOCUMENT =item * C: This is a string containing additional space separated CSS -classes to add to the feedback button. This is "ms-1" by default. Macros can +classes to add to the feedback button. This is "ms-2" by default. Macros can change this to affect positioning of the button. This generally should not be used to change the appearance of the button. @@ -1037,7 +1037,7 @@ sub ENDDOCUMENT { resultTitle => maketext('Answer Preview'), resultClass => '', btnClass => 'btn-info', - btnAddClass => 'ms-1', + btnAddClass => 'ms-2', feedbackElements => Mojo::Collection->new, insertElement => undef, insertMethod => 'append', # Can be append, append_content, prepend, or prepend_content. diff --git a/macros/core/PGessaymacros.pl b/macros/core/PGessaymacros.pl index 2552ffc588..4f49c3043c 100644 --- a/macros/core/PGessaymacros.pl +++ b/macros/core/PGessaymacros.pl @@ -134,7 +134,7 @@ sub NAMED_ESSAY_BOX { ) . tag( 'div', - class => 'latexentry-button-container d-flex gap-1 mt-1', + class => 'latexentry-button-container d-flex gap-2 mt-2', id => "$name-latexentry-button-container", data_feedback_insert_element => $name, tag(