Skip to content

Styled screenshots & cleaned up current screenshots#420

Merged
validbeck merged 23 commits intomainfrom
beck/sc-6618/screenshots-cleanup
Sep 23, 2024
Merged

Styled screenshots & cleaned up current screenshots#420
validbeck merged 23 commits intomainfrom
beck/sc-6618/screenshots-cleanup

Conversation

@validbeck
Copy link
Copy Markdown
Collaborator

@validbeck validbeck commented Sep 20, 2024

Internal Notes for Reviewers

sc-6618

Style guide: Screenshots

Added a net-new section to reflect our new screenshot styling:

Screenshot 2024-09-20 at 4 08 07 PM

Cropped & annotated images

  • After I applied the .screenshot class to applicable images, I cleaned up any that had previous drop-shadowing or "business" around the edges as much as I could
  • I also annotated some screenshots that had a specific CTA section

You can see examples on the live "Register with ValidMind" preview page.

Video formatting

I cleaned these up as well, as I think the rounded corners and drop-shadow are enough to make them stand out and not be too busy:

Old New
Screenshot 2024-09-20 at 3 16 21 PM Screenshot 2024-09-20 at 3 37 46 PM

@validbeck validbeck added the internal Not to be externalized in the release notes label Sep 20, 2024
@validbeck validbeck self-assigned this Sep 20, 2024
@validbeck validbeck requested a review from nrichers September 20, 2024 22:38
@github-actions
Copy link
Copy Markdown
Contributor

PR Summary

This pull request introduces the .screenshot class to various images across multiple documentation files. The .screenshot class adds a border to the images, distinguishing them from the rest of the text. Additionally, the style guide has been updated to include a new section on the usage of screenshots, providing guidelines on how to apply the .screenshot class and when to highlight interactive elements within screenshots.

Key Changes:

  1. Addition of .screenshot Class: The .screenshot class has been added to numerous images in the documentation to enhance visual distinction.
  2. Style Guide Update: A new section on screenshots has been added to the style guide, detailing the application of the .screenshot class and best practices for highlighting interactive elements.
  3. Minor Layout Adjustments: Some layout adjustments have been made to improve the visual presentation of the documentation.
  4. CSS Updates: The CSS files have been updated to include styles for the .screenshot class, ensuring consistent styling across the documentation.

Files Affected:

  • site/about/contributing/style-guide/conventions.qmd
  • site/developer/model-documentation/work-with-test-results.qmd
  • site/get-started/developer/try-with-colab.qmd
  • site/get-started/developer/try-with-jupyterhub.qmd
  • site/get-started/platform/explore-sample-model-documentation.qmd
  • site/get-started/platform/generate-documentation-for-your-model.qmd
  • site/get-started/platform/register-your-first-model.qmd
  • site/guide/configuration/configure-google-private-service-connect.qmd
  • site/guide/configuration/register-with-validmind.qmd
  • site/guide/model-documentation/_add-content-block.qmd
  • site/guide/model-documentation/customize-documentation-templates.qmd
  • site/guide/model-documentation/submit-for-approval.qmd
  • site/guide/model-documentation/swap-documentation-templates.qmd
  • site/guide/model-documentation/work-with-content-blocks.qmd
  • site/guide/model-inventory/configure-model-interdependencies.qmd
  • site/guide/model-inventory/customize-model-inventory-layout.qmd
  • site/guide/model-validation/_assess-compliance-assess.qmd
  • site/guide/model-validation/_assess-compliance-link-evidence.qmd
  • site/guide/model-validation/_assess-compliance-link-finding.qmd
  • site/guide/model-validation/add-manage-model-findings.qmd
  • site/guide/model-validation/view-filter-model-findings.qmd
  • site/guide/model-validation/view-reports.qmd
  • site/guide/model-workflows/set-up-model-workflows.qmd
  • site/guide/model-workflows/working-with-model-workflows.qmd
  • site/guide/monitoring/enable-monitoring.qmd
  • site/guide/monitoring/review-monitoring-results.qmd
  • site/releases/2023/2023-nov-09/highlights.qmd
  • site/releases/2023/2023-oct-25/highlights.qmd
  • site/releases/2023/2023-sep-27/highlights.qmd
  • site/releases/2024-aug-13/release-notes.qmd
  • site/releases/2024-feb-14/highlights.qmd
  • site/releases/2024-jan-18/highlights.qmd
  • site/releases/2024-jul-22/release-notes.qmd
  • site/releases/2024-jun-10/release-notes.qmd
  • site/releases/2024-mar-27/highlights.qmd
  • site/releases/2024-may-22/release-notes.qmd
  • site/releases/2024-sep-09/release-notes.qmd
  • site/styles.css
  • site/training/custom.scss
  • site/training/training-for-model-developers.qmd

New Images Added:

  • site/guide/model-documentation/duplicate-template.gif
  • site/guide/model-documentation/remove-test-driven-block.gif
  • site/guide/model-documentation/swap-template-version.gif
  • site/guide/model-documentation/edit-template-outline.gif
  • site/guide/model-documentation/edit-yaml-template.gif
  • site/guide/model-documentation/add-content-block.gif
  • site/guide/model-documentation/content-editing-toolbar.png
  • site/guide/model-documentation/mathtype-full-demo.gif
  • site/guide/model-documentation/generate-with-ai.gif
  • site/guide/model-documentation/remove-text-block.gif
  • site/guide/model-documentation/remove-test-driven-block.gif
  • site/guide/model-inventory/model-interdependencies.png
  • site/guide/model-inventory/upstream-model.png
  • site/guide/model-inventory/downstream-model.png
  • site/guide/model-inventory/manage-columns-demo.gif
  • site/guide/model-validation/assess-compliance.png
  • site/guide/model-validation/filter.png
  • site/guide/model-validation/link-evidence.png
  • site/guide/model-validation/link-finding.png
  • site/guide/model-validation/all-model-findings.png
  • site/guide/model-validation/model-specific-findings.png
  • site/guide/model-validation/assess-compliance-summary.png
  • site/guide/model-validation/reports-models.png
  • site/guide/model-validation/reports-findings.png
  • site/guide/model-workflows/configure-steps.gif
  • site/guide/model-workflows/see-workflow.gif
  • site/guide/model-workflows/transition-workflow.gif
  • site/guide/monitoring/target-prediction-distribution-plot.png
  • site/guide/monitoring/ongoing-monitoring-template.png
  • site/releases/2023/2023-nov-09/onboarding-guide.png
  • site/releases/2023/2023-nov-09/table-view.png
  • site/releases/2023/2023-nov-09/test-descriptions.gif
  • site/releases/2023/2023-sep-27/list-tests.png
  • site/releases/2023/2023-sep-27/describe-test.png
  • site/releases/2023/2023-sep-27/preview-template.png
  • site/releases/2023/2023-sep-27/test-results.png
  • site/releases/2024-aug-13/manage-model-interdependencies.png
  • site/releases/2024-feb-14/list-tasks-and-tags.png
  • site/releases/2024-feb-14/actions-before.png
  • site/releases/2024-feb-14/actions-after.png
  • site/releases/2024-feb-14/getting-started-instructions.png
  • site/releases/2024-jan-18/dark-mode.png
  • site/releases/2024-jan-18/group-management.gif
  • site/releases/2024-jan-18/group-users-by-type.png
  • site/releases/2024-jan-18/light-mode.png
  • site/releases/2024-jul-22/comparison_test.gif
  • site/releases/2024-jun-10/edit-business-units.gif
  • site/releases/2024-mar-27/model-findings-manage-columns.png
  • site/releases/2024-mar-27/model-findings-page.png
  • site/releases/2024-mar-27/reports-page.png
  • site/releases/2024-mar-27/user-invite-history.png
  • site/releases/2024-may-22/about-section.png
  • site/releases/2024-may-22/ai-content-builder.png
  • site/releases/2024-may-22/documentation-overview-page.png
  • site/releases/2024-may-22/duplicate-template-id.png
  • site/releases/2024-may-22/generate-with-ai.png
  • site/releases/2024-may-22/intro-for-developers-notebook.png
  • site/releases/2024-may-22/is-vendor-model.png
  • site/releases/2024-may-22/missing-vendor-name.png
  • site/releases/2024-may-22/model-group.png
  • site/releases/2024-may-22/model-inventory-filters.png
  • site/releases/2024-may-22/overview-completion.png
  • site/releases/2024-may-22/overview-conversations.png
  • site/releases/2024-may-22/section-status.png
  • site/releases/2024-may-22/validation-report-overview-page.png
  • site/releases/2024-sep-09/settings-validation-guidelines.png
  • site/releases/2024-sep-09/reset-model-workflow.png

Test Suggestions

  • Verify that all images with the .screenshot class are rendered with the correct border styling.
  • Check that the new section on screenshots in the style guide is clear and provides accurate instructions.
  • Ensure that the layout adjustments do not negatively impact the readability or usability of the documentation.
  • Test the CSS changes across different browsers to ensure consistent styling.
  • Review the documentation to confirm that all images that should have the .screenshot class applied do indeed have it.

Copy link
Copy Markdown
Collaborator

@nrichers nrichers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! (Looks GREAT to me). 📸 I especially appreciate the cleanup you did on the screenshots with the very heavy borders that I had added — those were an experiment I came to dislike very quickly. Much appreciated.

@validbeck validbeck merged commit 785329d into main Sep 23, 2024
@validbeck validbeck deleted the beck/sc-6618/screenshots-cleanup branch September 23, 2024 22:14
validbeck added a commit that referenced this pull request Sep 23, 2024
* Fix staging deploy in Makefile (#428)

* Simplify merge strategy for staging (#373)

* Simplify merge strategy

* Minor workflow tweaks

* Switch to test branches

* Add comment to trigger workflow

* Add comment to trigger workflow

* Add comment to trigger workflow

* Switch to squash merge

* Add comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Try --ff strategy

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Revert to --no-ff strategy

* Try reset --hard

* Switch to --merge for PRs

* Switch back to merge --no-ff

* Try merge --ff again

* Add test comment to trigger workflow

* Switch back to merge --no-ff

* Add test comment to trigger workflow

* Switch back to squash merging for PRs

* Add test comment to trigger workflow

* Remove test comments

* Revert to --merge for PRs

* Testing PR#373 - push to branch from local

* Add comment to trigger workflow

* Add comment to trigger workflow

* Add comment to trigger workflow

* Switch to squash merge

* Add comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Switch to --merge for PRs

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Switch back to squash merging for PRs

* Add test comment to trigger workflow

* Remove test comments

* Revert to --merge for PRs

* Undo test changes

* Undo test comment

---------

Co-authored-by: Beck <[email protected]>

* I'm dumb (#431)

* Fix branch in merge-main-into-staging.yaml (#432)

* Styled screenshots & cleaned up current screenshots (#420)

* Added a .screenshot CSS class

* Sample image

* Changed class for About -releases

* Changed class for Get Started & edited images to be uniform

* Changed class for guides/configuration

* Changed class for guides/model-workflows

* Changed class for guides/model-inventory

* Changed class for guides/model-documentation

* Changed class for guides/model-validation

* Changed class for guides/monitoring

* Changed class for developer/

* Changed class for releases/ 1st pass

* Cropped images for 2024-may-22 -1 gif

* Reverting changes for a gif to crop again

* Cropped images for releases 2nd pass

* Cropped images for releases 3rd  pass

* Cropped images for releases 4th pass

* More tweaks

* Videos styling

* Tweaks to JH quickstart

* More cropping

* Applied class to training

* Annotated screenshots in guides/

* Currency field type (#423)

* Preview of Generate with AI docs sections (#419)

* Preview of Generate with AI docs sections

* Release notes draft

* Image edits

* Editing release

* Release notes done

* Final tweaks + new gif

* Oops I lied

* anchor links

---------

Co-authored-by: Nik Richers <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
nrichers added a commit that referenced this pull request Oct 3, 2024
* Fix staging deploy in Makefile (#428)

* Simplify merge strategy for staging (#373)

* Simplify merge strategy

* Minor workflow tweaks

* Switch to test branches

* Add comment to trigger workflow

* Add comment to trigger workflow

* Add comment to trigger workflow

* Switch to squash merge

* Add comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Try --ff strategy

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Revert to --no-ff strategy

* Try reset --hard

* Switch to --merge for PRs

* Switch back to merge --no-ff

* Try merge --ff again

* Add test comment to trigger workflow

* Switch back to merge --no-ff

* Add test comment to trigger workflow

* Switch back to squash merging for PRs

* Add test comment to trigger workflow

* Remove test comments

* Revert to --merge for PRs

* Testing PR#373 - push to branch from local

* Add comment to trigger workflow

* Add comment to trigger workflow

* Add comment to trigger workflow

* Switch to squash merge

* Add comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Remove comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Switch to --merge for PRs

* Add test comment to trigger workflow

* Add test comment to trigger workflow

* Switch back to squash merging for PRs

* Add test comment to trigger workflow

* Remove test comments

* Revert to --merge for PRs

* Undo test changes

* Undo test comment

---------

Co-authored-by: Beck <[email protected]>

* I'm dumb (#431)

* Fix branch in merge-main-into-staging.yaml (#432)

* Styled screenshots & cleaned up current screenshots (#420)

* Added a .screenshot CSS class

* Sample image

* Changed class for About -releases

* Changed class for Get Started & edited images to be uniform

* Changed class for guides/configuration

* Changed class for guides/model-workflows

* Changed class for guides/model-inventory

* Changed class for guides/model-documentation

* Changed class for guides/model-validation

* Changed class for guides/monitoring

* Changed class for developer/

* Changed class for releases/ 1st pass

* Cropped images for 2024-may-22 -1 gif

* Reverting changes for a gif to crop again

* Cropped images for releases 2nd pass

* Cropped images for releases 3rd  pass

* Cropped images for releases 4th pass

* More tweaks

* Videos styling

* Tweaks to JH quickstart

* More cropping

* Applied class to training

* Annotated screenshots in guides/

* Currency field type (#423)

* Preview of Generate with AI docs sections (#419)

* Preview of Generate with AI docs sections

* Release notes draft

* Image edits

* Editing release

* Release notes done

* Final tweaks + new gif

* Oops I lied

* anchor links

* Added attachment field type (#442)

* Added attachment field type

* Wording tweak

* Missed one

* Pulling in latest from developer-framework PR#195 (#438)

* Pulling in latest from developer-framework

* Added .screenshot class to model inventory fields

* Added aliases for index.html & training-overview.html (#444)

* Docs: Work with metrics over time (#449)

* WIP

* Key concepts draft

* Clarified  monitoring instructions now w/ accurate default permissions

* Final draft of Work with metrics over time

* Adjusted Work with content blocks

* Fixing display issue for test description listings on monitoring

* Update site/guide/monitoring/work-with-metrics-over-time.qmd

Co-authored-by: John Halz <[email protected]>

---------

Co-authored-by: John Halz <[email protected]>

* Templates for videos (#415)

* Add docs.validmind.ai/training redirect

* Update backgrounds, remove slide numbering, add slide links

* Add initial presentation with sample intro slides

* Add slides

* Update video slides

* Hide controls

* Organize slides into sections by type

* Minor update for adding tests

* Calculation field instructions & example (#443)

* Calculation field instructions & example

* Tweak

* Moved calculation screenshot into its own line

* Added Juan's magic formula

* Set up backfilled redirects for renamed pages (#454)

* 1st pass of links that used to be on developer-framework

* 1st pass of other external links to docs

* 1st pass of newer renames

* Big restructure of guides alias links 1st pass

* Restructure of Documenting models 1st pass

* 2nd pass of big restructure

* Final pass of big restructure

* Added alias redirects to style guide

* Embed Validating Models 101 playlist into Guides section (#446)

* Embed Validating Models 101 playlist into Guides section

* Remove whitespace

* Update site/guide/guides.qmd

Co-authored-by: Beck <[email protected]>

* Update site/guide/guides.qmd

Co-authored-by: Beck <[email protected]>

* Undo lead-in text for video

---------

Co-authored-by: Beck <[email protected]>

* Embed "How do I ... add tests?" video in developer docs (#450)

* Add how do I add test video

* Switch to iframe for video embed

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Beck <[email protected]>
Co-authored-by: John Halz <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Not to be externalized in the release notes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants