Browse Source

Fixes for responsive style on modal, issues with swapping between fixed and absolutely positioned modal

Former-commit-id: b5529bea8b16cbf05a021316c1a04e769e0be7ec
Former-commit-id: ca319b9f0677fc2df08e35e24b317ce5564b68e1
beta
jlukic 11 years ago
parent
commit
fe420da6c5
  1. 1
      RELEASE NOTES.md
  2. 14
      build/less/elements/image.less
  3. 3
      build/less/modules/dimmer.less
  4. 40
      build/less/modules/modal.js
  5. 4
      build/less/modules/modal.less
  6. 40
      build/minified/modules/modal.js
  7. 10
      build/uncompressed/elements/image.css
  8. 3
      build/uncompressed/modules/dimmer.css
  9. 4
      build/uncompressed/modules/modal.css
  10. 40
      build/uncompressed/modules/modal.js
  11. 2
      node/src/documents/index.html.eco
  12. 2
      node/src/documents/modules/modal.html.eco
  13. 14
      node/src/files/build/less/elements/image.less
  14. 3
      node/src/files/build/less/modules/dimmer.less
  15. 40
      node/src/files/build/less/modules/modal.js
  16. 4
      node/src/files/build/less/modules/modal.less
  17. 40
      node/src/files/build/minified/modules/modal.js
  18. 10
      node/src/files/build/uncompressed/elements/image.css
  19. 3
      node/src/files/build/uncompressed/modules/dimmer.css
  20. 4
      node/src/files/build/uncompressed/modules/modal.css
  21. 40
      node/src/files/build/uncompressed/modules/modal.js
  22. 14
      src/elements/image.less
  23. 3
      src/modules/dimmer.less
  24. 40
      src/modules/modal.js
  25. 4
      src/modules/modal.less

1
RELEASE NOTES.md

@ -3,6 +3,7 @@
### Version 0.2.2 - Sep 28, 2013
**Updates**
- Fixes invoke returning found function instead of results of found function in dropdown, modal
### Version 0.2.1 - Sep 28, 2013

14
build/less/elements/image.less

@ -73,9 +73,21 @@ img.ui.image {
}
/*--------------
Avatar
Fluid
---------------*/
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.image img {
display: block;
width: 100%;
}
/*--------------
Avatar
---------------*/
.ui.avatar.images .image,
.ui.avatar.images img,

3
build/less/modules/dimmer.less

@ -175,6 +175,9 @@
-ms-transform-origin: center center;
transform-origin: center center;
}
.ui.scrolling.page.dimmer {
position: absolute;
}
/*
body.ui.dimmed.dimmable > :not(.dimmer){
-webkit-filter: ~"blur(15px) grayscale(0.7)";

40
build/less/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

4
build/less/modules/modal.less

@ -93,11 +93,13 @@
.ui.modal > .content > .left {
display: table-cell;
padding-right: 5%;
min-width: 25%;
}
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: top;
min-width: 25%;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
@ -201,7 +203,7 @@
/* A modal that cannot fit on the page */
.ui.modal.scrolling {
position: absolute;
margin-top: 100px;
margin-top: 10px;
}

40
build/minified/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

10
build/uncompressed/elements/image.css

@ -59,6 +59,16 @@ img.ui.image {
-moz-border-radius: 500rem;
border-radius: 500rem;
}
/*--------------
Fluid
---------------*/
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.image img {
display: block;
width: 100%;
}
/*--------------
Avatar
---------------*/

3
build/uncompressed/modules/dimmer.css

@ -137,6 +137,9 @@
-ms-transform-origin: center center;
transform-origin: center center;
}
.ui.scrolling.page.dimmer {
position: absolute;
}
/*
body.ui.dimmed.dimmable > :not(.dimmer){
-webkit-filter: ~"blur(15px) grayscale(0.7)";

4
build/uncompressed/modules/modal.css

@ -73,11 +73,13 @@
.ui.modal > .content > .left {
display: table-cell;
padding-right: 5%;
min-width: 25%;
}
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: top;
min-width: 25%;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
@ -171,7 +173,7 @@
/* A modal that cannot fit on the page */
.ui.modal.scrolling {
position: absolute;
margin-top: 100px;
margin-top: 10px;
}
/*******************************
States

40
build/uncompressed/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

2
node/src/documents/index.html.eco

@ -14,7 +14,7 @@ type : 'Semantic'
<div class="ui responsive grid">
<div class="column">
<div class="introduction">
<h1 class="ui header">Semantic UI <span class="ui black label">0.2.0</span></h1>
<h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.2.2</a></h1>
<h2 class="ui header">UI is the vocabulary of the web.</h2>
<p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
<a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>

2
node/src/documents/modules/modal.html.eco

@ -45,7 +45,7 @@ type : 'UI Module'
</div>
<div class="content">
<div class="left">
<img class="ui medium image" src="/images/demo/avatar2.jpg">
<img class="ui fluid image" src="/images/demo/avatar2.jpg">
</div>
<div class="right">
<div class="ui header">Are you sure you want to upload that?</div>

14
node/src/files/build/less/elements/image.less

@ -73,9 +73,21 @@ img.ui.image {
}
/*--------------
Avatar
Fluid
---------------*/
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.image img {
display: block;
width: 100%;
}
/*--------------
Avatar
---------------*/
.ui.avatar.images .image,
.ui.avatar.images img,

3
node/src/files/build/less/modules/dimmer.less

@ -175,6 +175,9 @@
-ms-transform-origin: center center;
transform-origin: center center;
}
.ui.scrolling.page.dimmer {
position: absolute;
}
/*
body.ui.dimmed.dimmable > :not(.dimmer){
-webkit-filter: ~"blur(15px) grayscale(0.7)";

40
node/src/files/build/less/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

4
node/src/files/build/less/modules/modal.less

@ -93,11 +93,13 @@
.ui.modal > .content > .left {
display: table-cell;
padding-right: 5%;
min-width: 25%;
}
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: top;
min-width: 25%;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
@ -201,7 +203,7 @@
/* A modal that cannot fit on the page */
.ui.modal.scrolling {
position: absolute;
margin-top: 100px;
margin-top: 10px;
}

40
node/src/files/build/minified/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

10
node/src/files/build/uncompressed/elements/image.css

@ -59,6 +59,16 @@ img.ui.image {
-moz-border-radius: 500rem;
border-radius: 500rem;
}
/*--------------
Fluid
---------------*/
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.image img {
display: block;
width: 100%;
}
/*--------------
Avatar
---------------*/

3
node/src/files/build/uncompressed/modules/dimmer.css

@ -137,6 +137,9 @@
-ms-transform-origin: center center;
transform-origin: center center;
}
.ui.scrolling.page.dimmer {
position: absolute;
}
/*
body.ui.dimmed.dimmable > :not(.dimmer){
-webkit-filter: ~"blur(15px) grayscale(0.7)";

4
node/src/files/build/uncompressed/modules/modal.css

@ -73,11 +73,13 @@
.ui.modal > .content > .left {
display: table-cell;
padding-right: 5%;
min-width: 25%;
}
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: top;
min-width: 25%;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
@ -171,7 +173,7 @@
/* A modal that cannot fit on the page */
.ui.modal.scrolling {
position: absolute;
margin-top: 100px;
margin-top: 10px;
}
/*******************************
States

40
node/src/files/build/uncompressed/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

14
src/elements/image.less

@ -73,9 +73,21 @@ img.ui.image {
}
/*--------------
Avatar
Fluid
---------------*/
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.image img {
display: block;
width: 100%;
}
/*--------------
Avatar
---------------*/
.ui.avatar.images .image,
.ui.avatar.images img,

3
src/modules/dimmer.less

@ -175,6 +175,9 @@
-ms-transform-origin: center center;
transform-origin: center center;
}
.ui.scrolling.page.dimmer {
position: absolute;
}
/*
body.ui.dimmed.dimmable > :not(.dimmer){
-webkit-filter: ~"blur(15px) grayscale(0.7)";

40
src/modules/modal.js

@ -48,6 +48,7 @@ $.fn.modal = function(parameters) {
$context = $(settings.context),
$otherModals = $allModules.not($module),
$close = $module.find(selector.close),
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
@ -58,10 +59,14 @@ $.fn.modal = function(parameters) {
initialize: function() {
module.verbose('Initializing dimmer', $context);
$context
$dimmer = $context
.dimmer('add content', $module)
.dimmer('get dimmer')
;
console.log($dimmer);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
@ -91,6 +96,7 @@ $.fn.modal = function(parameters) {
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.type();
module.set.position();
@ -135,12 +141,14 @@ $.fn.modal = function(parameters) {
show: function() {
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
if(settings.transition && $.fn.transition !== undefined) {
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
module.set.type();
})
;
}
else {
@ -207,6 +215,10 @@ $.fn.modal = function(parameters) {
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmer.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
@ -250,14 +262,19 @@ $.fn.modal = function(parameters) {
.dimmer('initialize')
;
},
scrolling: function() {
console.log($dimmer, 'set scrolling');
$dimmer.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
$module.removeClass(className.scrolling);
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
$module.addClass(className.scrolling);
module.set.scrolling();
}
},
position: function() {
@ -265,6 +282,7 @@ $.fn.modal = function(parameters) {
if(module.can.fit()) {
$module
.css({
top: '50%',
marginTop: -(module.cache.height / 2)
})
;
@ -272,7 +290,8 @@ $.fn.modal = function(parameters) {
else {
$module
.css({
top: $context.prop('scrollTop')
marginTop : '1em',
top : $document.scrollTop()
})
;
}
@ -466,13 +485,12 @@ $.fn.modal.settings = {
debug : true,
performance : true,
offset : 0,
transition : 'scale',
duration : 500,
easing : 'easeOutExpo',
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},

4
src/modules/modal.less

@ -93,11 +93,13 @@
.ui.modal > .content > .left {
display: table-cell;
padding-right: 5%;
min-width: 25%;
}
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: top;
min-width: 25%;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
@ -201,7 +203,7 @@
/* A modal that cannot fit on the page */
.ui.modal.scrolling {
position: absolute;
margin-top: 100px;
margin-top: 10px;
}

Loading…
Cancel
Save