Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial draft of plugin to resize/center images in a modal #108

Merged
merged 30 commits into from
May 20, 2014
Merged

Initial draft of plugin to resize/center images in a modal #108

merged 30 commits into from
May 20, 2014

Conversation

drublic
Copy link
Owner

@drublic drublic commented Apr 28, 2014

This is an initial draft to publish a plugin to resize stuff in the modal.
Currently we still need:

  • check if we really want to include third party stuff like polyfills
  • implement an option to use the resize/center on a specific modal
  • test cross devices and browser
  • test edge cases
  • add a specific test-case
  • document the plugin

anselmh and others added 23 commits February 3, 2014 23:44
@anselmh
Initial commit for plugins (non-working)
8154f68
@anselmh
Add html5video plugin
cc81022
@anselmh
Add resizing (WIP) to modal (imgs)
d9ecacd
@anselmh
Add markup
f2f8379
@anselmh
Match resize MQ to CSS Mobile MQ
12484f6
@anselmh
Fix resizing function to work with AMD, etc.
25e8980
@anselmh
More refactoring of the resize plugin code
0611f50
@anselmh
Major refactor of the resize function (WIP)
5963805 
This still needs more improvement but
finally we’re getting closer to get this beast
working in browsers.

Still open:
- Better code quality
- margin-left / right pos of pseudo close element
@anselmh
More work on resizing module.
f03d801
@anselmh
Fix up resizing when window smaller than img
5a81fe5
@drublic
Merge branch 'plugins' of github.com:drublic/css-modal into plugins
10c3701 
Conflicts:
	index.html
@anselmh
More fixes on resizing, add more demo content.
c9c89ef
@anselmh
Force centered position and left property
d5ed671 
until it breaks into mobile view when
resizing dynamically.
@anselmh
This fixes several RWD bugs in resizing
8f98c8b
@anselmh
Fix up resizing edge cases with diff. img formats.
1764e46 
This includes a fix for portrait, landscape modes,
maxHeight|maxWidths of images and with the mobile
reset.

It also removes the throttle function which shouldn’t
be part of this plugin at all.
@anselmh
Add new scss partial for resizing plugin.
c008968 
This prevents the modal from being laggy transitioned
on resize.
@anselmh
Add dynamic Stylesheet func for close btn position
7f984c9 
This sets the proper position for our close button
regardless of the modal size and button size.
@anselmh
Clean up branch.
99f9e8a 
Moving files to plugins folder,
remove non-targeted files out of branch.
@drublic
Merge branch 'master' into plugin-resize
6d25cf4
@drublic
Update code for modal resize with fixes
594bb89
@drublic
Use better functions for style injection and window.matchMedia
c268552
@drublic
Update centering and resize of modal - WIP
86e5f0d
@drublic
Include image scaling for modal
ad3a101
@anselmh
Copy link
Contributor

anselmh commented Apr 30, 2014

should be 100% or centered or smaller modal size:
screen shot 2014-04-30 at 10 09 50
same:
screen shot 2014-04-30 at 10 10 27
very same:
screen shot 2014-04-30 at 10 10 34
img should be centered in mobile view, looks not ideal right now.
screen shot 2014-04-30 at 10 10 41

@anselmh
Copy link
Contributor

anselmh commented Apr 30, 2014

check if we really want to include third party stuff like polyfills

I do see this is a problem because it bloats up the other code. Can we modularize the whole thing and split it up again in two files, the plugin itself and a polyfill file?

@anselmh
Copy link
Contributor

anselmh commented Apr 30, 2014

test cross devices and browser

  • Currently, IE8 fails completely for me do show a modal
  • IE9 kind of works but fails on portrait image calculating the height (probably 'on load' only?!), also cannot apply the close pseudo-element position
  • IE10 fails also calculating the proper height (probably 'on load' only?!)
  • IE11 fails also calculating the proper height (probably 'on load' only?!)

@drublic
Move image file into img folder
abe28fe
@drublic
Only add resize effect to modals with data attr
c669006 
You need to set data-cssmodal-resize on the modal in order to get it
resized. This is the case since you most likely don't want every modal
to be centered or resize.
@drublic
Merge branch 'master' into plugin-resize
71e309e
@drublic
Update styling for close button and resize image
aa4921c
@drublic drublic merged commit 15ff54c into master May 20, 2014
@drublic drublic deleted the plugin-resize branch May 20, 2014 08:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@drublic @anselmh