richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/110/head
jlukic 11 years ago
parent
626c126254
commit
b5529bea8b
25 changed files with 295 additions and 87 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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;
}

Write Preview
Loading…
Cancel
Save