Preview Images in a Modal #2101
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tvdeyen
approved these changes
Jul 20, 2017
| "spree/admin/shared/modal", | ||
| target: "modal-image-#{image.id}", | ||
| title: image.alt, | ||
| content: image_tag(image.attachment.url(:large)) |
There was a problem hiding this comment.
Just my personal taste, but wouldn’t it be nice to wrap the image in div that centers the image?
|
Updated to include centering of the images. This will likely not happen on normal stores as the images we're selecting to go in this modal are larger than the modal itself but I'm happy to provide a fallback for smaller images. |
tvdeyen
reviewed
Aug 9, 2017
This prevents us from being able to effectively use Bootstrap's modal component and is generally bad practice.
The modals use a `button.close` element to show the X. Our override here causes that button to have incorrect hover states. This is a hint that we'll need to migrate everything over to use Bootstrap's class names so we can avoid extensions like this.
This will allow developers to easily add modals to the admin area where necessary.
Now that we have Bootstrap we don't need to send admins to another page just to view the larger version of the image.
|
@tvdeyen a separate PR makes sense to me. Unfortunately overriding the value here is really hard. I tried adding: [id^="modal-image-"] img {
// Images in tables automatically have a border around them but we don't want
// that in our modal.
border: none;
}But of course it's not strong enough to override this incredible selector: table tbody tr.even td img {
border: 1px solid #e7f0fa;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Additionally this PR adds a shared modal partial for the admin and instructions on its usage to the style guide.