Skip to content

GH-83: Callout Plugin#324

Merged
wesleyboar merged 32 commits intomainfrom
task/GH-83-callout-element
Sep 30, 2021
Merged

GH-83: Callout Plugin#324
wesleyboar merged 32 commits intomainfrom
task/GH-83-callout-element

Conversation

@wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Aug 23, 2021 •
edited
Loading

To Do (Done)

Overview / Issues

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 GH-83 Form - Callout
> Image GH-83 Form - Image
> Link N/A, embedded within "Callout" form
Render
576px (i.e. <768px) 768px (i.e. <992px) 992px (i.e. <1200px)
GH-83 576px GH-83 768px GH-83 992px

TACC: Shared UI - Constants - Breakpoints

Structure

GH-83 Structure

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

Testing

  1. If no environment, then prepare to test CMS changes.
  2. In CMS container, run python3 manage.py migrate.
  3. On CMS website, logged in as admin, add "TACC Site" > "Callout" plugin.
  4. 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:
    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.

  1. Callout Plugin - Fix Image Resize Caveat #327

  2. Callout Plugin - Require & Integrate Image #328

  3. (fixed with hack) Element Transform Fails on Child Plugin Markup w/out Hack #320

  4. Callout Plugin - Crop Images within Ratio #329

  5. There is not support for edits to text to change all instances (as #83 description directs).

    Details

    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

  1. Horizontal Alignment for Narrow Images

    Details
    Left (…figure { align-self: center }) Center (…figure { place-self: center })
    GH-83 Narrow Image Align Left GH-83 Narrow Image Align Center

    Images are vertically aligned center (because design did not complain when viewing samples).

@wesleyboar
GH-83: Callout Component
82b768f
@wesleyboar
GH-83: Temp: Callout Snippet (Frontera)
c2c96ec
@wesleyboar
GH-83: WIP: Callout Plugin
c15d766
@wesleyboar
GH-83: Fix Callout Component after Plugin's tweaks
4fa354c
@wesleyboar
GH-83: Fix Callout Plugin, Update Styles to Match
a15e585
@wesleyboar
GH-83: Remove leftover templates
dba3f4b
@wesleyboar
GH-83: Noop: Add markup whitespace for legibility
c24e0f9
@wesleyboar
GH-83: Quick: Remove temp snippet
54fc04a
@wesleyboar
Merge branch 'main' into task/GH-83-callout-element
1266e4e
@wesleyboar
Quick: Add x-article-link-active mixin
ed0e749
@wesleyboar
GH-83: Support Hyperlink (requires 69f47cc)
51d3f1d 
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.
@wesleyboar
GH-83: Add missing helper clean_for_abstract_link
df1060b
@wesleyboar
GH-83: Squash migrations. Accept GH-321
d59c3f6 
 as part of GH-83.
@wesleyboar
GH-83/GH-321: Add missing static template tag load
acefadf
@wesleyboar
GH-321: Resize Callout image to parent height
9767d45 
CAVEAT: The addition to 0001 migration was manual  and is untested.
@wesleyboar
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.
@wesleyboar
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/
@wesleyboar
GH-83: Require all fields (can't require image)
5059e02
@wesleyboar
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.
@wesleyboar
GH-83: Quick: Update script comments & equality
a7134e2 
- Update comments for clarity and accuracy and scope.
- Update equality that was not explicit enough.
wesleyboar
wesleyboar commented Aug 24, 2021
View reviewed changes
Copy link
Member Author

@wesleyboar wesleyboar left a comment

Choose a reason for hiding this comment

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

Added notes for reviewers.

@wesleyboar wesleyboar marked this pull request as ready for review August 24, 2021 19:08
@wesleyboar wesleyboar changed the title GH-83: Callout Component GH-83: Callout Plugin Aug 24, 2021
@wesleyboar 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
Closed
Closed
Merged
@wesleyboar wesleyboar requested a review from iamthatian August 25, 2021 16:48
@wesleyboar wesleyboar added priority ▲ High priority priority ▲▲ Very high priority and removed priority ▲ High priority labels Sep 1, 2021
iamthatian
iamthatian suggested changes Sep 9, 2021
View reviewed changes
Copy link
Contributor

@iamthatian iamthatian left a comment •
edited
Loading

Choose a reason for hiding this comment

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

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

wesleyboar and others added 4 commits September 14, 2021 18:23
@wesleyboar @iamthatian
Add missing function to taccsite_cms/contrib/helpers.py
8e8a6c0 
Co-authored-by: Ian Park <contact@duckonomy.com>
@wesleyboar
Merge branch 'main' into task/GH-83-callout-element
a6cca13
@wesleyboar
GH-83: Add missing migration (help text uptdates)
d471a67
@wesleyboar
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
Copy link
Member Author

wesleyboar commented Sep 29, 2021

@duckonomy Two changes:

iamthatian
iamthatian approved these changes Sep 30, 2021
View reviewed changes
Copy link
Contributor

@iamthatian iamthatian left a comment

Choose a reason for hiding this comment

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

LGTM!

@wesleyboar wesleyboar merged commit b028b59 into main Sep 30, 2021
@wesleyboar wesleyboar deleted the task/GH-83-callout-element branch September 30, 2021 17:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@iamthatian iamthatian iamthatian approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

priority ▲▲ Very high priority

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Callout Plugin - Resize Image Height to Parent Height Callout Plugin

2 participants

@wesleyboar @iamthatian