task/WG-167: Overhaul questionnaire style #169

taoteg · 2023-11-22T20:57:06Z

Overview:

Overhaul the Questionnaire view style:

General alignment with hazmapper design
Wider panel size
Making the view more compact vertically
remove white space

PR Status:

Ready.
Work in Progress.
Hold.

Related Jira tickets:

WG-167

Summary of Changes:

Culled the mass of styles in the sheet down to only those used in the viewer portion. Restyled the questionnaire to use simple, clean black & white text with indention and font-styling to indicate content role in the display design. Tried to match the design used by Hazmapper in general.

Testing Steps:

Pull branch.
Build project.
Run project.
View questionnaire.

Note: To test the p.rangeAnswer.selected style, open the browser dev tools, view the page Elements, drill down to and select one of the rangeAnswer elements (<p class="rangeAnswer">#</p> and add the selected style to it: <p class="rangeAnswer selected">#</p>

The UI will update to render a blue circle around the selected answer value.

UI Photos:

Updated images to reflect design as of commit 96efcd8

Notes:

When reviewing existing questionnaires try to find any edge cases I missed when testing the design overhaul.

…ize of the modal window to begin improving layout and styles.

…modal. Next is to prune out the margins and spacing. Need clean unstyled text in the UI to build new CSS back up on.

…nments from selectors in questionnaire modal.

…ucture. Purging unused code next.

…e viewer. Ready to rebuild the style back up now.

…rate with the Hazmapper design aesthetic. Still working on a few question types - ranged options specifically - but otherwise clean layout now.

… content indicates a selected state so I set a value anyway in case we update the view code to include that attribute.

nathanfranklin · 2023-11-28T20:36:33Z

angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl

-::ng-deep div.hidden {
-    display: none;
+::ng-deep div.locationMapContainer,
+::ng-deep img {


all img's are getting the border (i.e in leaflet or on main page).

it looks like the following would fix it:

::ng-deep div.locationMapContainer, ::ng-deep app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {

but it also appears that dropping the ng-deep would fix it as well. not certain on that, as i understood that we needed the ng-deep everywhere:

::ng-deep div.locationMapContainer, img {

but it also appears that dropping the ng-deep would fix it as well. not certain on that, as i understood that we needed the ng-deep everywhere:

ignore the dropping the ng-deep suggestion. seems like specificity is different than our regular angular components so ng-deep is probably needed in some places; so probably best to leave alone.

Yeah, the ng-deep is needed to override those deeply nested elements in the questionnaire... its a bit wonky. Can't wait to convert this thing to a legit proper component with isolated styling control.

I'll add the specificity to avoid adding borders to images in the other pages. Didn't mean to touch any design above the questionnaire level, but I did forget to test the unrelated parts of the app.

Okay, I better isolated the selectors to only effect the questionnaire viewer modal. Should be much better now.

nathanfranklin

Besides the one comment. LGTM 👍 Great to have it looking nice!

sophia-massie

No sure if this is out of scope - but should there be a close button with an X icon at the top of the modal? And maybe the title of the questionnaire as it appears in the the asset detail panel?

Also, for text area type of fields, it allows you type into them as if you can edit. Is there a way to disable text area fields? Obviously it doesn't save as there is no submit/post but could be confusing from a user perspective.

Screen.Recording.2023-11-29.at.10.27.02.AM.mov

…le images embedded within the quesitonnaire modal. Added support for rangeSelect quesitons and for matrixTable question styling. Adjusted overall font sizes and layout for better legibility an duse of white-space.

…de locally. Investigating, but this commit is clean.

taoteg · 2023-11-29T23:47:19Z

Great catch on those fields! I disabled interaction with any of the elements of the questionnaire view modal so no weird display tinkering will tempt users.

Going to punt on the close button for now (because that is a heavier lift and a UX behavior thing), but I do wonder what the latest accessibility practice related thinking on close buttons is... TICKET!

sophia-massie

Looks great!

nathanfranklin

LGTM 👍

* task/WG-96 add assets to original questionnaire code (#144) * Do not show _hazmapper properties * Add ng-bootstrap to use carousel * Add carasol to show questionnaire assets * User correct version of npm so lock file doesn't change * Switch CI to match our container's version of node * Refactor into a component * Remove bootstrap * Use own-carousel for image asset carousel * Fix linting * Remove unintended blank line * Revert "Switch CI to match our container's version of node" This reverts commit 357027a. * Fix weird formatting issues * Revert "Revert "Switch CI to match our container's version of node"" This reverts commit 4077c5a. * task/WG-173:show asset image alongside question in the questionnaire (#165) * Show asset images with questions * Fix prettier errors * Remove reduntant types from JSDoc strings * task/WG-167: Overhaul questionnaire style (#169) * Initial commit to get the Questionnaire redesign rolling. Initial resize of the modal window to begin improving layout and styles. * Added comment to evolving styles. * Initial pass removing all font-sizes and color form the questionnaire modal. Next is to prune out the margins and spacing. Need clean, unstyled text in the UI to build new CSS back up on. * Removed all font weighting, font type assignments and font size assignments from selectors in questionnaire modal. * Commented out most of the styling in the questionnaire at this point. * Have now commented out all styles that are not required for basic structure. Purging unused code next. * Removed all unused selectors from the .styl document for questionnaire viewer. Ready to rebuild the style back up now. * Completed the initial rebuild of the Questionnaire viewer styles to integrate with the Hazmapper design aesthetic. Still working on a few question types - ranged options specifically - but otherwise clean layout now. * Added styling for the rangeAnswer elements. None of the questionnaire content indicates a selected state so I set a value anyway in case we update the view code to include that attribute. * Changes the scope of image selectors in the questionnaire to only style images embedded within the questionnaire modal. Added support for both rangeSelect question and matrixTable question styling. Adjusted overall font sizes and layout for better legibility and use of white-space. * Ran linting on the css. * Cleaned up a mistake in css. Linting seems to regenerate unused style code locally. Investigating, but this commit is clean. * task/wg-166-questionnaire-preview-title (#171) * task/wg-166-questionnaire-preview-title * Added padding for detail header for long titles * Linting * Prettier linting * Revert style linting * Remove event emitters, select node event and selected tree node property, and use the activeFeature subscription instead to pull the file name. Added a function to extract file name from activeFeature display_path. * Remove unused import * Take file naming out of try block * Remove diff * A quick tweak to the Sub-question styling to clean it up a little and add some padding. (#174) * Fix z-index of asset-detail so its below modal (#173) * Task/wg 174 & 175 improve right panel questionnaire pic scroll and metadata (#176) * task/WG-174-Improve-right-panel-questionnaire-metadata * Used FeatureType() function to get find questionnaire assets and consolidated logic * task/WG-188: fix questionnaire detail panel (#177) * Fix questionnaire-detail so it updates when feature changes Also handle the cae where there are no properites._hazmapper.questionnaire.asset because it is a questionnaire without assets * Handle case when no feature is active * Fix linting * Rework layout of questionnaire to take all space (#178) * Rework layout of questionnaire to take all space * Fix linting * Disable custom analytics-related headers (#179) * Task/WG-171: Fix location question on questionnaire map (#186) * Make map fill up the map container * Add marker on location map --------- Co-authored-by: John Gentle <[email protected]> Co-authored-by: sophia-massie <[email protected]>

taoteg added 9 commits November 17, 2023 17:35

Initial commit to get the Questionnaire redesign rolling. Initial res…

9580c63

…ize of the modal window to begin improving layout and styles.

Added comment to evolving styles.

98c5d8d

Initial pass removing all font-sizes and color form the questionnair …

6a9eaee

…modal. Next is to prune out the margins and spacing. Need clean unstyled text in the UI to build new CSS back up on.

Removed all font weighting, font type assignments and font size assig…

b78c1be

…nments from selectors in questionnaire modal.

Commented out most of the styling in the quesitonnaire at this point.

84635b8

Have now commented out all styles that are not required for basic str…

e42c215

…ucture. Purging unused code next.

Removed all unused selectors from the .styl document for questionnair…

766f8c0

…e viewer. Ready to rebuild the style back up now.

COmpleted intiial rebuild of the Questionnaire viewer styles to integ…

881d423

…rate with the Hazmapper design aesthetic. Still working on a few question types - ranged options specifically - but otherwise clean layout now.

Added styling for the rangeAnswer elements. None of the questionnaire…

81b6d7f

… content indicates a selected state so I set a value anyway in case we update the view code to include that attribute.

taoteg requested review from nathanfranklin and sophia-massie November 22, 2023 21:31

nathanfranklin mentioned this pull request Nov 28, 2023

task/wg-166-questionnaire-preview-title #171

Merged

1 task

nathanfranklin changed the title ~~Task/from branch feature questionnaire task wg 167 style overhaul~~ task/WG-167: Overhaul questionnaire style Nov 28, 2023

nathanfranklin reviewed Nov 28, 2023

View reviewed changes

nathanfranklin requested changes Nov 28, 2023

View reviewed changes

sophia-massie reviewed Nov 29, 2023

View reviewed changes

taoteg added 3 commits November 29, 2023 15:57

Ran linting on the css.

f33b35d

Cleanedup mistake in css. Linting seems to regenerate unused style co…

96efcd8

…de locally. Investigating, but this commit is clean.

taoteg requested review from nathanfranklin and sophia-massie November 29, 2023 23:47

sophia-massie approved these changes Nov 30, 2023

View reviewed changes

nathanfranklin approved these changes Nov 30, 2023

View reviewed changes

taoteg merged commit de2ef42 into feature/questionnaire Nov 30, 2023
5 checks passed

taoteg deleted the task/from-branch-feature-questionnaire-task-WG-167-style-overhaul branch November 30, 2023 17:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

task/WG-167: Overhaul questionnaire style #169

task/WG-167: Overhaul questionnaire style #169

taoteg commented Nov 22, 2023 •

edited

Loading

nathanfranklin Nov 28, 2023

nathanfranklin Nov 28, 2023 •

edited

Loading

taoteg Nov 28, 2023

taoteg Nov 28, 2023

taoteg Nov 29, 2023

nathanfranklin left a comment

sophia-massie left a comment

taoteg commented Nov 29, 2023

sophia-massie left a comment

nathanfranklin left a comment

task/WG-167: Overhaul questionnaire style #169

task/WG-167: Overhaul questionnaire style #169

Conversation

taoteg commented Nov 22, 2023 • edited Loading

Overview:

PR Status:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

Notes:

nathanfranklin Nov 28, 2023

Choose a reason for hiding this comment

nathanfranklin Nov 28, 2023 • edited Loading

Choose a reason for hiding this comment

taoteg Nov 28, 2023

Choose a reason for hiding this comment

taoteg Nov 28, 2023

Choose a reason for hiding this comment

taoteg Nov 29, 2023

Choose a reason for hiding this comment

nathanfranklin left a comment

Choose a reason for hiding this comment

sophia-massie left a comment

Choose a reason for hiding this comment

taoteg commented Nov 29, 2023

sophia-massie left a comment

Choose a reason for hiding this comment

nathanfranklin left a comment

Choose a reason for hiding this comment

taoteg commented Nov 22, 2023 •

edited

Loading

nathanfranklin Nov 28, 2023 •

edited

Loading