GH-83: Callout Plugin #324

wesleyboar · 2021-08-23T21:04:37Z

To Do (Done)

Overview / Issues

Closes Callout Plugin #83
Closes Callout Plugin - Resize Image Height to Parent Height #321

Changes

Doc: Add relevant guides for plugin authors.
New: Create plugin for UI component.
New: Add module script to (optionally) resize plugin's image.

Screenshots

Form

Plugin	Image
Callout
> Image
> Link	N/A, embedded within "Callout" form

Render

576px (i.e. <768px)	768px (i.e. <992px)	992px (i.e. <1200px)

TACC: Shared UI - Constants - Breakpoints

Structure

The "Style" elements are a necessary evil until I create Section plugin (GH-91).

Testing

If no environment, then prepare to test CMS changes.
In CMS container, run python3 manage.py migrate.
On CMS website, logged in as admin, add "TACC Site" > "Callout" plugin.
Ensure the following:
1. Title and Description are required.
2. Title and Description appears.
3. Image instructions are accurate.
4. Styles match those of the callout at the bottom of the designs:
  - Frontera System page (wide)
  - Frontera System page (narrow)
5. Image shorter than text can be resized with "Advanced settings" field "Resize image to fit".
6. Image taller than text can be resized with "Advanced settings" field "Resize image to fit".

Notes

Known Issues

There are many edge cases and better ways, but none seem to be a requirement.

Callout Plugin - Fix Image Resize Caveat #327
Callout Plugin - Require & Integrate Image #328
(fixed with hack) Element Transform Fails on Child Plugin Markup w/out Hack #320
Callout Plugin - Crop Images within Ratio #329
There is not support for edits to text to change all instances (as #83 description directs).

Direction
Design wants changing the text of this to affect all instances[...]

Reference
This is currently used on [multiple] sections for Frontera, but Design said (in Jan 2021) it will likely be in just one location.

— as of 2021-09-09

See https://github.com/TACC/Core-CMS/projects/8 for more (if I have not updated the list above).

Undecided UI

Horizontal Alignment for Narrow Images

Left (…figure { align-self: center }) Center (…figure { place-self: center })

Images are vertically aligned center (because design did not complain when viewing samples).
- I have a private inquiry with Design.
- They are left-aligned. If Design wants to center, that is easy now and later.

Requires new `x-article-link-active` mixin. The reason 0003 is added, not 0002, is cuz extending branch added 0002: - site/frontera/task/GH-83-callout-element--GH-321-resize-callout-image (there, the 0003 migration has 0002 as a dependency) (here, the 0003 migration has 0001 as a dependency) When a proper main-extending branch is made, this should still happen: - task/GH-83-callout-element--GH-321-resize-callout-image - task/GH-321-resize-callout-image (there, the 0003 migration will have ??? as a dependency) Good luck, Wes.

as part of GH-83.

CAVEAT: The addition to 0001 migration was manual and is untested.

- Add helper to get a model name. - Simplify user instruction for fixing caveat. - Do not allow normal user to check resize field. - Hide field and caveat details in "Advanced settings". - Default resize field to false.

SEE: #280 SEE: https://github.com/TACC/Core-CMS/blob/579f5c6/taccsite_cms/contrib/_docs/

The plugin may require a link and should require an image (GH-328)… But the styles (and template) work fine without either.

- Update comments for clarity and accuracy and scope. - Update equality that was not explicit enough.

wesleyboar

Added notes for reviewers.

taccsite_cms/contrib/_docs/how-to-extend-django-cms-plugin.md

taccsite_cms/contrib/_docs/how-to-override-validation-error-from-parent-model.md

taccsite_cms/contrib/helpers.py

taccsite_cms/contrib/taccsite_callout/cms_plugins.py

taccsite_cms/contrib/helpers.py

taccsite_cms/contrib/taccsite_callout/models.py

taccsite_cms/contrib/taccsite_callout/templates/callout.html

See d01c8cf for details.

- Different padding for narrow screens. - Different text alignment for narrow screens. - Bolder font for descriptions.

duckonomy

I was able to add the plugin and overall it made sense!

~~However, I wasn't able to get the image to load properly and test the options yet.~~ Was able to run after restarting everything

taccsite_cms/contrib/helpers.py

taccsite_cms/contrib/_docs/how-to-override-validation-error-from-parent-model.md

taccsite_cms/contrib/taccsite_callout/cms_plugins.py

taccsite_cms/contrib/taccsite_callout/templates/callout.html

taccsite_cms/static/site_cms/js/modules/elementTransformer.js

taccsite_cms/contrib/helpers.py

Co-authored-by: Ian Park <[email protected]>

The comment may be obvious knowledge learned by new python dev (me). The comment also references code that is removed with this commit.

wesleyboar · 2021-09-29T17:20:03Z

@duckonomy Two changes:

duckonomy

LGTM!

wesleyboar added 20 commits August 20, 2021 18:15

GH-83: Callout Component

82b768f

GH-83: Temp: Callout Snippet (Frontera)

c2c96ec

GH-83: WIP: Callout Plugin

c15d766

GH-83: Fix Callout Component after Plugin's tweaks

4fa354c

GH-83: Fix Callout Plugin, Update Styles to Match

a15e585

GH-83: Remove leftover templates

dba3f4b

GH-83: Noop: Add markup whitespace for legibility

c24e0f9

GH-83: Quick: Remove temp snippet

54fc04a

Merge branch 'main' into task/GH-83-callout-element

1266e4e

Quick: Add x-article-link-active mixin

ed0e749

GH-83: Add missing helper clean_for_abstract_link

df1060b

GH-83: Squash migrations. Accept GH-321

d59c3f6

as part of GH-83.

GH-83/GH-321: Add missing static template tag load

acefadf

GH-321: Resize Callout image to parent height

9767d45

CAVEAT: The addition to 0001 migration was manual and is untested.

GH-321: Default to not resize image. Add warning.

7ffceeb

- Add helper to get a model name. - Simplify user instruction for fixing caveat. - Do not allow normal user to check resize field. - Hide field and caveat details in "Advanced settings". - Default resize field to false.

GH-83: Add two relevant docs from PR #280

a07957e

SEE: #280 SEE: https://github.com/TACC/Core-CMS/blob/579f5c6/taccsite_cms/contrib/_docs/

GH-83: Require all fields (can't require image)

5059e02

GH-83: Support Optional Image/Link in CSS Docblock

1a57226

The plugin may require a link and should require an image (GH-328)… But the styles (and template) work fine without either.

GH-83: Quick: Update script comments & equality

a7134e2

- Update comments for clarity and accuracy and scope. - Update equality that was not explicit enough.

wesleyboar commented Aug 24, 2021

View reviewed changes

GH-321: Fix figure size and note about its resize

66eae8f

wesleyboar marked this pull request as ready for review August 24, 2021 19:08

GH-83/GH-321: Show image on narrow windows

fa185d0

wesleyboar changed the title ~~GH-83: Callout Component~~ GH-83: Callout Plugin Aug 24, 2021

wesleyboar linked an issue Aug 24, 2021 that may be closed by this pull request

Callout Plugin #83

Closed

This was referenced Aug 24, 2021

Callout Plugin - Crop Images within Ratio #329

Closed

GH-88: System Specs #313

Closed

GH-88: System Specs Plugin #330

Merged

wesleyboar requested a review from duckonomy August 25, 2021 16:48

wesleyboar added 4 commits August 30, 2021 09:51

GH-83: Fix: Ensure 0001 taccsite_callout migration

75a6ece

See d01c8cf for details.

Merge branch 'main' into task/GH-83-callout-element

1f2d736

Merge branch 'main' into task/GH-83-callout-element

2b23df8

GH-83: Style Tweask to Match Design

93d7a0a

- Different padding for narrow screens. - Different text alignment for narrow screens. - Bolder font for descriptions.

wesleyboar added priority ▲ High priority priority ▲▲ Very high priority and removed priority ▲ High priority labels Sep 1, 2021

Merge branch 'main' into task/GH-83-callout-element

a438972

duckonomy requested changes Sep 9, 2021

View reviewed changes

wesleyboar and others added 4 commits September 14, 2021 18:23

Add missing function to taccsite_cms/contrib/helpers.py

8e8a6c0

Co-authored-by: Ian Park <[email protected]>

Merge branch 'main' into task/GH-83-callout-element

a6cca13

GH-83: Add missing migration (help text uptdates)

d471a67

GH-83: Shorten verbose logic. Drop comment.

47347fa

The comment may be obvious knowledge learned by new python dev (me). The comment also references code that is removed with this commit.

wesleyboar requested a review from duckonomy September 29, 2021 17:19

duckonomy approved these changes Sep 30, 2021

View reviewed changes

Merge branch 'main' into task/GH-83-callout-element

6e83ef8

wesleyboar merged commit b028b59 into main Sep 30, 2021

wesleyboar deleted the task/GH-83-callout-element branch September 30, 2021 17:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GH-83: Callout Plugin #324

GH-83: Callout Plugin #324

wesleyboar commented Aug 23, 2021 •

edited

Loading

wesleyboar left a comment

duckonomy left a comment •

edited

Loading

wesleyboar commented Sep 29, 2021

duckonomy left a comment

GH-83: Callout Plugin #324

GH-83: Callout Plugin #324

Conversation

wesleyboar commented Aug 23, 2021 • edited Loading

Overview / Issues

Changes

Screenshots

Testing

Notes

Known Issues

Undecided UI

wesleyboar left a comment

Choose a reason for hiding this comment

duckonomy left a comment • edited Loading

Choose a reason for hiding this comment

wesleyboar commented Sep 29, 2021

duckonomy left a comment

Choose a reason for hiding this comment

wesleyboar commented Aug 23, 2021 •

edited

Loading

duckonomy left a comment •

edited

Loading